@vertz/ui-primitives 0.2.15 → 0.2.16

package/dist/shared/chunk-w06tst6x.js

@@ -0,0 +1,57 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/switch/switch.tsx
+import { signal } from "@vertz/ui";
+import { __attr, __element, __on } from "@vertz/ui/internals";
+function SwitchRoot(options = {}) {
+  const { defaultChecked = false, disabled = false, onCheckedChange } = options;
+  const checked = signal(defaultChecked, "checked");
+  function toggle() {
+    if (disabled)
+      return;
+    checked.value = !checked.value;
+    onCheckedChange?.(checked.value);
+  }
+  return (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("data-v-id", "SwitchRoot");
+    __el0.setAttribute("type", "button");
+    __el0.setAttribute("role", "switch");
+    {
+      const __v = uniqueId("switch");
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    __attr(__el0, "aria-checked", () => checked.value ? "true" : "false");
+    __attr(__el0, "data-state", () => checked.value ? "checked" : "unchecked");
+    {
+      const __v = disabled;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("disabled", __v === true ? "" : __v);
+    }
+    {
+      const __v = disabled ? "true" : undefined;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", toggle);
+    __on(__el0, "keydown", (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    return __el0;
+  })();
+}
+var Switch = {
+  Root: SwitchRoot
+};
+
+export { Switch };

package/dist/shared/chunk-wnttq0gv.js

@@ -0,0 +1,49 @@
+import {
+  setDataState,
+  setValueRange
+} from "./chunk-vvjyx7fe.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+
+// src/progress/progress.ts
+import { signal } from "@vertz/ui";
+var Progress = {
+  Root(options = {}) {
+    const { defaultValue = 0, min = 0, max = 100 } = options;
+    const state = { value: signal(defaultValue) };
+    const root = document.createElement("div");
+    root.setAttribute("role", "progressbar");
+    root.id = uniqueId("progress");
+    setValueRange(root, defaultValue, min, max);
+    const pct = (defaultValue - min) / (max - min) * 100;
+    if (pct >= 100) {
+      setDataState(root, "complete");
+    } else if (pct > 0) {
+      setDataState(root, "loading");
+    } else {
+      setDataState(root, "idle");
+    }
+    const indicator = document.createElement("div");
+    indicator.setAttribute("data-part", "indicator");
+    indicator.style.width = `${pct}%`;
+    root.appendChild(indicator);
+    function setValue(val) {
+      const clamped = Math.min(max, Math.max(min, val));
+      state.value.value = clamped;
+      setValueRange(root, clamped, min, max);
+      const p = (clamped - min) / (max - min) * 100;
+      indicator.style.width = `${p}%`;
+      if (p >= 100) {
+        setDataState(root, "complete");
+      } else if (p > 0) {
+        setDataState(root, "loading");
+      } else {
+        setDataState(root, "idle");
+      }
+    }
+    return { root, indicator, state, setValue };
+  }
+};
+
+export { Progress };

package/dist/shared/chunk-x6qzr3g6.js

@@ -0,0 +1,100 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-jctqs9m4.js";
+import {
+  setDataState
+} from "./chunk-vvjyx7fe.js";
+
+// src/carousel/carousel.ts
+import { signal } from "@vertz/ui";
+var Carousel = {
+  Root(options = {}) {
+    const { orientation = "horizontal", loop = false, defaultIndex = 0, onSlideChange } = options;
+    const state = {
+      currentIndex: signal(defaultIndex),
+      slideCount: signal(0)
+    };
+    const slides = [];
+    const root = document.createElement("div");
+    root.setAttribute("role", "region");
+    root.setAttribute("aria-roledescription", "carousel");
+    root.setAttribute("data-orientation", orientation);
+    const viewport = document.createElement("div");
+    viewport.style.overflow = "hidden";
+    const prevButton = document.createElement("button");
+    prevButton.setAttribute("type", "button");
+    prevButton.setAttribute("aria-label", "Previous slide");
+    const nextButton = document.createElement("button");
+    nextButton.setAttribute("type", "button");
+    nextButton.setAttribute("aria-label", "Next slide");
+    function updateSlideVisibility() {
+      const current = state.currentIndex.peek();
+      for (let i = 0;i < slides.length; i++) {
+        const slide = slides[i];
+        if (!slide)
+          continue;
+        slide.setAttribute("aria-hidden", String(i !== current));
+        slide.setAttribute("aria-label", `Slide ${i + 1} of ${slides.length}`);
+        setDataState(slide, i === current ? "active" : "inactive");
+      }
+      if (!loop) {
+        prevButton.disabled = current <= 0;
+        nextButton.disabled = current >= slides.length - 1;
+      }
+      const translateProp = orientation === "horizontal" ? "translateX" : "translateY";
+      viewport.style.transform = `${translateProp}(-${current * 100}%)`;
+    }
+    function goTo(index) {
+      const total = slides.length;
+      if (total === 0)
+        return;
+      let next = index;
+      if (loop) {
+        next = (index % total + total) % total;
+      } else {
+        next = Math.max(0, Math.min(total - 1, index));
+      }
+      if (next === state.currentIndex.peek())
+        return;
+      state.currentIndex.value = next;
+      updateSlideVisibility();
+      onSlideChange?.(next);
+    }
+    function goNext() {
+      goTo(state.currentIndex.peek() + 1);
+    }
+    function goPrev() {
+      goTo(state.currentIndex.peek() - 1);
+    }
+    prevButton.addEventListener("click", goPrev);
+    nextButton.addEventListener("click", goNext);
+    root.addEventListener("keydown", (event) => {
+      const prevKey = orientation === "horizontal" ? Keys.ArrowLeft : Keys.ArrowUp;
+      const nextKey = orientation === "horizontal" ? Keys.ArrowRight : Keys.ArrowDown;
+      if (isKey(event, prevKey)) {
+        event.preventDefault();
+        goPrev();
+      }
+      if (isKey(event, nextKey)) {
+        event.preventDefault();
+        goNext();
+      }
+    });
+    function Slide() {
+      const slide = document.createElement("div");
+      slide.setAttribute("role", "group");
+      slide.setAttribute("aria-roledescription", "slide");
+      slides.push(slide);
+      state.slideCount.value = slides.length;
+      viewport.appendChild(slide);
+      updateSlideVisibility();
+      return slide;
+    }
+    root.appendChild(viewport);
+    updateSlideVisibility();
+    return { root, viewport, prevButton, nextButton, state, Slide, goTo, goNext, goPrev };
+  }
+};
+
+export { Carousel };

package/dist/src/accordion/accordion.d.ts

@@ -0,0 +1,23 @@
+import { Signal } from "@vertz/ui";
+interface AccordionOptions {
+	multiple?: boolean;
+	defaultValue?: string[];
+	onValueChange?: (value: string[]) => void;
+}
+interface AccordionState {
+	value: Signal<string[]>;
+}
+interface AccordionElements {
+	root: HTMLDivElement;
+}
+declare const Accordion: {
+	Root(options?: AccordionOptions): AccordionElements & {
+		state: AccordionState;
+		Item: (value: string) => {
+			item: HTMLDivElement;
+			trigger: HTMLButtonElement;
+			content: HTMLDivElement;
+		};
+	};
+};
+export { AccordionState, AccordionOptions, AccordionElements, Accordion };

package/dist/src/accordion/accordion.js

@@ -0,0 +1,9 @@
+import {
+  Accordion
+} from "../../shared/chunk-e3aj5yw4.js";
+import"../../shared/chunk-jctqs9m4.js";
+import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-8y1jf6xr.js";
+export {
+  Accordion
+};

package/dist/src/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,26 @@
+import { Signal } from "@vertz/ui";
+interface AlertDialogOptions {
+	defaultOpen?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	onAction?: () => void;
+}
+interface AlertDialogState {
+	open: Signal<boolean>;
+}
+interface AlertDialogElements {
+	trigger: HTMLButtonElement;
+	overlay: HTMLDivElement;
+	content: HTMLDivElement;
+	title: HTMLHeadingElement;
+	description: HTMLParagraphElement;
+	cancel: HTMLButtonElement;
+	action: HTMLButtonElement;
+	show: () => void;
+	hide: () => void;
+}
+declare const AlertDialog: {
+	Root: (options?: AlertDialogOptions) => AlertDialogElements & {
+		state: AlertDialogState;
+	};
+};
+export { AlertDialogState, AlertDialogOptions, AlertDialogElements, AlertDialog };

package/dist/src/alert-dialog/alert-dialog.js

@@ -0,0 +1,9 @@
+import {
+  AlertDialog
+} from "../../shared/chunk-34yfm2b0.js";
+import"../../shared/chunk-e2v1c9ex.js";
+import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-8y1jf6xr.js";
+export {
+  AlertDialog
+};

package/dist/src/badge/badge.d.ts

@@ -0,0 +1,10 @@
+interface BadgeOptions {
+	variant?: "default" | "secondary" | "outline" | "destructive";
+}
+interface BadgeElements {
+	badge: HTMLSpanElement;
+}
+declare const Badge: {
+	Root: (options?: BadgeOptions) => BadgeElements;
+};
+export { BadgeOptions, BadgeElements, Badge };

package/dist/src/badge/badge.js

@@ -0,0 +1,7 @@
+import {
+  Badge
+} from "../../shared/chunk-vq9tfzh8.js";
+import"../../shared/chunk-8y1jf6xr.js";
+export {
+  Badge
+};

package/dist/src/button/button.d.ts

@@ -0,0 +1,18 @@
+import { Signal } from "@vertz/ui";
+interface ButtonOptions {
+	disabled?: boolean;
+	onPress?: () => void;
+}
+interface ButtonElements {
+	root: HTMLButtonElement;
+}
+interface ButtonState {
+	disabled: Signal<boolean>;
+	pressed: Signal<boolean>;
+}
+declare const Button: {
+	Root(options?: ButtonOptions): ButtonElements & {
+		state: ButtonState;
+	};
+};
+export { ButtonState, ButtonOptions, ButtonElements, Button };

package/dist/src/button/button.js

@@ -0,0 +1,8 @@
+import {
+  Button
+} from "../../shared/chunk-ve006hmy.js";
+import"../../shared/chunk-jctqs9m4.js";
+import"../../shared/chunk-vvjyx7fe.js";
+export {
+  Button
+};

package/dist/src/calendar/calendar.d.ts

@@ -0,0 +1,40 @@
+import { Signal } from "@vertz/ui";
+interface CalendarOptions {
+	mode?: "single" | "range" | "multiple";
+	defaultValue?: Date | Date[] | {
+		from: Date;
+		to: Date;
+	};
+	defaultMonth?: Date;
+	minDate?: Date;
+	maxDate?: Date;
+	disabled?: (date: Date) => boolean;
+	weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+	onValueChange?: (value: Date | Date[] | {
+		from: Date;
+		to: Date;
+	} | null) => void;
+	onMonthChange?: (month: Date) => void;
+}
+interface CalendarState {
+	value: Signal<Date | Date[] | {
+		from: Date;
+		to: Date;
+	} | null>;
+	focusedDate: Signal<Date>;
+	displayMonth: Signal<Date>;
+}
+interface CalendarElements {
+	root: HTMLDivElement;
+	header: HTMLDivElement;
+	title: HTMLDivElement;
+	prevButton: HTMLButtonElement;
+	nextButton: HTMLButtonElement;
+	grid: HTMLTableElement;
+}
+declare const Calendar: {
+	Root(options?: CalendarOptions): CalendarElements & {
+		state: CalendarState;
+	};
+};
+export { CalendarState, CalendarOptions, CalendarElements, Calendar };

package/dist/src/calendar/calendar.js

@@ -0,0 +1,6 @@
+import {
+  Calendar
+} from "../../shared/chunk-48v8j0vh.js";
+export {
+  Calendar
+};

package/dist/src/carousel/carousel.d.ts

@@ -0,0 +1,27 @@
+import { Signal } from "@vertz/ui";
+interface CarouselOptions {
+	orientation?: "horizontal" | "vertical";
+	loop?: boolean;
+	defaultIndex?: number;
+	onSlideChange?: (index: number) => void;
+}
+interface CarouselState {
+	currentIndex: Signal<number>;
+	slideCount: Signal<number>;
+}
+interface CarouselElements {
+	root: HTMLDivElement;
+	viewport: HTMLDivElement;
+	prevButton: HTMLButtonElement;
+	nextButton: HTMLButtonElement;
+}
+declare const Carousel: {
+	Root(options?: CarouselOptions): CarouselElements & {
+		state: CarouselState;
+		Slide: () => HTMLDivElement;
+		goTo: (index: number) => void;
+		goNext: () => void;
+		goPrev: () => void;
+	};
+};
+export { CarouselState, CarouselOptions, CarouselElements, Carousel };

package/dist/src/carousel/carousel.js

@@ -0,0 +1,8 @@
+import {
+  Carousel
+} from "../../shared/chunk-x6qzr3g6.js";
+import"../../shared/chunk-jctqs9m4.js";
+import"../../shared/chunk-vvjyx7fe.js";
+export {
+  Carousel
+};

package/dist/src/checkbox/checkbox.d.ts

@@ -0,0 +1,20 @@
+import { Signal } from "@vertz/ui";
+type CheckedState = boolean | "mixed";
+interface CheckboxOptions {
+	defaultChecked?: CheckedState;
+	disabled?: boolean;
+	onCheckedChange?: (checked: CheckedState) => void;
+}
+interface CheckboxState {
+	checked: Signal<CheckedState>;
+	disabled: Signal<boolean>;
+}
+interface CheckboxElements {
+	root: HTMLButtonElement;
+}
+declare const Checkbox: {
+	Root(options?: CheckboxOptions): CheckboxElements & {
+		state: CheckboxState;
+	};
+};
+export { CheckedState, CheckboxState, CheckboxOptions, CheckboxElements, Checkbox };

package/dist/src/checkbox/checkbox.js

@@ -0,0 +1,9 @@
+import {
+  Checkbox
+} from "../../shared/chunk-h42bk324.js";
+import"../../shared/chunk-jctqs9m4.js";
+import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-8y1jf6xr.js";
+export {
+  Checkbox
+};

package/dist/src/collapsible/collapsible.d.ts

@@ -0,0 +1,21 @@
+import { Signal } from "@vertz/ui";
+interface CollapsibleOptions {
+	defaultOpen?: boolean;
+	disabled?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}
+interface CollapsibleState {
+	open: Signal<boolean>;
+	disabled: Signal<boolean>;
+}
+interface CollapsibleElements {
+	root: HTMLDivElement;
+	trigger: HTMLButtonElement;
+	content: HTMLDivElement;
+}
+declare const Collapsible: {
+	Root(options?: CollapsibleOptions): CollapsibleElements & {
+		state: CollapsibleState;
+	};
+};
+export { CollapsibleState, CollapsibleOptions, CollapsibleElements, Collapsible };

package/dist/src/collapsible/collapsible.js

@@ -0,0 +1,8 @@
+import {
+  Collapsible
+} from "../../shared/chunk-3s6s6f06.js";
+import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-8y1jf6xr.js";
+export {
+  Collapsible
+};

package/dist/src/combobox/combobox.d.ts

@@ -0,0 +1,23 @@
+import { Signal } from "@vertz/ui";
+interface ComboboxOptions {
+	defaultValue?: string;
+	onValueChange?: (value: string) => void;
+	onInputChange?: (input: string) => void;
+}
+interface ComboboxState {
+	open: Signal<boolean>;
+	value: Signal<string>;
+	inputValue: Signal<string>;
+	activeIndex: Signal<number>;
+}
+interface ComboboxElements {
+	input: HTMLInputElement;
+	listbox: HTMLDivElement;
+}
+declare const Combobox: {
+	Root(options?: ComboboxOptions): ComboboxElements & {
+		state: ComboboxState;
+		Option: (value: string, label?: string) => HTMLDivElement;
+	};
+};
+export { ComboboxState, ComboboxOptions, ComboboxElements, Combobox };

package/dist/src/combobox/combobox.js

@@ -0,0 +1,9 @@
+import {
+  Combobox
+} from "../../shared/chunk-bcfzteh0.js";
+import"../../shared/chunk-jctqs9m4.js";
+import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-8y1jf6xr.js";
+export {
+  Combobox
+};

package/dist/src/command/command.d.ts

@@ -0,0 +1,29 @@
+import { Signal } from "@vertz/ui";
+interface CommandOptions {
+	filter?: (value: string, search: string) => boolean;
+	onSelect?: (value: string) => void;
+	onInputChange?: (value: string) => void;
+	placeholder?: string;
+}
+interface CommandState {
+	inputValue: Signal<string>;
+	activeIndex: Signal<number>;
+}
+interface CommandElements {
+	root: HTMLDivElement;
+	input: HTMLInputElement;
+	list: HTMLDivElement;
+	empty: HTMLDivElement;
+}
+declare const Command: {
+	Root(options?: CommandOptions): CommandElements & {
+		state: CommandState;
+		Item: (value: string, label?: string, keywords?: string[]) => HTMLDivElement;
+		Group: (label: string) => {
+			el: HTMLDivElement;
+			Item: (value: string, label?: string, keywords?: string[]) => HTMLDivElement;
+		};
+		Separator: () => HTMLHRElement;
+	};
+};
+export { CommandState, CommandOptions, CommandElements, Command };

package/dist/src/command/command.js

@@ -0,0 +1,9 @@
+import {
+  Command
+} from "../../shared/chunk-vcp10kne.js";
+import"../../shared/chunk-jctqs9m4.js";
+import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-8y1jf6xr.js";
+export {
+  Command
+};

package/dist/src/context-menu/context-menu.d.ts

@@ -0,0 +1,39 @@
+import { Signal } from "@vertz/ui";
+import { Middleware, Placement, Strategy } from "@floating-ui/dom";
+interface FloatingOptions {
+	placement?: Placement;
+	strategy?: Strategy;
+	offset?: number;
+	flip?: boolean;
+	shift?: boolean;
+	middleware?: Middleware[];
+	matchReferenceWidth?: boolean;
+	portal?: boolean;
+	/** Override the reference element used for positioning (e.g., a custom trigger wrapping the primitive trigger). */
+	referenceElement?: HTMLElement;
+}
+interface ContextMenuOptions {
+	onSelect?: (value: string) => void;
+	positioning?: FloatingOptions;
+}
+interface ContextMenuState {
+	open: Signal<boolean>;
+	activeIndex: Signal<number>;
+}
+interface ContextMenuElements {
+	trigger: HTMLDivElement;
+	content: HTMLDivElement;
+}
+declare const ContextMenu: {
+	Root(options?: ContextMenuOptions): ContextMenuElements & {
+		state: ContextMenuState;
+		Item: (value: string, label?: string) => HTMLDivElement;
+		Group: (label: string) => {
+			el: HTMLDivElement;
+			Item: (value: string, label?: string) => HTMLDivElement;
+		};
+		Separator: () => HTMLHRElement;
+		Label: (text: string) => HTMLDivElement;
+	};
+};
+export { ContextMenuState, ContextMenuOptions, ContextMenuElements, ContextMenu };

package/dist/src/context-menu/context-menu.js

@@ -0,0 +1,11 @@
+import {
+  ContextMenu
+} from "../../shared/chunk-8qfeqrrz.js";
+import"../../shared/chunk-a6wp8c32.js";
+import"../../shared/chunk-0mcr52hc.js";
+import"../../shared/chunk-jctqs9m4.js";
+import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-8y1jf6xr.js";
+export {
+  ContextMenu
+};

package/dist/src/date-picker/date-picker.d.ts

@@ -0,0 +1,47 @@
+import { Signal } from "@vertz/ui";
+interface DatePickerOptions {
+	mode?: "single" | "range";
+	defaultValue?: Date | {
+		from: Date;
+		to: Date;
+	};
+	defaultMonth?: Date;
+	minDate?: Date;
+	maxDate?: Date;
+	disabled?: (date: Date) => boolean;
+	formatDate?: (date: Date) => string;
+	placeholder?: string;
+	onValueChange?: (value: Date | {
+		from: Date;
+		to: Date;
+	} | null) => void;
+	onOpenChange?: (open: boolean) => void;
+}
+interface DatePickerState {
+	open: Signal<boolean>;
+	value: Signal<Date | {
+		from: Date;
+		to: Date;
+	} | null>;
+	displayMonth: Signal<Date>;
+}
+interface DatePickerElements {
+	trigger: HTMLButtonElement;
+	content: HTMLDivElement;
+	calendar: {
+		root: HTMLDivElement;
+		header: HTMLDivElement;
+		title: HTMLDivElement;
+		prevButton: HTMLButtonElement;
+		nextButton: HTMLButtonElement;
+		grid: HTMLTableElement;
+	};
+}
+declare const DatePicker: {
+	Root(options?: DatePickerOptions): DatePickerElements & {
+		state: DatePickerState;
+		show: () => void;
+		hide: () => void;
+	};
+};
+export { DatePickerState, DatePickerOptions, DatePickerElements, DatePicker };

package/dist/src/date-picker/date-picker.js

@@ -0,0 +1,14 @@
+import {
+  DatePicker
+} from "../../shared/chunk-6pnjrst7.js";
+import"../../shared/chunk-48v8j0vh.js";
+import"../../shared/chunk-dkhst4wv.js";
+import"../../shared/chunk-a6wp8c32.js";
+import"../../shared/chunk-e2v1c9ex.js";
+import"../../shared/chunk-0mcr52hc.js";
+import"../../shared/chunk-jctqs9m4.js";
+import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-8y1jf6xr.js";
+export {
+  DatePicker
+};