sinwan-ui-core 0.0.0 → 1.1.0

package/dist/chunks/chunk-8zvv4kad.js

@@ -0,0 +1,116 @@
+import {
+  useAnchorPosition2
+} from "./chunk-6r59k5mb.js";
+import {
+  Presence2,
+  UiPortal2
+} from "./chunk-ejwby1pn.js";
+
+// src/menu-sub.tsx
+import { unwrap as _$unwrap } from "sinwan/reactivity";
+import { cc } from "sinwan/component";
+import { onUnmounted } from "sinwan/component";
+import {
+  computed,
+  effect,
+  signal,
+  untrack
+} from "sinwan/reactivity";
+import { jsx } from "sinwan/jsx-runtime";
+function createMenuSubApi2(options) {
+  const openLocal = signal(options.defaultOpen ?? false);
+  const open = options.controlled ? computed(options.readOpen) : openLocal;
+  const set = (next) => {
+    if (!options.controlled)
+      openLocal.value = next;
+  };
+  const triggerEl = signal(null);
+  let closeTimer;
+  function cancelClose() {
+    if (closeTimer !== undefined) {
+      window.clearTimeout(closeTimer);
+      closeTimer = undefined;
+    }
+  }
+  function setOpen(value) {
+    cancelClose();
+    set(value);
+    options.onOpenChange?.(value);
+  }
+  function requestClose(delayMs = 100) {
+    cancelClose();
+    closeTimer = window.setTimeout(() => {
+      closeTimer = undefined;
+      setOpen(false);
+    }, delayMs);
+  }
+  const parentOpen = options.parentOpen;
+  if (parentOpen) {
+    effect(() => {
+      if (parentOpen())
+        return;
+      untrack(() => {
+        if (open.value)
+          setOpen(false);
+      });
+    });
+  }
+  onUnmounted(cancelClose);
+  return { open, setOpen, triggerEl, cancelClose, requestClose };
+}
+function createMenuSubTriggerHandlers2(api) {
+  function openSub() {
+    api.cancelClose();
+    if (!api.open.value)
+      api.setOpen(true);
+  }
+  return {
+    onMouseEnter: openSub,
+    onMouseLeave: () => api.requestClose(),
+    onClick: openSub,
+    onKeyDown: (event) => {
+      if (event.key !== "ArrowRight")
+        return;
+      event.preventDefault();
+      openSub();
+    }
+  };
+}
+function isInsideMenuSubContent2(target) {
+  return target instanceof Element && target.closest("[data-slot$='-sub-content']") != null;
+}
+var MenuSubContentLayer2 = cc(function MenuSubContentLayer(props) {
+  const contentEl = signal(null);
+  const { style, side } = useAnchorPosition2({
+    open: props.api.open,
+    trigger: props.api.triggerEl,
+    content: contentEl,
+    placement: "right",
+    align: "start",
+    gap: 4,
+    fallbackSize: { width: 128, height: 120 }
+  });
+  function subState() {
+    return props.api.open.value ? "open" : "closed";
+  }
+  return /* @__PURE__ */ jsx(Presence2, {
+    present: () => _$unwrap(props).api.open.value,
+    children: /* @__PURE__ */ jsx(UiPortal2, {
+      children: /* @__PURE__ */ jsx("div", {
+        "data-slot": () => _$unwrap(props).slot,
+        "data-state": subState,
+        "data-side": () => side.value,
+        class: () => _$unwrap(props).class,
+        style: () => style.value,
+        onmouseenter: () => props.api.cancelClose(),
+        onmouseleave: () => props.api.requestClose(),
+        ref: (el) => {
+          contentEl.value = el;
+        },
+        children: () => _$unwrap(props).children
+      })
+    })
+  });
+});
+
+export { createMenuSubApi2, createMenuSubTriggerHandlers2, isInsideMenuSubContent2, MenuSubContentLayer2 };

package/dist/chunks/chunk-94xhejch.js

@@ -0,0 +1,511 @@
+import {
+  Slot2
+} from "./chunk-bw9vp0y9.js";
+import {
+  useAnchorPosition2
+} from "./chunk-6r59k5mb.js";
+import {
+  Presence2,
+  UiPortal2,
+  trapFocus2
+} from "./chunk-ejwby1pn.js";
+import {
+  isDismissExemptPointerTarget2
+} from "./chunk-9whagkb6.js";
+
+// src/overlay.tsx
+import { _$createTemplate } from "sinwan/renderer/web";
+import { unwrap as _$unwrap } from "sinwan/reactivity";
+import {
+  cc,
+  inject,
+  onMounted,
+  onUnmounted,
+  provide,
+  createLiveRest as _$createLiveRest,
+  getSpreadProps as _$getSpreadProps
+} from "sinwan/component";
+import { computed, signal } from "sinwan/reactivity";
+import { jsx, Fragment } from "sinwan/jsx-runtime";
+var _$tmpl_0 = {
+  html: '<button type="button" data-slot="dialog-trigger"></button>',
+  slots: [
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "ref", name: "ref" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_1 = {
+  html: '<button type="button" data-slot="dialog-close"></button>',
+  slots: [
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_2 = {
+  html: '<div data-slot="collapsible" data-state=""></div>',
+  slots: [
+    { path: [], type: "attr", name: "data-state" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_3 = {
+  html: '<button type="button" data-slot="collapsible-trigger" aria-expanded=""></button>',
+  slots: [
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "attr", name: "aria-expanded" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_4 = {
+  html: '<button type="button" data-slot="popover-trigger" aria-expanded=""></button>',
+  slots: [
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "attr", name: "aria-expanded" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "ref", name: "ref" },
+    { path: [], type: "child" }
+  ]
+};
+var REOPEN_LOCK_MS = 280;
+function createOpenState(props) {
+  const openLocal = signal(props.defaultOpen ?? false);
+  const open = "open" in props ? computed(() => Boolean(props.open)) : openLocal;
+  const set = (next) => {
+    if (!("open" in props))
+      openLocal.value = next;
+  };
+  let closeTimer;
+  let pointerOverTrigger = false;
+  let hoverOpenBlocked = false;
+  let reopenLockUntil = 0;
+  function cancelClose() {
+    if (closeTimer !== undefined) {
+      window.clearTimeout(closeTimer);
+      closeTimer = undefined;
+    }
+  }
+  function setOpen(value) {
+    cancelClose();
+    if (value) {
+      if (Date.now() < reopenLockUntil)
+        return;
+    } else {
+      if (pointerOverTrigger)
+        hoverOpenBlocked = true;
+      reopenLockUntil = Date.now() + REOPEN_LOCK_MS;
+    }
+    set(value);
+    props.onOpenChange?.(value);
+  }
+  function requestClose(delayMs = 0) {
+    cancelClose();
+    closeTimer = window.setTimeout(() => {
+      closeTimer = undefined;
+      setOpen(false);
+    }, delayMs);
+  }
+  function isHoverOpenBlocked() {
+    return hoverOpenBlocked;
+  }
+  function setPointerOverTrigger(over) {
+    pointerOverTrigger = over;
+    if (!over)
+      hoverOpenBlocked = false;
+  }
+  onUnmounted(cancelClose);
+  return {
+    open,
+    setOpen,
+    triggerEl: signal(null),
+    requestClose,
+    cancelClose,
+    isHoverOpenBlocked,
+    setPointerOverTrigger
+  };
+}
+var DialogKey2 = Symbol("sinwan-ui.dialog");
+var DialogRoot2 = cc((props) => {
+  const api = createOpenState(props);
+  provide(DialogKey2, api);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: () => _$unwrap(props).children
+  });
+});
+var DialogTrigger2 = cc((props) => {
+  const api = inject(DialogKey2);
+  const onClick = () => {
+    api.setOpen(true);
+  };
+  const ref = (el) => {
+    api.triggerEl.value = el;
+  };
+  if (props.asChild) {
+    return /* @__PURE__ */ jsx(Slot2, {
+      class: () => _$unwrap(props).class,
+      onclick: onClick,
+      ref,
+      children: () => _$unwrap(props).children
+    });
+  }
+  return _$createTemplate(_$tmpl_0, [
+    () => _$unwrap(props).class,
+    onClick,
+    ref,
+    () => _$unwrap(props).children
+  ]);
+});
+var DialogClose2 = cc((props) => {
+  const api = inject(DialogKey2);
+  const onClick = () => {
+    api.setOpen(false);
+  };
+  if (props.asChild) {
+    return /* @__PURE__ */ jsx(Slot2, {
+      class: () => _$unwrap(props).class,
+      onclick: onClick,
+      children: () => _$unwrap(props).children
+    });
+  }
+  return _$createTemplate(_$tmpl_1, [
+    () => _$unwrap(props).class,
+    onClick,
+    () => _$unwrap(props).children
+  ]);
+});
+var DialogOverlay2 = cc((props) => {
+  const api = inject(DialogKey2);
+  function dismiss() {
+    api.setOpen(false);
+  }
+  function overlayState() {
+    return api.open.value ? "open" : "closed";
+  }
+  return /* @__PURE__ */ jsx(Presence2, {
+    present: () => api.open.value,
+    children: /* @__PURE__ */ jsx(UiPortal2, {
+      children: /* @__PURE__ */ jsx("div", {
+        "data-slot": "dialog-overlay",
+        "data-state": overlayState,
+        class: () => _$unwrap(props).class,
+        onclick: dismiss
+      })
+    })
+  });
+});
+var DialogContent2 = cc((props) => {
+  const dataAttrs = _$createLiveRest(props, [
+    "children",
+    "class",
+    "onEscapeKeyDown",
+    "data-side",
+    "data-size",
+    "data-vaul-drawer-direction",
+    "data-slot"
+  ]);
+  const api = inject(DialogKey2);
+  let contentEl = null;
+  let previousFocus = null;
+  onMounted(() => {
+    function onKey(e) {
+      if (!api.open.value)
+        return;
+      if (e.key === "Escape") {
+        props.onEscapeKeyDown?.(e);
+        if (!e.defaultPrevented)
+          api.setOpen(false);
+      }
+      if (contentEl)
+        trapFocus2(e, contentEl);
+    }
+    function cleanup() {
+      document.removeEventListener("keydown", onKey);
+    }
+    document.addEventListener("keydown", onKey);
+    onUnmounted(cleanup);
+  });
+  function contentState() {
+    return api.open.value ? "open" : "closed";
+  }
+  return /* @__PURE__ */ jsx(Presence2, {
+    present: () => api.open.value,
+    children: /* @__PURE__ */ jsx(UiPortal2, {
+      children: /* @__PURE__ */ jsx("div", {
+        ..._$getSpreadProps(dataAttrs),
+        role: "dialog",
+        "aria-modal": "true",
+        "data-slot": () => props["data-slot"] === undefined ? "dialog-content" : props["data-slot"],
+        "data-state": contentState,
+        "data-side": () => props["data-side"],
+        "data-size": () => props["data-size"],
+        "data-vaul-drawer-direction": () => props["data-vaul-drawer-direction"],
+        class: () => _$unwrap(props).class,
+        ref: function contentRef(el) {
+          contentEl = el;
+          if (el) {
+            previousFocus = document.activeElement;
+            el.focus?.();
+          } else if (previousFocus) {
+            previousFocus.focus?.();
+          }
+        },
+        tabIndex: -1,
+        onclick: function stopBubble(e) {
+          e.stopPropagation();
+        },
+        children: () => _$unwrap(props).children
+      })
+    })
+  });
+});
+var CollapsibleKey2 = Symbol("sinwan-ui.collapsible");
+var CollapsibleRoot2 = cc((props) => {
+  const openLocal = signal(props.defaultOpen ?? false);
+  const open = "open" in props ? computed(() => Boolean(props.open)) : openLocal;
+  const set = (next) => {
+    if (!("open" in props))
+      openLocal.value = next;
+  };
+  provide(CollapsibleKey2, {
+    open,
+    setOpen: function setOpen(v) {
+      set(v);
+      props.onOpenChange?.(v);
+    }
+  });
+  return _$createTemplate(_$tmpl_2, [
+    function stateAttr() {
+      return open.value ? "open" : "closed";
+    },
+    () => _$unwrap(props).class,
+    () => _$unwrap(props).children
+  ]);
+});
+var CollapsibleTrigger2 = cc((props) => {
+  const api = inject(CollapsibleKey2);
+  const toggle = () => {
+    api.setOpen(!api.open.value);
+  };
+  if (props.asChild) {
+    return /* @__PURE__ */ jsx(Slot2, {
+      class: () => _$unwrap(props).class,
+      onclick: toggle,
+      children: () => _$unwrap(props).children
+    });
+  }
+  return _$createTemplate(_$tmpl_3, [
+    () => _$unwrap(props).class,
+    function expanded() {
+      return api.open.value;
+    },
+    toggle,
+    () => _$unwrap(props).children
+  ]);
+});
+var CollapsibleContent2 = cc((props) => {
+  const api = inject(CollapsibleKey2);
+  function stateAttr() {
+    return api.open.value ? "open" : "closed";
+  }
+  function bindContent(el) {
+    if (el == null)
+      return;
+    const node = el;
+    function measure() {
+      const inner = node.firstElementChild;
+      const height = inner instanceof HTMLElement ? inner.scrollHeight : node.scrollHeight;
+      node.style.setProperty("--radix-collapsible-content-height", `${height}px`);
+    }
+    measure();
+    requestAnimationFrame(measure);
+  }
+  return /* @__PURE__ */ jsx(Presence2, {
+    present: () => api.open.value,
+    children: /* @__PURE__ */ jsx("div", {
+      "data-slot": "collapsible-content",
+      "data-state": stateAttr,
+      class: () => _$unwrap(props).class,
+      ref: bindContent,
+      children: () => _$unwrap(props).children
+    })
+  });
+});
+var PopoverKey2 = Symbol("sinwan-ui.popover");
+var PopoverRoot2 = cc((props) => {
+  const api = createOpenState(props);
+  provide(PopoverKey2, {
+    ...api,
+    placement: props.placement ?? "bottom",
+    align: props.align ?? "center"
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: () => _$unwrap(props).children
+  });
+});
+var PopoverTrigger2 = cc((props) => {
+  const api = inject(PopoverKey2);
+  function onClick() {
+    api.setOpen(!api.open.value);
+  }
+  const ref = (el) => {
+    api.triggerEl.value = el;
+  };
+  if (props.asChild) {
+    return /* @__PURE__ */ jsx(Slot2, {
+      class: () => _$unwrap(props).class,
+      onclick: onClick,
+      ref,
+      children: () => _$unwrap(props).children
+    });
+  }
+  return _$createTemplate(_$tmpl_4, [
+    () => _$unwrap(props).class,
+    function expanded() {
+      return api.open.value;
+    },
+    onClick,
+    ref,
+    () => _$unwrap(props).children
+  ]);
+});
+var PopoverContent2 = cc((props) => {
+  const api = inject(PopoverKey2);
+  const contentEl = signal(null);
+  const { style, side: resolvedSide } = useAnchorPosition2({
+    open: api.open,
+    trigger: api.triggerEl,
+    content: contentEl,
+    placement: props.side ?? api.placement,
+    align: props.align ?? api.align,
+    gap: props.sideOffset === undefined ? 8 : props.sideOffset,
+    fallbackSize: { width: 240, height: 160 }
+  });
+  onMounted(() => {
+    function onDoc(e) {
+      if (!api.open.value)
+        return;
+      const t = e.target;
+      if (t instanceof Node && api.triggerEl.value?.contains(t) || isDismissExemptPointerTarget2(t)) {
+        return;
+      }
+      api.setOpen(false);
+    }
+    function onKey(e) {
+      if (e.key === "Escape") {
+        api.setOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", onDoc);
+    document.addEventListener("keydown", onKey);
+    onUnmounted(() => {
+      document.removeEventListener("pointerdown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    });
+  });
+  function popoverState() {
+    return api.open.value ? "open" : "closed";
+  }
+  return /* @__PURE__ */ jsx(Presence2, {
+    present: () => api.open.value,
+    children: /* @__PURE__ */ jsx(UiPortal2, {
+      children: /* @__PURE__ */ jsx("div", {
+        "data-slot": "popover-content",
+        "data-state": popoverState,
+        "data-side": () => resolvedSide.value,
+        class: () => _$unwrap(props).class,
+        style: () => style.value,
+        role: "dialog",
+        onmouseenter: props.onmouseenter,
+        onmouseleave: props.onmouseleave,
+        ref: (el) => {
+          contentEl.value = el;
+        },
+        children: () => _$unwrap(props).children
+      })
+    })
+  });
+});
+var TooltipKey2 = Symbol("sinwan-ui.tooltip");
+var TooltipProvider2 = cc((props) => {
+  props.delayDuration;
+  return props.children ?? null;
+});
+var TooltipRoot2 = cc((props) => {
+  const api = createOpenState(props);
+  provide(TooltipKey2, api);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: () => _$unwrap(props).children
+  });
+});
+var TooltipTrigger2 = cc((props) => {
+  const api = inject(TooltipKey2);
+  const show = () => {
+    api.setOpen(true);
+  };
+  const hide = () => {
+    api.setOpen(false);
+  };
+  const ref = (el) => {
+    api.triggerEl.value = el;
+  };
+  const handlers = {
+    onmouseenter: show,
+    onmouseleave: hide,
+    onfocus: show,
+    onblur: hide,
+    ref
+  };
+  if (props.asChild) {
+    return /* @__PURE__ */ jsx(Slot2, {
+      class: () => _$unwrap(props).class,
+      ...handlers,
+      children: () => _$unwrap(props).children
+    });
+  }
+  return /* @__PURE__ */ jsx("button", {
+    type: "button",
+    class: () => _$unwrap(props).class,
+    "data-slot": "tooltip-trigger",
+    ...handlers,
+    children: () => _$unwrap(props).children
+  });
+});
+var TooltipContent2 = cc((props) => {
+  const api = inject(TooltipKey2);
+  const contentEl = signal(null);
+  const { style, side: resolvedSide } = useAnchorPosition2({
+    open: api.open,
+    trigger: api.triggerEl,
+    content: contentEl,
+    placement: props.side === undefined ? "top" : props.side,
+    align: "center",
+    gap: props.sideOffset === undefined ? 8 : props.sideOffset,
+    fallbackSize: { width: 120, height: 32 }
+  });
+  function tooltipState() {
+    return api.open.value ? "open" : "closed";
+  }
+  return /* @__PURE__ */ jsx(Presence2, {
+    present: () => api.open.value,
+    children: /* @__PURE__ */ jsx(UiPortal2, {
+      children: /* @__PURE__ */ jsx("div", {
+        role: "tooltip",
+        "data-slot": "tooltip-content",
+        "data-state": tooltipState,
+        "data-side": () => resolvedSide.value,
+        class: () => _$unwrap(props).class,
+        style: () => style.value,
+        ref: (el) => {
+          contentEl.value = el;
+        },
+        children: () => _$unwrap(props).children
+      })
+    })
+  });
+});
+
+export { DialogKey2, DialogRoot2, DialogTrigger2, DialogClose2, DialogOverlay2, DialogContent2, CollapsibleKey2, CollapsibleRoot2, CollapsibleTrigger2, CollapsibleContent2, PopoverKey2, PopoverRoot2, PopoverTrigger2, PopoverContent2, TooltipKey2, TooltipProvider2, TooltipRoot2, TooltipTrigger2, TooltipContent2 };

package/dist/chunks/chunk-9whagkb6.js

@@ -0,0 +1,31 @@
+// src/dismiss.ts
+var DISMISS_EXEMPT_SELECTOR = [
+  "[data-slot$='-menu-content']",
+  "[data-slot='menubar-content']",
+  "[data-slot$='-sub-content']",
+  "[data-slot='select-content']",
+  "[data-slot='popover-content']",
+  "[data-slot='dialog-content']",
+  "[data-slot='alert-dialog-content']",
+  "[data-slot='sheet-content']",
+  "[data-slot='drawer-content']",
+  "[data-slot$='-overlay']",
+  "select",
+  "option",
+  "optgroup"
+].join(",");
+function isDismissExemptPointerTarget2(target) {
+  if (target == null)
+    return false;
+  let el = null;
+  if (target instanceof Element) {
+    el = target;
+  } else if (target instanceof Node) {
+    el = target.parentElement;
+  }
+  if (el == null)
+    return false;
+  return el.closest(DISMISS_EXEMPT_SELECTOR) != null;
+}
+
+export { isDismissExemptPointerTarget2 };