@vertz/ui-primitives 0.2.20 → 0.2.21

package/dist/shared/chunk-ztvj60xp.js

@@ -0,0 +1,185 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  handleListNavigation
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setHidden,
+  setSelected
+} from "./chunk-vvjyx7fe.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
+
+// src/tabs/tabs.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function TabList(orientation, triggers, tabValues, selectTab) {
+  return (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "tablist");
+    {
+      const __v = orientation === "vertical" ? "vertical" : undefined;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-orientation", __v === true ? "" : __v);
+    }
+    __on(__el0, "keydown", (event) => {
+      const result = handleListNavigation(event, triggers, {
+        orientation
+      });
+      if (result) {
+        const idx = triggers.indexOf(result);
+        if (idx >= 0) {
+          const val = tabValues[idx];
+          if (val !== undefined)
+            selectTab(val);
+        }
+      }
+    });
+    return __el0;
+  })();
+}
+function TabTrigger(triggerId, panelId, value, label, isActive, selectTab) {
+  return (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    __el0.setAttribute("role", "tab");
+    {
+      const __v = triggerId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = panelId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+    }
+    {
+      const __v = value;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-value", __v === true ? "" : __v);
+    }
+    {
+      const __v = isActive ? "true" : "false";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-selected", __v === true ? "" : __v);
+    }
+    {
+      const __v = isActive ? "active" : "inactive";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", () => {
+      selectTab(value);
+    });
+    __enterChildren(__el0);
+    __insert(__el0, label ?? value);
+    __exitChildren();
+    return __el0;
+  })();
+}
+function TabsContainer(list) {
+  return (() => {
+    const __el0 = __element("div");
+    __enterChildren(__el0);
+    __insert(__el0, list);
+    __exitChildren();
+    return __el0;
+  })();
+}
+function TabPanel(panelId, triggerId, isActive) {
+  return (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "tabpanel");
+    {
+      const __v = panelId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = triggerId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-labelledby", __v === true ? "" : __v);
+    }
+    __el0.setAttribute("tabindex", "0");
+    {
+      const __v = isActive ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = isActive ? "active" : "inactive";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = isActive ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+    }
+    return __el0;
+  })();
+}
+function TabsRoot(options = {}) {
+  const { defaultValue = "", orientation = "horizontal", onValueChange, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const triggers = [];
+  const panels = [];
+  const tabValues = [];
+  function selectTab(value) {
+    state.value.value = value;
+    for (let i = 0;i < tabValues.length; i++) {
+      const isActive = tabValues[i] === value;
+      const trig = triggers[i];
+      const panel = panels[i];
+      if (!trig || !panel)
+        continue;
+      setSelected(trig, isActive);
+      setDataState(trig, isActive ? "active" : "inactive");
+      trig.setAttribute("tabindex", isActive ? "0" : "-1");
+      setHidden(panel, !isActive);
+      setDataState(panel, isActive ? "active" : "inactive");
+    }
+    onValueChange?.(value);
+  }
+  const list = TabList(orientation, triggers, tabValues, selectTab);
+  const root = TabsContainer(list);
+  const cleanups = [];
+  function Tab(value, label) {
+    const baseId = uniqueId("tab");
+    const triggerId = `${baseId}-trigger`;
+    const panelId = `${baseId}-panel`;
+    const isActive = value === state.value.peek();
+    const trig = TabTrigger(triggerId, panelId, value, label, isActive, selectTab);
+    const handleClick = () => {
+      trig.focus();
+    };
+    trig.addEventListener("click", handleClick);
+    cleanups.push(() => trig.removeEventListener("click", handleClick));
+    const panel = TabPanel(panelId, triggerId, isActive);
+    triggers.push(trig);
+    panels.push(panel);
+    tabValues.push(value);
+    list.appendChild(trig);
+    root.appendChild(panel);
+    setRovingTabindex(triggers, triggers.findIndex((t) => tabValues[triggers.indexOf(t)] === state.value.peek()));
+    return { trigger: trig, panel };
+  }
+  function destroy() {
+    for (const cleanup of cleanups)
+      cleanup();
+    cleanups.length = 0;
+  }
+  applyAttrs(root, attrs);
+  return { root, list, state, Tab, destroy };
+}
+var Tabs = {
+  Root: TabsRoot
+};
+
+export { Tabs };

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

@@ -1,5 +1,7 @@
 import { Signal } from "@vertz/ui";
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;

package/dist/src/accordion/accordion.js

@@ -1,10 +1,6 @@
 import {
   Accordion
-} from "../../shared/chunk-avxcmmk6.js";
-import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-vvjyx7fe.js";
-import"../../shared/chunk-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-1hv9yd28.js";
 export {
   Accordion
 };

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

@@ -8,13 +8,13 @@ interface AlertDialogState {
 	open: Signal<boolean>;
 }
 interface AlertDialogElements {
-	trigger: HTMLButtonElement;
-	overlay: HTMLDivElement;
-	content: HTMLDivElement;
-	title: HTMLHeadingElement;
-	description: HTMLParagraphElement;
-	cancel: HTMLButtonElement;
-	action: HTMLButtonElement;
+	trigger: HTMLElement;
+	overlay: HTMLElement;
+	content: HTMLElement;
+	title: HTMLElement;
+	description: HTMLElement;
+	cancel: HTMLElement;
+	action: HTMLElement;
 	show: () => void;
 	hide: () => void;
 }

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

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

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

@@ -1,4 +1,6 @@
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;

package/dist/src/badge/badge.js

@@ -1,8 +1,6 @@
 import {
   Badge
-} from "../../shared/chunk-rnjm61t0.js";
-import"../../shared/chunk-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-90hmpm0w.js";
 export {
   Badge
 };

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

@@ -1,4 +1,6 @@
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;

package/dist/src/button/button.js

@@ -1,8 +1,6 @@
 import {
   Button
-} from "../../shared/chunk-4da5zksy.js";
-import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-dpsgb1xw.js";
+} from "../../shared/chunk-1dzcjmfq.js";
 export {
   Button
 };

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

@@ -1,5 +1,7 @@
 import { Signal } from "@vertz/ui";
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;
@@ -37,16 +39,17 @@ interface CalendarState {
 	displayMonth: Signal<Date>;
 }
 interface CalendarElements {
-	root: HTMLDivElement;
-	header: HTMLDivElement;
-	title: HTMLDivElement;
-	prevButton: HTMLButtonElement;
-	nextButton: HTMLButtonElement;
-	grid: HTMLTableElement;
+	root: HTMLElement;
+	header: HTMLElement;
+	title: HTMLElement;
+	prevButton: HTMLElement;
+	nextButton: HTMLElement;
+	grid: HTMLElement;
 }
 declare const Calendar: {
 	Root: (options?: CalendarOptions) => CalendarElements & {
 		state: CalendarState;
+		destroy: () => void;
 	};
 };
 export { CalendarState, CalendarOptions, CalendarElements, Calendar };

package/dist/src/calendar/calendar.js

@@ -1,7 +1,6 @@
 import {
   Calendar
-} from "../../shared/chunk-18y8gfk0.js";
-import"../../shared/chunk-dpsgb1xw.js";
+} from "../../shared/chunk-pvy0tcd7.js";
 export {
   Calendar
 };

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

@@ -1,5 +1,7 @@
 import { Signal } from "@vertz/ui";
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;

package/dist/src/carousel/carousel.js

@@ -1,9 +1,6 @@
 import {
   Carousel
-} from "../../shared/chunk-g9qvd20g.js";
-import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-vvjyx7fe.js";
-import"../../shared/chunk-dpsgb1xw.js";
+} from "../../shared/chunk-je7tqf67.js";
 export {
   Carousel
 };

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

@@ -1,4 +1,6 @@
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;

package/dist/src/checkbox/checkbox.js

@@ -1,9 +1,6 @@
 import {
   Checkbox
-} from "../../shared/chunk-hr9hx58m.js";
-import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-ac86qw7a.js";
 export {
   Checkbox
 };

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

@@ -1,5 +1,7 @@
 import { Signal } from "@vertz/ui";
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;

package/dist/src/collapsible/collapsible.js

@@ -1,9 +1,6 @@
 import {
   Collapsible
-} from "../../shared/chunk-tfyg0qrp.js";
-import"../../shared/chunk-vvjyx7fe.js";
-import"../../shared/chunk-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-ewxzhtej.js";
 export {
   Collapsible
 };

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

@@ -1,5 +1,7 @@
 import { Signal } from "@vertz/ui";
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;

package/dist/src/combobox/combobox.js

@@ -1,10 +1,6 @@
 import {
   Combobox
-} from "../../shared/chunk-4085nbdq.js";
-import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-vvjyx7fe.js";
-import"../../shared/chunk-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-ey4485fh.js";
 export {
   Combobox
 };

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

@@ -1,5 +1,7 @@
 import { Signal } from "@vertz/ui";
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;

package/dist/src/command/command.js

@@ -1,10 +1,6 @@
 import {
   Command
-} from "../../shared/chunk-ttsyf6ma.js";
-import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-vvjyx7fe.js";
-import"../../shared/chunk-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-d8n8mggh.js";
 export {
   Command
 };

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

@@ -1,5 +1,7 @@
 import { Signal } from "@vertz/ui";
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;

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

@@ -1,12 +1,6 @@
 import {
   ContextMenu
-} from "../../shared/chunk-x0we8gcy.js";
-import"../../shared/chunk-a6wp8c32.js";
-import"../../shared/chunk-0mcr52hc.js";
-import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-vvjyx7fe.js";
-import"../../shared/chunk-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-te4pdqnh.js";
 export {
   ContextMenu
 };

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

@@ -29,12 +29,12 @@ interface DatePickerElements {
 	trigger: HTMLButtonElement;
 	content: HTMLDivElement;
 	calendar: {
-		root: HTMLDivElement;
-		header: HTMLDivElement;
-		title: HTMLDivElement;
-		prevButton: HTMLButtonElement;
-		nextButton: HTMLButtonElement;
-		grid: HTMLTableElement;
+		root: HTMLElement;
+		header: HTMLElement;
+		title: HTMLElement;
+		prevButton: HTMLElement;
+		nextButton: HTMLElement;
+		grid: HTMLElement;
 	};
 }
 declare const DatePicker: {

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

@@ -1,15 +1,6 @@
 import {
   DatePicker
-} from "../../shared/chunk-x2hz98qn.js";
-import"../../shared/chunk-18y8gfk0.js";
-import"../../shared/chunk-m1ptgp1s.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-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-f501vw7e.js";
 export {
   DatePicker
 };

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

@@ -1,5 +1,7 @@
 import { Signal } from "@vertz/ui";
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;
@@ -24,6 +26,7 @@ interface DialogElements {
 	content: HTMLDivElement;
 	overlay: HTMLDivElement;
 	title: HTMLHeadingElement;
+	description: HTMLParagraphElement;
 	close: HTMLButtonElement;
 	show: () => void;
 	hide: () => void;

package/dist/src/dialog/dialog.js

@@ -1,11 +1,6 @@
 import {
   Dialog
-} from "../../shared/chunk-7krvqrwq.js";
-import"../../shared/chunk-e2v1c9ex.js";
-import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-vvjyx7fe.js";
-import"../../shared/chunk-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-kytkmdpc.js";
 export {
   Dialog
 };

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

@@ -1,5 +1,7 @@
 import { Signal } from "@vertz/ui";
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;
@@ -26,6 +28,7 @@ interface FloatingOptions {
 }
 interface MenuOptions extends ElementAttrs {
 	onSelect?: (value: string) => void;
+	onOpenChange?: (open: boolean) => void;
 	positioning?: FloatingOptions;
 }
 interface MenuState {

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

@@ -1,13 +1,6 @@
 import {
   DropdownMenu
-} from "../../shared/chunk-96d9nr7y.js";
-import"../../shared/chunk-7ffg0caj.js";
-import"../../shared/chunk-a6wp8c32.js";
-import"../../shared/chunk-0mcr52hc.js";
-import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-vvjyx7fe.js";
-import"../../shared/chunk-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-zf0rhm9e.js";
 export {
   DropdownMenu
 };

package/dist/src/hover-card/hover-card.d.ts

@@ -1,5 +1,7 @@
 import { Signal } from "@vertz/ui";
 interface ElementAttrs {
+	className?: string;
+	/** @deprecated Use `className` instead. */
 	class?: string;
 	id?: string;
 	style?: string;

package/dist/src/hover-card/hover-card.js

@@ -1,11 +1,6 @@
 import {
   HoverCard
-} from "../../shared/chunk-bew4bjgf.js";
-import"../../shared/chunk-0mcr52hc.js";
-import"../../shared/chunk-jctqs9m4.js";
-import"../../shared/chunk-vvjyx7fe.js";
-import"../../shared/chunk-dpsgb1xw.js";
-import"../../shared/chunk-8y1jf6xr.js";
+} from "../../shared/chunk-4jnweh3m.js";
 export {
   HoverCard
 };