@vertz/ui-primitives 0.2.41 → 0.2.43

package/dist/shared/chunk-5gycdypd.js

@@ -0,0 +1,58 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  setDataState
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/progress/progress.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { ref, signal } from "@vertz/ui";
+function dataStateFor(pct) {
+  if (pct >= 100)
+    return "complete";
+  if (pct > 0)
+    return "loading";
+  return "idle";
+}
+function ProgressBar(defaultValue, min, max, initialPct, indicatorRef) {
+  return jsxDEV_7x81h0kn("div", {
+    role: "progressbar",
+    id: uniqueId("progress"),
+    "aria-valuenow": String(defaultValue),
+    "aria-valuemin": String(min),
+    "aria-valuemax": String(max),
+    "data-state": dataStateFor(initialPct),
+    children: jsxDEV_7x81h0kn("div", {
+      ref: indicatorRef,
+      "data-part": "indicator",
+      style: { width: `${initialPct}%` }
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function ProgressRoot(options = {}) {
+  const { defaultValue = 0, min = 0, max = 100, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const indicatorRef = ref();
+  const initialPct = (defaultValue - min) / (max - min) * 100;
+  const root = ProgressBar(defaultValue, min, max, initialPct, indicatorRef);
+  const indicator = indicatorRef.current;
+  applyAttrs(root, attrs);
+  function setValue(val) {
+    const clamped = Math.min(max, Math.max(min, val));
+    state.value.value = clamped;
+    root.setAttribute("aria-valuenow", String(clamped));
+    const pct = (clamped - min) / (max - min) * 100;
+    indicator.style.width = `${pct}%`;
+    setDataState(root, dataStateFor(pct));
+  }
+  return { root, indicator, state, setValue };
+}
+var Progress = {
+  Root: ProgressRoot
+};
+
+export { Progress };

package/dist/shared/chunk-6mm7fhp8.js

@@ -0,0 +1,105 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  handleListNavigation
+} from "./chunk-7867pr13.js";
+import {
+  setChecked,
+  setDataState,
+  setDisabled
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/radio/radio.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function RadioGroup(items, itemValues, selectItem) {
+  return jsxDEV_7x81h0kn("div", {
+    role: "radiogroup",
+    id: uniqueId("radiogroup"),
+    onKeydown: (event) => {
+      const result = handleListNavigation(event, items, { orientation: "vertical" });
+      if (result) {
+        const idx = items.indexOf(result);
+        if (idx >= 0) {
+          const val = itemValues[idx];
+          if (val !== undefined)
+            selectItem(val);
+        }
+      }
+    }
+  }, undefined, false, undefined, this);
+}
+function RadioItem(value, label, isActive, disabled, selectItem) {
+  const el = jsxDEV_7x81h0kn("div", {
+    role: "radio",
+    id: uniqueId("radio"),
+    "data-value": value,
+    "aria-checked": isActive ? "true" : "false",
+    "data-state": isActive ? "checked" : "unchecked",
+    onClick: () => {
+      if (!disabled)
+        selectItem(value);
+    },
+    children: label ?? value
+  }, undefined, false, undefined, this);
+  if (disabled) {
+    setDisabled(el, true);
+    el.setAttribute("data-disabled", "");
+  }
+  return el;
+}
+function RadioRoot(options = {}) {
+  const { defaultValue = "", onValueChange, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const items = [];
+  const itemValues = [];
+  function selectItem(value) {
+    state.value.value = value;
+    for (let i = 0;i < items.length; i++) {
+      const item = items[i];
+      if (!item)
+        continue;
+      const isActive = itemValues[i] === value;
+      setChecked(item, isActive);
+      setDataState(item, isActive ? "checked" : "unchecked");
+    }
+    setRovingTabindex(items, itemValues.indexOf(value));
+    onValueChange?.(value);
+  }
+  const root = RadioGroup(items, itemValues, selectItem);
+  const cleanups = [];
+  function Item(value, label, itemOptions) {
+    const isActive = value === state.value.peek();
+    const disabled = itemOptions?.disabled ?? false;
+    const item = RadioItem(value, label, isActive, disabled, selectItem);
+    const handleClick = () => {
+      if (!disabled)
+        item.focus();
+    };
+    item.addEventListener("click", handleClick);
+    cleanups.push(() => item.removeEventListener("click", handleClick));
+    items.push(item);
+    itemValues.push(value);
+    setRovingTabindex(items, itemValues.indexOf(state.value.peek()));
+    return item;
+  }
+  function destroy() {
+    for (const cleanup of cleanups)
+      cleanup();
+    cleanups.length = 0;
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Item, destroy };
+}
+var Radio = {
+  Root: RadioRoot
+};
+
+export { Radio };

package/dist/shared/chunk-6zmnqvh6.js

@@ -0,0 +1,109 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+
+// src/collapsible/collapsible-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var CollapsibleContext = createContext(undefined, "@vertz/ui-primitives::CollapsibleContext");
+function useCollapsibleContext(componentName) {
+  const ctx = useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error(`<Collapsible.${componentName}> must be used inside <Collapsible>. ` + "Ensure it is a direct or nested child of the Collapsible root component.");
+  }
+  return ctx;
+}
+function CollapsibleTrigger({ children, className: cls, class: classProp }) {
+  const ctx = useCollapsibleContext("Trigger");
+  return jsxDEV_7x81h0kn("button", {
+    ref: ctx.triggerRef,
+    type: "button",
+    id: ctx.ids.triggerId,
+    "aria-controls": ctx.ids.contentId,
+    "aria-expanded": ctx.defaultOpen ? "true" : "false",
+    "data-state": ctx.defaultOpen ? "open" : "closed",
+    disabled: ctx.disabled,
+    "aria-disabled": ctx.disabled ? "true" : undefined,
+    class: cn(ctx.classes?.trigger, cls ?? classProp),
+    onClick: ctx.toggle,
+    children
+  }, undefined, false, undefined, this);
+}
+function CollapsibleContent({ children, className: cls, class: classProp }) {
+  const ctx = useCollapsibleContext("Content");
+  return jsxDEV_7x81h0kn("div", {
+    ref: ctx.contentRef,
+    id: ctx.ids.contentId,
+    "data-part": "collapsible-content",
+    "aria-hidden": ctx.defaultOpen ? "false" : "true",
+    "data-state": ctx.defaultOpen ? "open" : "closed",
+    style: { display: ctx.defaultOpen ? "" : "none" },
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedCollapsibleRoot({
+  children,
+  classes,
+  defaultOpen = false,
+  disabled = false,
+  onOpenChange
+}) {
+  const ids = linkedIds("collapsible");
+  const triggerRef = ref();
+  const contentRef = ref();
+  let isOpen = defaultOpen;
+  function toggle() {
+    if (disabled)
+      return;
+    const contentEl = contentRef.current;
+    const triggerEl = triggerRef.current;
+    if (!contentEl || !triggerEl)
+      return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      setHidden(contentEl, false);
+    }
+    const height = contentEl.scrollHeight;
+    contentEl.style.setProperty("--collapsible-content-height", `${height}px`);
+    setExpanded(triggerEl, isOpen);
+    setDataState(triggerEl, isOpen ? "open" : "closed");
+    setDataState(contentEl, isOpen ? "open" : "closed");
+    if (!isOpen) {
+      setHiddenAnimated(contentEl, true);
+    }
+    onOpenChange?.(isOpen);
+  }
+  const ctx = {
+    ids,
+    triggerRef,
+    contentRef,
+    classes,
+    disabled,
+    defaultOpen,
+    toggle
+  };
+  return jsxDEV_7x81h0kn("div", {
+    "data-part": "collapsible",
+    class: cn(classes?.root),
+    children: jsxDEV_7x81h0kn(CollapsibleContext.Provider, {
+      value: ctx,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedCollapsible = Object.assign(ComposedCollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
+
+export { ComposedCollapsible };

package/dist/shared/{chunk-yy3ft5mb.js → chunk-7amn5d71.js}

@@ -1,9 +1,9 @@
 import {
   Popover
-} from "./chunk-bv12nkdm.js";
+} from "./chunk-a71m4xkv.js";
 import {
   Calendar
-} from "./chunk-b4zzg457.js";
+} from "./chunk-whq9s8v5.js";
 
 // src/date-picker/date-picker.ts
 import { signal } from "@vertz/ui";

package/dist/shared/chunk-7pbff2hg.js

@@ -0,0 +1,118 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  handleListNavigation
+} from "./chunk-7867pr13.js";
+
+// src/tabs/tabs-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var TabsContext = createContext(undefined, "@vertz/ui-primitives::TabsContext");
+function useTabsContext(componentName) {
+  const ctx = useContext(TabsContext);
+  if (!ctx) {
+    throw new Error(`<Tabs.${componentName}> must be used inside <Tabs>. ` + "Ensure it is a direct or nested child of the Tabs root component.");
+  }
+  return ctx;
+}
+function TabsList({ children, className: cls, class: classProp }) {
+  const ctx = useTabsContext("List");
+  return jsxDEV_7x81h0kn("div", {
+    role: "tablist",
+    "data-tabs-list": "",
+    "aria-orientation": ctx.orientation === "vertical" ? "vertical" : undefined,
+    class: cn(ctx.classes?.list, cls ?? classProp),
+    onKeydown: (event) => {
+      const list = event.currentTarget;
+      const triggers = [...list.querySelectorAll('[role="tab"]')];
+      const result = handleListNavigation(event, triggers, { orientation: ctx.orientation });
+      if (result) {
+        const value = result.getAttribute("data-value");
+        if (value)
+          ctx.select(value);
+      }
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function TabsTrigger({ value, children, className: cls, class: classProp }) {
+  const ctx = useTabsContext("Trigger");
+  const isActive = ctx.activeValue === value;
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    role: "tab",
+    id: ctx.getTriggerIdFor(value),
+    "data-tabs-trigger": "",
+    "data-value": value,
+    "aria-controls": ctx.getPanelIdFor(value),
+    "aria-selected": isActive ? "true" : "false",
+    "data-state": isActive ? "active" : "inactive",
+    tabindex: isActive ? "0" : "-1",
+    class: cn(ctx.classes?.trigger, cls ?? classProp),
+    onClick: () => ctx.select(value),
+    children
+  }, undefined, false, undefined, this);
+}
+function TabsContent({ value, children, className: cls, class: classProp }) {
+  const ctx = useTabsContext("Content");
+  const isActive = ctx.activeValue === value;
+  return jsxDEV_7x81h0kn("div", {
+    role: "tabpanel",
+    id: ctx.getPanelIdFor(value),
+    "data-tabs-panel": "",
+    "data-value": value,
+    "aria-labelledby": ctx.getTriggerIdFor(value),
+    tabindex: "0",
+    "aria-hidden": isActive ? "false" : "true",
+    "data-state": isActive ? "active" : "inactive",
+    style: { display: isActive ? "" : "none" },
+    class: cn(ctx.classes?.panel, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedTabsRoot({
+  children,
+  classes,
+  defaultValue = "",
+  onValueChange,
+  orientation = "horizontal"
+}) {
+  const baseId = uniqueId("tabs");
+  let activeValue = defaultValue;
+  function select(value) {
+    activeValue = value;
+    onValueChange?.(value);
+  }
+  function getTriggerIdFor(value) {
+    return `${baseId}-trigger-${value}`;
+  }
+  function getPanelIdFor(value) {
+    return `${baseId}-panel-${value}`;
+  }
+  const ctx = {
+    activeValue,
+    classes,
+    orientation,
+    select,
+    getTriggerIdFor,
+    getPanelIdFor
+  };
+  return jsxDEV_7x81h0kn(TabsContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("div", {
+      "data-tabs-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedTabs = Object.assign(ComposedTabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent
+});
+
+export { ComposedTabs };

package/dist/shared/chunk-7zpjshwz.js

@@ -0,0 +1,194 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/alert-dialog/alert-dialog-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var AlertDialogContext = createContext(undefined, "@vertz/ui-primitives::AlertDialogContext");
+function useAlertDialogContext(componentName) {
+  const ctx = useContext(AlertDialogContext);
+  if (!ctx) {
+    throw new Error(`<AlertDialog.${componentName}> must be used inside <AlertDialog>. ` + "Ensure it is a direct or nested child of the AlertDialog root component.");
+  }
+  return ctx;
+}
+function AlertDialogTrigger({ children }) {
+  const ctx = useAlertDialogContext("Trigger");
+  return jsxDEV_7x81h0kn("span", {
+    style: { display: "contents" },
+    "data-alertdialog-trigger": "",
+    "data-state": "closed",
+    onClick: () => {
+      if (!ctx.isOpen)
+        ctx.open();
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function AlertDialogContent({ children, className: cls, class: classProp }) {
+  const ctx = useAlertDialogContext("Content");
+  return jsxDEV_7x81h0kn("dialog", {
+    ref: ctx.dialogRef,
+    id: ctx.contentId,
+    role: "alertdialog",
+    "aria-labelledby": ctx.titleId,
+    "aria-describedby": ctx.descriptionId,
+    "data-state": "closed",
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    onCancel: (e) => {
+      e.preventDefault();
+    },
+    children
+  }, undefined, false, undefined, this);
+}
+function AlertDialogTitle({ children, className: cls, class: classProp }) {
+  const ctx = useAlertDialogContext("Title");
+  return jsxDEV_7x81h0kn("h2", {
+    id: ctx.titleId,
+    "data-slot": "alertdialog-title",
+    class: cn(ctx.classes?.title, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function AlertDialogDescription({ children, className: cls, class: classProp }) {
+  const ctx = useAlertDialogContext("Description");
+  return jsxDEV_7x81h0kn("p", {
+    id: ctx.descriptionId,
+    "data-slot": "alertdialog-description",
+    class: cn(ctx.classes?.description, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function AlertDialogHeader({ children, className: cls, class: classProp }) {
+  const { classes } = useAlertDialogContext("Header");
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(classes?.header, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function AlertDialogFooter({ children, className: cls, class: classProp }) {
+  const { classes } = useAlertDialogContext("Footer");
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(classes?.footer, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function AlertDialogCancel({
+  children,
+  className: cls,
+  class: classProp,
+  onClick,
+  disabled
+}) {
+  const ctx = useAlertDialogContext("Cancel");
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "data-slot": "alertdialog-cancel",
+    class: cn(ctx.classes?.cancel, cls ?? classProp),
+    onClick: () => {
+      onClick?.();
+      ctx.close();
+    },
+    disabled,
+    children
+  }, undefined, false, undefined, this);
+}
+function AlertDialogAction({
+  children,
+  className: cls,
+  class: classProp,
+  onClick,
+  disabled
+}) {
+  const ctx = useAlertDialogContext("Action");
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "data-slot": "alertdialog-action",
+    class: cn(ctx.classes?.action, cls ?? classProp),
+    onClick: () => {
+      onClick?.();
+      ctx.onAction?.();
+      ctx.close();
+    },
+    disabled,
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedAlertDialogRoot({
+  children,
+  classes,
+  onOpenChange,
+  onAction
+}) {
+  const ids = linkedIds("alertdialog");
+  const titleId = `${ids.contentId}-title`;
+  const descriptionId = `${ids.contentId}-description`;
+  const dialogRef = ref();
+  let isOpen = false;
+  function showDialog() {
+    const el = dialogRef.current;
+    if (!el || el.open)
+      return;
+    el.setAttribute("data-state", "open");
+    el.showModal();
+  }
+  function hideDialog() {
+    const el = dialogRef.current;
+    if (!el || !el.open)
+      return;
+    el.setAttribute("data-state", "closed");
+    el.offsetHeight;
+    const onEnd = () => {
+      el.removeEventListener("animationend", onEnd);
+      if (el.open)
+        el.close();
+    };
+    el.addEventListener("animationend", onEnd);
+    setTimeout(onEnd, 200);
+  }
+  function open() {
+    isOpen = true;
+    showDialog();
+    onOpenChange?.(true);
+  }
+  function close() {
+    hideDialog();
+    isOpen = false;
+    onOpenChange?.(false);
+  }
+  const ctx = {
+    isOpen,
+    titleId,
+    descriptionId,
+    contentId: ids.contentId,
+    dialogRef,
+    classes,
+    onAction,
+    open,
+    close
+  };
+  return jsxDEV_7x81h0kn(AlertDialogContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-alertdialog-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedAlertDialog = Object.assign(ComposedAlertDialogRoot, {
+  Trigger: AlertDialogTrigger,
+  Content: AlertDialogContent,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  Header: AlertDialogHeader,
+  Footer: AlertDialogFooter,
+  Cancel: AlertDialogCancel,
+  Action: AlertDialogAction
+});
+
+export { ComposedAlertDialog };