@vertz/ui-primitives 0.2.41 → 0.2.42

package/dist/shared/chunk-s6b4c3tj.js

@@ -0,0 +1,58 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+
+// src/empty-state/empty-state-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, useContext } from "@vertz/ui";
+var EmptyStateContext = createContext(undefined, "@vertz/ui-primitives::EmptyStateContext");
+function EmptyStateIcon({ children, className, class: classProp }) {
+  const ctx = useContext(EmptyStateContext);
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(ctx?.classes?.icon, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function EmptyStateTitle({ children, className, class: classProp }) {
+  const ctx = useContext(EmptyStateContext);
+  return jsxDEV_7x81h0kn("h3", {
+    class: cn(ctx?.classes?.title, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function EmptyStateDescription({ children, className, class: classProp }) {
+  const ctx = useContext(EmptyStateContext);
+  return jsxDEV_7x81h0kn("p", {
+    class: cn(ctx?.classes?.description, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function EmptyStateAction({ children, className, class: classProp }) {
+  const ctx = useContext(EmptyStateContext);
+  return jsxDEV_7x81h0kn("div", {
+    class: cn(ctx?.classes?.action, className ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function ComposedEmptyStateRoot({
+  children,
+  classes,
+  className,
+  class: classProp
+}) {
+  return jsxDEV_7x81h0kn(EmptyStateContext.Provider, {
+    value: { classes },
+    children: jsxDEV_7x81h0kn("div", {
+      class: cn(classes?.root, className ?? classProp),
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedEmptyState = Object.assign(ComposedEmptyStateRoot, {
+  Icon: EmptyStateIcon,
+  Title: EmptyStateTitle,
+  Description: EmptyStateDescription,
+  Action: EmptyStateAction
+});
+
+export { ComposedEmptyState };

package/dist/shared/chunk-sq27a4h0.js

@@ -0,0 +1,36 @@
+import {
+  handleActivation
+} from "./chunk-7867pr13.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/button/button.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function ButtonRoot(options = {}) {
+  const { disabled = false, onClick, ...attrs } = options;
+  const el = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    disabled,
+    "aria-disabled": disabled ? "true" : undefined,
+    onClick: () => {
+      if (disabled)
+        return;
+      onClick?.();
+    },
+    onKeydown: (event) => {
+      if (disabled)
+        return;
+      handleActivation(event, () => {
+        event.target.click();
+      });
+    }
+  }, undefined, false, undefined, this);
+  applyAttrs(el, attrs);
+  return el;
+}
+var Button = {
+  Root: ButtonRoot
+};
+
+export { Button };

package/dist/shared/chunk-taa5pj15.js

@@ -0,0 +1,103 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+
+// src/checkbox/checkbox-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+function dataStateFor(checked) {
+  if (checked === "mixed")
+    return "indeterminate";
+  return checked ? "checked" : "unchecked";
+}
+function ariaCheckedFor(checked) {
+  if (checked === "mixed")
+    return "mixed";
+  return String(checked);
+}
+function ComposedCheckboxRoot({
+  children,
+  classes,
+  defaultChecked = false,
+  disabled = false,
+  onCheckedChange
+}) {
+  let checked = defaultChecked;
+  function toggle() {
+    if (disabled)
+      return;
+    checked = checked === "mixed" ? true : !checked;
+    onCheckedChange?.(checked);
+  }
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    role: "checkbox",
+    id: uniqueId("checkbox"),
+    "aria-checked": ariaCheckedFor(checked),
+    "data-state": dataStateFor(checked),
+    disabled,
+    "aria-disabled": disabled ? "true" : undefined,
+    class: cn(classes?.root),
+    onClick: toggle,
+    onKeydown: (e) => {
+      if (isKey(e, Keys.Space)) {
+        e.preventDefault();
+        toggle();
+      }
+    },
+    children: [
+      jsxDEV_7x81h0kn("span", {
+        "data-part": "indicator",
+        "data-state": dataStateFor(checked),
+        class: cn(classes?.indicator),
+        style: { width: "100%", height: "100%", pointerEvents: "none" },
+        children: [
+          jsxDEV_7x81h0kn("svg", {
+            "aria-hidden": "true",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "3",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "data-part": "indicator-icon",
+            "data-icon": "check",
+            width: "100%",
+            height: "100%",
+            children: jsxDEV_7x81h0kn("path", {
+              d: "M4 12 9 17 20 6"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          jsxDEV_7x81h0kn("svg", {
+            "aria-hidden": "true",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "3",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "data-part": "indicator-icon",
+            "data-icon": "minus",
+            width: "100%",
+            height: "100%",
+            children: jsxDEV_7x81h0kn("path", {
+              d: "M5 12h14"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+var ComposedCheckbox = ComposedCheckboxRoot;
+
+export { ComposedCheckbox };

package/dist/shared/chunk-tc5rpvyx.js

@@ -0,0 +1,127 @@
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  Keys,
+  handleListNavigation,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/accordion/accordion.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function AccordionRoot(options = {}) {
+  const { multiple = false, defaultValue = [], onValueChange, ...attrs } = options;
+  const state = { value: signal([...defaultValue]) };
+  const triggers = [];
+  const itemMap = new Map;
+  function updateItemState(val, open) {
+    const entry = itemMap.get(val);
+    if (!entry)
+      return;
+    const { trigger: t, content: c } = entry;
+    c.removeAttribute("data-initial");
+    if (open) {
+      setHidden(c, false);
+    }
+    const height = c.scrollHeight;
+    c.style.setProperty("--accordion-content-height", `${height}px`);
+    setExpanded(t, open);
+    setDataState(t, open ? "open" : "closed");
+    setDataState(c, open ? "open" : "closed");
+    if (!open) {
+      setHiddenAnimated(c, true);
+    }
+  }
+  function toggleItem(value) {
+    const prev = [...state.value.peek()];
+    const current = [...prev];
+    const idx = current.indexOf(value);
+    if (idx >= 0) {
+      current.splice(idx, 1);
+    } else {
+      if (multiple) {
+        current.push(value);
+      } else {
+        current.length = 0;
+        current.push(value);
+      }
+    }
+    state.value.value = current;
+    onValueChange?.(current);
+    for (const v of prev) {
+      if (!current.includes(v)) {
+        updateItemState(v, false);
+      }
+    }
+    for (const v of current) {
+      if (!prev.includes(v)) {
+        updateItemState(v, true);
+      }
+    }
+  }
+  const root = jsxDEV_7x81h0kn("div", {
+    "data-orientation": "vertical",
+    onKeydown: (event) => {
+      if (isKey(event, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
+        handleListNavigation(event, triggers, { orientation: "vertical" });
+      }
+    }
+  }, undefined, false, undefined, this);
+  function Item(value) {
+    const baseId = uniqueId("accordion");
+    const triggerId = `${baseId}-trigger`;
+    const contentId = `${baseId}-content`;
+    const isOpen = state.value.peek().includes(value);
+    const trigger = jsxDEV_7x81h0kn("button", {
+      type: "button",
+      id: triggerId,
+      "aria-controls": contentId,
+      "data-value": value,
+      "aria-expanded": isOpen ? "true" : "false",
+      "data-state": isOpen ? "open" : "closed",
+      onClick: () => toggleItem(value)
+    }, undefined, false, undefined, this);
+    const content = jsxDEV_7x81h0kn("div", {
+      role: "region",
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "aria-hidden": isOpen ? "false" : "true",
+      "data-state": isOpen ? "open" : "closed",
+      "data-initial": isOpen ? "" : undefined,
+      style: { display: isOpen ? "" : "none" }
+    }, undefined, false, undefined, this);
+    const item = jsxDEV_7x81h0kn("div", {
+      "data-value": value,
+      children: [
+        trigger,
+        content
+      ]
+    }, undefined, true, undefined, this);
+    itemMap.set(value, { trigger, content });
+    triggers.push(trigger);
+    if (isOpen) {
+      requestAnimationFrame(() => {
+        const height = content.scrollHeight;
+        content.style.setProperty("--accordion-content-height", `${height}px`);
+      });
+    }
+    return { item, trigger, content };
+  }
+  applyAttrs(root, attrs);
+  return { root, state, Item };
+}
+var Accordion = {
+  Root: AccordionRoot
+};
+
+export { Accordion };

package/dist/shared/chunk-tescm0b3.js

@@ -0,0 +1,192 @@
+import {
+  cn
+} from "./chunk-q7xbcj9q.js";
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+
+// src/sheet/sheet-composed.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { createContext, ref, useContext } from "@vertz/ui";
+var SheetContext = createContext(undefined, "@vertz/ui-primitives::SheetContext");
+function useSheetContext(componentName) {
+  const ctx = useContext(SheetContext);
+  if (!ctx) {
+    throw new Error(`<Sheet.${componentName}> must be used inside <Sheet>. ` + "Ensure it is a direct or nested child of the Sheet root component.");
+  }
+  return ctx;
+}
+function SheetTrigger({ children }) {
+  const ctx = useSheetContext("Trigger");
+  return jsxDEV_7x81h0kn("span", {
+    style: { display: "contents" },
+    "data-sheet-trigger": "",
+    "data-state": "closed",
+    onClick: () => ctx.toggle(),
+    children
+  }, undefined, false, undefined, this);
+}
+function SheetContent({
+  children,
+  className: cls,
+  class: classProp,
+  showClose = true
+}) {
+  const ctx = useSheetContext("Content");
+  const el = jsxDEV_7x81h0kn("dialog", {
+    ref: ctx.dialogRef,
+    id: ctx.contentId,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": ctx.titleId,
+    "aria-describedby": ctx.descriptionId,
+    "data-side": ctx.side,
+    "data-state": "closed",
+    class: cn(ctx.classes?.content, cls ?? classProp),
+    onCancel: (e) => {
+      e.preventDefault();
+      ctx.close();
+    },
+    onClick: (e) => {
+      if (e.target === ctx.dialogRef.current)
+        ctx.close();
+    },
+    children: [
+      showClose && jsxDEV_7x81h0kn("button", {
+        type: "button",
+        "data-slot": "sheet-close",
+        class: cn(ctx.classes?.close),
+        "aria-label": "Close",
+        onClick: () => ctx.close(),
+        children: jsxDEV_7x81h0kn("svg", {
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          children: [
+            jsxDEV_7x81h0kn("path", {
+              d: "M18 6 6 18"
+            }, undefined, false, undefined, this),
+            jsxDEV_7x81h0kn("path", {
+              d: "m6 6 12 12"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+  return el;
+}
+function SheetTitle({ children, className: cls, class: classProp }) {
+  const ctx = useSheetContext("Title");
+  return jsxDEV_7x81h0kn("h2", {
+    id: ctx.titleId,
+    class: cn(ctx.classes?.title, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function SheetDescription({ children, className: cls, class: classProp }) {
+  const ctx = useSheetContext("Description");
+  return jsxDEV_7x81h0kn("p", {
+    id: ctx.descriptionId,
+    class: cn(ctx.classes?.description, cls ?? classProp),
+    children
+  }, undefined, false, undefined, this);
+}
+function SheetClose({ children, className: cls, class: classProp }) {
+  const ctx = useSheetContext("Close");
+  return jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "data-slot": "sheet-close",
+    class: cn(ctx.classes?.close, cls ?? classProp),
+    "aria-label": children ? undefined : "Close",
+    onClick: () => ctx.close(),
+    children: children ?? "×"
+  }, undefined, false, undefined, this);
+}
+function ComposedSheetRoot({
+  children,
+  classes,
+  side = "right",
+  onOpenChange
+}) {
+  const ids = linkedIds("sheet");
+  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, 350);
+  }
+  function open() {
+    isOpen = true;
+    showDialog();
+    onOpenChange?.(true);
+  }
+  function close() {
+    hideDialog();
+    isOpen = false;
+    onOpenChange?.(false);
+  }
+  function toggle() {
+    if (isOpen)
+      close();
+    else
+      open();
+  }
+  const ctx = {
+    isOpen,
+    titleId,
+    descriptionId,
+    contentId: ids.contentId,
+    dialogRef,
+    side,
+    classes,
+    open,
+    close,
+    toggle
+  };
+  return jsxDEV_7x81h0kn(SheetContext.Provider, {
+    value: ctx,
+    children: jsxDEV_7x81h0kn("span", {
+      style: { display: "contents" },
+      "data-sheet-root": "",
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var ComposedSheet = Object.assign(ComposedSheetRoot, {
+  Trigger: SheetTrigger,
+  Content: SheetContent,
+  Title: SheetTitle,
+  Description: SheetDescription,
+  Close: SheetClose
+});
+
+export { ComposedSheet };

package/dist/shared/chunk-tkftdwnq.js

@@ -0,0 +1,71 @@
+import {
+  linkedIds
+} from "./chunk-8y1jf6xr.js";
+import {
+  setDataState,
+  setExpanded,
+  setHidden,
+  setHiddenAnimated
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/collapsible/collapsible.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function CollapsibleRoot(options = {}) {
+  const { defaultOpen = false, disabled = false, onOpenChange, ...attrs } = options;
+  const ids = linkedIds("collapsible");
+  const state = {
+    open: signal(defaultOpen),
+    disabled: signal(disabled)
+  };
+  function toggle() {
+    if (state.disabled.peek())
+      return;
+    const next = !state.open.peek();
+    state.open.value = next;
+    if (next) {
+      setHidden(content, false);
+    }
+    const height = content.scrollHeight;
+    content.style.setProperty("--collapsible-content-height", `${height}px`);
+    setExpanded(trigger, next);
+    setDataState(trigger, next ? "open" : "closed");
+    setDataState(content, next ? "open" : "closed");
+    if (!next) {
+      setHiddenAnimated(content, true);
+    }
+    onOpenChange?.(next);
+  }
+  const trigger = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    id: ids.triggerId,
+    "aria-controls": ids.contentId,
+    "aria-expanded": defaultOpen ? "true" : "false",
+    "data-state": defaultOpen ? "open" : "closed",
+    disabled,
+    "aria-disabled": disabled ? "true" : undefined,
+    onClick: toggle
+  }, undefined, false, undefined, this);
+  const content = jsxDEV_7x81h0kn("div", {
+    id: ids.contentId,
+    "aria-hidden": defaultOpen ? "false" : "true",
+    "data-state": defaultOpen ? "open" : "closed",
+    style: { display: defaultOpen ? "" : "none" }
+  }, undefined, false, undefined, this);
+  const root = jsxDEV_7x81h0kn("div", {
+    children: [
+      trigger,
+      content
+    ]
+  }, undefined, true, undefined, this);
+  applyAttrs(root, attrs);
+  return { root, trigger, content, state };
+}
+var Collapsible = {
+  Root: CollapsibleRoot
+};
+
+export { Collapsible };

package/dist/shared/chunk-tqhnjcfp.js

@@ -0,0 +1,116 @@
+import {
+  Keys,
+  isKey
+} from "./chunk-7867pr13.js";
+import {
+  setDataState
+} from "./chunk-vevfhpc9.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/carousel/carousel.tsx
+import { jsxDEV as jsxDEV_7x81h0kn } from "@vertz/ui/jsx-dev-runtime";
+import { signal } from "@vertz/ui";
+function CarouselRoot(options = {}) {
+  const {
+    orientation = "horizontal",
+    loop = false,
+    defaultIndex = 0,
+    onSlideChange,
+    ...attrs
+  } = options;
+  const state = {
+    currentIndex: signal(defaultIndex),
+    slideCount: signal(0)
+  };
+  const slides = [];
+  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);
+  }
+  const viewport = jsxDEV_7x81h0kn("div", {
+    style: { overflow: "hidden" }
+  }, undefined, false, undefined, this);
+  const prevButton = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "aria-label": "Previous slide",
+    onClick: goPrev
+  }, undefined, false, undefined, this);
+  const nextButton = jsxDEV_7x81h0kn("button", {
+    type: "button",
+    "aria-label": "Next slide",
+    onClick: goNext
+  }, undefined, false, undefined, this);
+  const root = jsxDEV_7x81h0kn("div", {
+    role: "region",
+    "aria-roledescription": "carousel",
+    "data-orientation": orientation,
+    onKeydown: (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();
+      }
+    },
+    children: viewport
+  }, undefined, false, undefined, this);
+  function Slide() {
+    const slide = jsxDEV_7x81h0kn("div", {
+      role: "group",
+      "aria-roledescription": "slide"
+    }, undefined, false, undefined, this);
+    slides.push(slide);
+    state.slideCount.value = slides.length;
+    updateSlideVisibility();
+    return slide;
+  }
+  updateSlideVisibility();
+  applyAttrs(root, attrs);
+  return { root, viewport, prevButton, nextButton, state, Slide, goTo, goNext, goPrev };
+}
+var Carousel = {
+  Root: CarouselRoot
+};
+
+export { Carousel };