@vertz/ui-primitives 0.2.22 → 0.2.24

package/dist/shared/chunk-y4mmmayp.js

@@ -0,0 +1,206 @@
+import {
+  focusFirst,
+  saveFocus,
+  trapFocus
+} from "./chunk-e2v1c9ex.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setDescribedBy,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated,
+  setLabelledBy
+} from "./chunk-vevfhpc9.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/dialog/dialog.tsx
+import { __discardMountFrame, __element, __flushMountFrame, __on, __pushMountFrame, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function DialogRoot(options = {}) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    let openDialog = function() {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(overlay, false);
+      setHidden(content, false);
+      setDataState(trigger, "open");
+      setDataState(overlay, "open");
+      setDataState(content, "open");
+      restoreFocus = saveFocus();
+      if (modal) {
+        removeTrap = trapFocus(content);
+      }
+      queueMicrotask(() => focusFirst(content));
+      onOpenChange?.(true);
+    }, closeDialog = function() {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setDataState(trigger, "closed");
+      setDataState(overlay, "closed");
+      setDataState(content, "closed");
+      setHiddenAnimated(overlay, true);
+      setHiddenAnimated(content, true);
+      removeTrap?.();
+      removeTrap = null;
+      restoreFocus?.();
+      restoreFocus = null;
+      onOpenChange?.(false);
+    };
+    const { modal = true, defaultOpen = false, onOpenChange, ...attrs } = options;
+    const ids = linkedIds("dialog");
+    const titleId = `${ids.contentId}-title`;
+    const descriptionId = `${ids.contentId}-description`;
+    const state = { open: signal(defaultOpen) };
+    let restoreFocus = null;
+    let removeTrap = null;
+    const trigger = (() => {
+      const __el0 = __element("button");
+      __el0.setAttribute("type", "button");
+      {
+        const __v = ids.triggerId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "true" : "false";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el0.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      __on(__el0, "click", () => {
+        if (state.open.peek()) {
+          closeDialog();
+        } else {
+          openDialog();
+        }
+      });
+      return __el0;
+    })();
+    const overlay = (() => {
+      const __el1 = __element("div");
+      __el1.setAttribute("data-dialog-overlay", "");
+      {
+        const __v = defaultOpen ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el1.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: defaultOpen ? "" : "none" };
+        if (__v != null && __v !== false)
+          __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __on(__el1, "click", () => closeDialog());
+      return __el1;
+    })();
+    const content = (() => {
+      const __el2 = __element("div");
+      __el2.setAttribute("role", "dialog");
+      {
+        const __v = ids.contentId;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("id", __v === true ? "" : __v);
+      }
+      {
+        const __v = modal ? "true" : undefined;
+        if (__v != null && __v !== false)
+          __el2.setAttribute("aria-modal", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "false" : "true";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
+      }
+      {
+        const __v = defaultOpen ? "open" : "closed";
+        if (__v != null && __v !== false)
+          __el2.setAttribute("data-state", __v === true ? "" : __v);
+      }
+      {
+        const __v = { display: defaultOpen ? "" : "none" };
+        if (__v != null && __v !== false)
+          __el2.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+      }
+      __on(__el2, "keydown", (event) => {
+        if (isKey(event, Keys.Escape)) {
+          event.preventDefault();
+          event.stopPropagation();
+          closeDialog();
+        }
+      });
+      return __el2;
+    })();
+    setLabelledBy(content, titleId);
+    setDescribedBy(content, descriptionId);
+    const title = (() => {
+      const __el3 = __element("h2");
+      {
+        const __v = titleId;
+        if (__v != null && __v !== false)
+          __el3.setAttribute("id", __v === true ? "" : __v);
+      }
+      return __el3;
+    })();
+    const description = (() => {
+      const __el4 = __element("p");
+      {
+        const __v = descriptionId;
+        if (__v != null && __v !== false)
+          __el4.setAttribute("id", __v === true ? "" : __v);
+      }
+      return __el4;
+    })();
+    const close = (() => {
+      const __el5 = __element("button");
+      __el5.setAttribute("type", "button");
+      __el5.setAttribute("aria-label", "Close");
+      __on(__el5, "click", () => closeDialog());
+      return __el5;
+    })();
+    applyAttrs(content, attrs);
+    const __mfResult0 = {
+      trigger,
+      overlay,
+      content,
+      title,
+      description,
+      close,
+      state,
+      show: openDialog,
+      hide: closeDialog
+    };
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var Dialog = {
+  Root: DialogRoot
+};
+
+export { Dialog };

package/dist/shared/chunk-yfzddvxc.js

@@ -0,0 +1,71 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/avatar/avatar-composed.tsx
+import { __append, __attr, __child, __discardMountFrame, __element, __enterChildren, __exitChildren, __flushMountFrame, __pushMountFrame } from "@vertz/ui/internals";
+import { createContext, useContext } from "@vertz/ui";
+var AvatarContext = createContext(undefined, "@vertz/ui-primitives::AvatarContext");
+function AvatarImage(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(AvatarContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("img");
+      __attr(__el0, "src", () => __props.src);
+      __attr(__el0, "alt", () => __props.alt);
+      __attr(__el0, "class", () => cn(ctx?.classes?.image, __props.className ?? __props.class));
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function AvatarFallback(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const ctx = useContext(AvatarContext);
+    const __mfResult0 = (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(ctx?.classes?.fallback, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })();
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+function ComposedAvatarRoot(__props) {
+  const __mfDepth = __pushMountFrame();
+  try {
+    const __mfResult0 = AvatarContext.Provider({ get value() {
+      return { classes: __props.classes };
+    }, children: () => (() => {
+      const __el0 = __element("div");
+      __attr(__el0, "class", () => cn(__props.classes?.root, __props.className ?? __props.class));
+      __enterChildren(__el0);
+      __append(__el0, __child(() => __props.children));
+      __exitChildren();
+      return __el0;
+    })() });
+    __flushMountFrame();
+    return __mfResult0;
+  } catch (__mfErr) {
+    __discardMountFrame(__mfDepth);
+    throw __mfErr;
+  }
+}
+var ComposedAvatar = Object.assign(ComposedAvatarRoot, {
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
+
+export { ComposedAvatar };

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

@@ -0,0 +1,30 @@
+import { ChildValue } from "@vertz/ui";
+interface AccordionClasses {
+	item?: string;
+	trigger?: string;
+	content?: string;
+}
+interface SlotProps {
+	children?: ChildValue;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+}
+interface ItemProps extends SlotProps {
+	value: string;
+}
+interface ComposedAccordionProps {
+	children?: ChildValue;
+	classes?: AccordionClasses;
+	type?: "single" | "multiple";
+	defaultValue?: string[];
+	onValueChange?: (value: string[]) => void;
+}
+type AccordionClassKey = keyof AccordionClasses;
+declare const ComposedAccordion: ((props: ComposedAccordionProps) => HTMLElement) & {
+	__classKeys?: AccordionClassKey;
+	Item: (props: ItemProps) => HTMLElement;
+	Trigger: (props: SlotProps) => HTMLElement;
+	Content: (props: SlotProps) => HTMLElement;
+};
+export { ComposedAccordionProps, ComposedAccordion, AccordionClasses, AccordionClassKey };

package/dist/src/accordion/accordion-composed.js

@@ -0,0 +1,6 @@
+import {
+  ComposedAccordion
+} from "../../shared/chunk-kskxxc2q.js";
+export {
+  ComposedAccordion
+};

package/dist/src/accordion/accordion.js

@@ -1,6 +1,6 @@
 import {
   Accordion
-} from "../../shared/chunk-e4mm5e59.js";
+} from "../../shared/chunk-f0wy7k56.js";
 export {
   Accordion
 };

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

@@ -0,0 +1,26 @@
+import { ChildValue } from "@vertz/ui";
+interface AlertClasses {
+	root?: string;
+	title?: string;
+	description?: string;
+}
+type AlertClassKey = keyof AlertClasses;
+interface SlotProps {
+	children?: ChildValue;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+}
+interface ComposedAlertProps {
+	children?: ChildValue;
+	classes?: AlertClasses;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+}
+declare const ComposedAlert: ((props: ComposedAlertProps) => HTMLElement) & {
+	__classKeys?: AlertClassKey;
+	Title: (props: SlotProps) => HTMLElement;
+	Description: (props: SlotProps) => HTMLElement;
+};
+export { ComposedAlertProps, ComposedAlert, AlertClasses, AlertClassKey };

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

@@ -0,0 +1,6 @@
+import {
+  ComposedAlert
+} from "../../shared/chunk-spng4yb9.js";
+export {
+  ComposedAlert
+};

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

@@ -0,0 +1,40 @@
+import { ChildValue } from "@vertz/ui";
+interface AlertDialogClasses {
+	overlay?: string;
+	content?: string;
+	cancel?: string;
+	action?: string;
+	header?: string;
+	title?: string;
+	description?: string;
+	footer?: string;
+}
+interface SlotProps {
+	children?: ChildValue;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+}
+interface ButtonSlotProps extends SlotProps {
+	onClick?: () => void;
+	disabled?: boolean;
+}
+interface ComposedAlertDialogProps {
+	children?: ChildValue;
+	classes?: AlertDialogClasses;
+	onOpenChange?: (open: boolean) => void;
+	onAction?: () => void;
+}
+type AlertDialogClassKey = keyof AlertDialogClasses;
+declare const ComposedAlertDialog: ((props: ComposedAlertDialogProps) => HTMLElement) & {
+	__classKeys?: AlertDialogClassKey;
+	Trigger: (props: SlotProps) => HTMLElement;
+	Content: (props: SlotProps) => HTMLElement;
+	Title: (props: SlotProps) => HTMLElement;
+	Description: (props: SlotProps) => HTMLElement;
+	Header: (props: SlotProps) => HTMLElement;
+	Footer: (props: SlotProps) => HTMLElement;
+	Cancel: (props: ButtonSlotProps) => HTMLElement;
+	Action: (props: ButtonSlotProps) => HTMLElement;
+};
+export { ComposedAlertDialogProps, ComposedAlertDialog, AlertDialogClasses, AlertDialogClassKey };

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

@@ -0,0 +1,6 @@
+import {
+  ComposedAlertDialog
+} from "../../shared/chunk-hfjtkytb.js";
+export {
+  ComposedAlertDialog
+};

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

@@ -1,6 +1,6 @@
 import {
   AlertDialog
-} from "../../shared/chunk-w318par6.js";
+} from "../../shared/chunk-jdygp28a.js";
 export {
   AlertDialog
 };

package/dist/src/avatar/avatar-composed.d.ts

@@ -0,0 +1,33 @@
+import { ChildValue } from "@vertz/ui";
+interface AvatarClasses {
+	root?: string;
+	image?: string;
+	fallback?: string;
+}
+type AvatarClassKey = keyof AvatarClasses;
+interface SlotProps {
+	children?: ChildValue;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+}
+interface AvatarImageProps {
+	src: string;
+	alt: string;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+}
+interface ComposedAvatarProps {
+	children?: ChildValue;
+	classes?: AvatarClasses;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+}
+declare const ComposedAvatar: ((props: ComposedAvatarProps) => HTMLElement) & {
+	__classKeys?: AvatarClassKey;
+	Image: (props: AvatarImageProps) => HTMLElement;
+	Fallback: (props: SlotProps) => HTMLElement;
+};
+export { ComposedAvatarProps, ComposedAvatar, AvatarClasses, AvatarClassKey };

package/dist/src/avatar/avatar-composed.js

@@ -0,0 +1,6 @@
+import {
+  ComposedAvatar
+} from "../../shared/chunk-yfzddvxc.js";
+export {
+  ComposedAvatar
+};

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

@@ -0,0 +1,33 @@
+import { ChildValue } from "@vertz/ui";
+/**
+* A composed primitive is a callable function with phantom brands
+* that define the valid class keys and element return type for that component.
+*/
+interface ComposedPrimitive<
+	K extends string = string,
+	E extends Element = HTMLElement
+> {
+	(props: {
+		children?: ChildValue;
+		classes?: Partial<Record<K, string>>;
+		[key: string]: unknown;
+	}): E;
+	__classKeys?: K;
+	__elementType?: E;
+}
+import { ChildValue as ChildValue2 } from "@vertz/ui";
+interface BadgeClasses {
+	base?: string;
+}
+type BadgeClassKey = keyof BadgeClasses;
+interface ComposedBadgeProps {
+	classes?: BadgeClasses;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+	children?: ChildValue2;
+	style?: Record<string, string | number>;
+	[key: string]: unknown;
+}
+declare const ComposedBadge: ComposedPrimitive<BadgeClassKey, HTMLElement>;
+export { ComposedBadgeProps, ComposedBadge, BadgeClasses, BadgeClassKey };

package/dist/src/badge/badge-composed.js

@@ -0,0 +1,6 @@
+import {
+  ComposedBadge
+} from "../../shared/chunk-v0b5pkcq.js";
+export {
+  ComposedBadge
+};

package/dist/src/badge/badge.js

@@ -1,6 +1,6 @@
 import {
   Badge
-} from "../../shared/chunk-z0gwkzgp.js";
+} from "../../shared/chunk-tn0m98j8.js";
 export {
   Badge
 };

package/dist/src/breadcrumb/breadcrumb-composed.d.ts

@@ -0,0 +1,34 @@
+import { ChildValue } from "@vertz/ui";
+interface BreadcrumbClasses {
+	nav?: string;
+	list?: string;
+	item?: string;
+	link?: string;
+	page?: string;
+	separator?: string;
+}
+type BreadcrumbClassKey = keyof BreadcrumbClasses;
+interface BreadcrumbItemProps {
+	children?: string | Node | (() => string | Node);
+	/** Target path — renders as Link (SPA navigation). Omit for non-linked items. */
+	href?: string;
+	/** Marks this item as the current page (aria-current="page", no link). */
+	current?: boolean;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+}
+interface ComposedBreadcrumbProps {
+	children?: ChildValue;
+	/** Separator character between items. Default: "/" */
+	separator?: string;
+	classes?: BreadcrumbClasses;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+}
+declare const ComposedBreadcrumb: ((props: ComposedBreadcrumbProps) => HTMLElement) & {
+	__classKeys?: BreadcrumbClassKey;
+	Item: (props: BreadcrumbItemProps) => HTMLElement;
+};
+export { ComposedBreadcrumbProps, ComposedBreadcrumb, BreadcrumbItemProps, BreadcrumbClasses, BreadcrumbClassKey };

package/dist/src/breadcrumb/breadcrumb-composed.js

@@ -0,0 +1,6 @@
+import {
+  ComposedBreadcrumb
+} from "../../shared/chunk-ev367pq3.js";
+export {
+  ComposedBreadcrumb
+};

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

@@ -0,0 +1,34 @@
+import { ChildValue } from "@vertz/ui";
+/**
+* A composed primitive is a callable function with phantom brands
+* that define the valid class keys and element return type for that component.
+*/
+interface ComposedPrimitive<
+	K extends string = string,
+	E extends Element = HTMLElement
+> {
+	(props: {
+		children?: ChildValue;
+		classes?: Partial<Record<K, string>>;
+		[key: string]: unknown;
+	}): E;
+	__classKeys?: K;
+	__elementType?: E;
+}
+import { ChildValue as ChildValue2 } from "@vertz/ui";
+interface ButtonClasses {
+	base?: string;
+}
+type ButtonClassKey = keyof ButtonClasses;
+interface ComposedButtonProps {
+	classes?: ButtonClasses;
+	className?: string;
+	/** @deprecated Use `className` instead. */
+	class?: string;
+	children?: ChildValue2;
+	disabled?: boolean;
+	type?: "button" | "submit" | "reset";
+	[key: string]: unknown;
+}
+declare const ComposedButton: ComposedPrimitive<ButtonClassKey, HTMLElement>;
+export { ComposedButtonProps, ComposedButton, ButtonClasses, ButtonClassKey };

package/dist/src/button/button-composed.js

@@ -0,0 +1,6 @@
+import {
+  ComposedButton
+} from "../../shared/chunk-hpvjfj0j.js";
+export {
+  ComposedButton
+};

package/dist/src/button/button.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../../shared/chunk-mqs4qq0b.js";
+} from "../../shared/chunk-nj420k31.js";
 export {
   Button
 };

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

@@ -0,0 +1,42 @@
+interface CalendarClasses {
+	root?: string;
+	header?: string;
+	title?: string;
+	navButton?: string;
+	grid?: string;
+	headCell?: string;
+	cell?: string;
+	dayButton?: string;
+	monthSelect?: string;
+	yearSelect?: string;
+}
+type CalendarClassKey = keyof CalendarClasses;
+interface ComposedCalendarProps {
+	classes?: CalendarClasses;
+	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;
+	/**
+	* Controls how the calendar header navigation is rendered.
+	* - 'buttons' (default): prev/next arrow buttons only
+	* - 'dropdown': month + year <select> elements, no arrow buttons
+	* - 'dropdown-buttons': month + year <select> elements AND arrow buttons
+	*/
+	captionLayout?: "buttons" | "dropdown" | "dropdown-buttons";
+}
+declare const ComposedCalendar: ((props: ComposedCalendarProps) => HTMLElement) & {
+	__classKeys?: CalendarClassKey;
+};
+export { ComposedCalendarProps, ComposedCalendar, CalendarClasses, CalendarClassKey };

package/dist/src/calendar/calendar-composed.js

@@ -0,0 +1,6 @@
+import {
+  ComposedCalendar
+} from "../../shared/chunk-3jack97k.js";
+export {
+  ComposedCalendar
+};

package/dist/src/calendar/calendar.js

@@ -1,6 +1,6 @@
 import {
   Calendar
-} from "../../shared/chunk-k8nabsxm.js";
+} from "../../shared/chunk-b4zzg457.js";
 export {
   Calendar
 };