@warmio/ui 1.3.0 → 1.5.2

package/dist/chunks/chunk-F74Y4WRX.js

@@ -0,0 +1,239 @@
+import {
+  FLUID_SPRING,
+  useReducedMotion
+} from "./chunk-JXSJTIX7.js";
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/lib/fluid-menu-highlight.tsx
+import * as React from "react";
+import { motion } from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var itemSelectors = {
+  menu: '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]',
+  select: '[role="option"]',
+  sidebar: '[data-sidebar="menu-button"], [data-sidebar="menu-sub-button"]'
+};
+var SIDEBAR_HOVER_DEBOUNCE_MS = 0;
+function sameHighlights(previous, next) {
+  return previous.length === next.length && previous.every((item, index) => {
+    const other = next[index];
+    return other && item.key === other.key && item.element === other.element && item.left === other.left && item.top === other.top && item.width === other.width && item.height === other.height && item.selected === other.selected && item.destructive === other.destructive;
+  });
+}
+function MenuHighlight({ target, kind }) {
+  const reduceMotion = useReducedMotion();
+  const previousElement = React.useRef(target.element);
+  const movedToItem = previousElement.current !== target.element;
+  React.useLayoutEffect(() => {
+    previousElement.current = target.element;
+  }, [target.element]);
+  const Element2 = kind === "sidebar" ? motion.li : motion.div;
+  const geometry = { x: target.left, y: target.top, width: target.width, height: target.height };
+  return /* @__PURE__ */ jsx(
+    Element2,
+    {
+      "aria-hidden": "true",
+      role: "presentation",
+      "data-slot": "fluid-menu-highlight",
+      className: cn(
+        "pointer-events-none absolute top-0 left-0 -z-10 list-none rounded-lg",
+        target.destructive ? "bg-destructive/10 dark:bg-destructive/20" : kind === "select" ? "bg-accent" : "bg-sidebar-accent"
+      ),
+      initial: false,
+      style: reduceMotion ? {
+        left: target.left,
+        top: target.top,
+        width: target.width,
+        height: target.height
+      } : {},
+      animate: reduceMotion ? { opacity: target.selected ? 1 : kind === "sidebar" ? 0.5 : 1 } : {
+        ...geometry,
+        opacity: target.selected ? 1 : kind === "sidebar" ? 0.5 : 1
+      },
+      transition: reduceMotion || !movedToItem ? { duration: 0 } : kind === "sidebar" ? FLUID_SPRING.moderate : FLUID_SPRING.fast
+    },
+    reduceMotion ? "still" : "moving"
+  );
+}
+function FluidMenuHighlights({ kind }) {
+  const anchorRef = React.useRef(null);
+  const [highlights, setHighlights] = React.useState([]);
+  const Anchor = kind === "sidebar" ? "li" : "span";
+  React.useLayoutEffect(() => {
+    const container = anchorRef.current?.parentElement;
+    if (!container) return;
+    const selector = itemSelectors[kind];
+    let items = [];
+    let hovered = null;
+    let focused = null;
+    let hoverTimer;
+    let frame;
+    let nextId = 0;
+    const ids = /* @__PURE__ */ new WeakMap();
+    const idFor = (element) => {
+      let id = ids.get(element);
+      if (id === void 0) {
+        id = nextId++;
+        ids.set(element, id);
+      }
+      return id;
+    };
+    const enabled = (item) => !item.matches(
+      ':disabled, [disabled], [aria-disabled="true"], [data-disabled], [data-fluid-menu-disabled]'
+    ) && item.getClientRects().length > 0 && item.offsetWidth > 0 && item.offsetHeight > 0;
+    const measure = () => {
+      frame = void 0;
+      const visibleItems = items.filter(enabled);
+      const selected = visibleItems.filter(
+        (item) => item.matches(
+          '[aria-selected="true"], [aria-checked="true"], [data-active], [data-popup-open], [data-open]'
+        )
+      );
+      const active = kind === "sidebar" ? hovered && visibleItems.includes(hovered) ? hovered : focused && visibleItems.includes(focused) ? focused : null : visibleItems.find((item) => item.hasAttribute("data-highlighted"));
+      const targets = [];
+      const add = (element, key, isSelected) => {
+        const containerRect = container.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        targets.push({
+          key,
+          element,
+          left: elementRect.left - containerRect.left + container.scrollLeft,
+          top: elementRect.top - containerRect.top + container.scrollTop,
+          width: elementRect.width,
+          height: elementRect.height,
+          selected: isSelected,
+          destructive: element.dataset["variant"] === "destructive"
+        });
+      };
+      if (kind === "sidebar") {
+        const selectedItem = selected[0];
+        const hoverItem = active ?? selectedItem;
+        if (hoverItem) add(hoverItem, "hover", false);
+        if (selectedItem) add(selectedItem, "sidebar", true);
+      } else {
+        const occurrences = /* @__PURE__ */ new Map();
+        selected.forEach((item) => {
+          const group = item.closest('[role="group"], [data-sidebar="menu-sub"]') ?? container;
+          const occurrence = occurrences.get(group) ?? 0;
+          occurrences.set(group, occurrence + 1);
+          const key = item.getAttribute("role") === "menuitemcheckbox" || kind === "select" && selected.length > 1 ? `selection-item-${idFor(item)}` : `selection-${idFor(group)}-${occurrence}`;
+          add(item, key, true);
+        });
+        if (active) add(active, "hover", false);
+      }
+      setHighlights((previous) => sameHighlights(previous, targets) ? previous : targets);
+    };
+    const schedule = () => {
+      if (frame === void 0) frame = requestAnimationFrame(measure);
+    };
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    const register = () => {
+      resizeObserver?.disconnect();
+      items.forEach((item) => item.removeAttribute("data-fluid-menu-item"));
+      items = Array.from(container.querySelectorAll(selector)).filter(
+        (item) => item.closest("[data-fluid-menu]") === container
+      );
+      items.forEach((item) => {
+        item.setAttribute("data-fluid-menu-item", "");
+        resizeObserver?.observe(item);
+      });
+      resizeObserver?.observe(container);
+    };
+    const observer = new MutationObserver((records) => {
+      if (records.some(
+        (record) => record.type === "childList" && [...record.addedNodes, ...record.removedNodes].some(
+          (node) => node instanceof Element && !node.matches('[data-slot="fluid-menu-highlight"]')
+        )
+      ))
+        register();
+      schedule();
+    });
+    register();
+    observer.observe(container, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: [
+        "data-highlighted",
+        "aria-selected",
+        "aria-checked",
+        "data-active",
+        "data-popup-open",
+        "data-open",
+        "disabled",
+        "aria-disabled",
+        "data-disabled",
+        "data-fluid-menu-disabled",
+        "hidden",
+        "data-state"
+      ]
+    });
+    const pointerMove = (event) => {
+      if (event.pointerType === "touch") return;
+      const nextHovered = event.target instanceof Element ? event.target.closest(selector) : null;
+      clearTimeout(hoverTimer);
+      hoverTimer = window.setTimeout(() => {
+        hovered = nextHovered;
+        hoverTimer = void 0;
+        schedule();
+      }, SIDEBAR_HOVER_DEBOUNCE_MS);
+    };
+    const pointerLeave = () => {
+      clearTimeout(hoverTimer);
+      hoverTimer = void 0;
+      hovered = null;
+      schedule();
+    };
+    const focusIn = (event) => {
+      clearTimeout(hoverTimer);
+      hoverTimer = void 0;
+      const item = event.target instanceof Element ? event.target.closest(selector) : null;
+      focused = item?.matches(":focus-visible") ? item : null;
+      if (focused) hovered = null;
+      schedule();
+    };
+    const focusOut = () => {
+      focused = null;
+      schedule();
+    };
+    if (kind === "sidebar") {
+      container.addEventListener("pointermove", pointerMove);
+      container.addEventListener("pointerleave", pointerLeave);
+      container.addEventListener("focusin", focusIn);
+      container.addEventListener("focusout", focusOut);
+    }
+    container.addEventListener("scroll", schedule, true);
+    measure();
+    return () => {
+      observer.disconnect();
+      resizeObserver?.disconnect();
+      if (frame !== void 0) cancelAnimationFrame(frame);
+      clearTimeout(hoverTimer);
+      items.forEach((item) => item.removeAttribute("data-fluid-menu-item"));
+      container.removeEventListener("pointermove", pointerMove);
+      container.removeEventListener("pointerleave", pointerLeave);
+      container.removeEventListener("focusin", focusIn);
+      container.removeEventListener("focusout", focusOut);
+      container.removeEventListener("scroll", schedule, true);
+    };
+  }, [kind]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Anchor,
+      {
+        ref: (node) => {
+          anchorRef.current = node;
+        },
+        hidden: true,
+        "aria-hidden": "true"
+      }
+    ),
+    highlights.map((target) => /* @__PURE__ */ jsx(MenuHighlight, { target, kind }, target.key))
+  ] });
+}
+
+export {
+  FluidMenuHighlights
+};

package/dist/chunks/chunk-GY4XJ6EX.js

@@ -0,0 +1,129 @@
+// ../design/src/button.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var presentationToPrivateSize = {
+  assistantIcon: "icon-xs",
+  assistantRoundIcon: "icon-round",
+  composerIcon: "icon-sm",
+  default: "default",
+  headerAction: "icon-xs",
+  compact: "sm",
+  controlPeer: "default",
+  editPill: "sm",
+  hero: "lg",
+  menuOption: "option",
+  promptCategory: "default",
+  promptOption: "option",
+  sidebarIcon: "icon",
+  tableHeader: "default",
+  tableHeaderLink: "default",
+  threadMore: "icon-xs",
+  threadNew: "sm",
+  touch: "default"
+};
+var presentationAliases = {
+  controlPeer: "default",
+  menuOption: "promptOption",
+  touch: "default"
+};
+function resolvePresentation(presentation) {
+  return presentationAliases[presentation] ?? presentation;
+}
+function resolveButton(presentation, size) {
+  const privateSize = presentationToPrivateSize[presentation];
+  const resolvedSize = size ?? (privateSize === "lg" ? "jumbo" : privateSize === "sm" ? "compact" : privateSize === "icon" || privateSize === "icon-round" || privateSize === "icon-sm" || privateSize === "icon-xs" ? "icon" : "default");
+  return { resolvedSize, explicitSize: size ? resolvedSize : void 0 };
+}
+function withArrow(variant, children) {
+  if (variant !== "arrow") return children;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        "data-icon": "inline-end",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M7 7h10v10" }),
+          /* @__PURE__ */ jsx("path", { d: "M7 17L17 7" })
+        ]
+      }
+    )
+  ] });
+}
+var Button = React.forwardRef(function Button2({
+  children,
+  className: _className,
+  presentation = "default",
+  render: _render,
+  size,
+  style: _style,
+  type,
+  variant = "default",
+  width,
+  asChild: _asChild,
+  ...props
+}, ref) {
+  const { resolvedSize, explicitSize } = resolveButton(presentation, size);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      ref,
+      type: type ?? "button",
+      "data-warm-button": "",
+      "data-slot": "button",
+      "data-presentation": resolvePresentation(presentation),
+      "data-variant": variant,
+      "data-size": resolvedSize,
+      "data-explicit-size": explicitSize,
+      "data-width": width,
+      children: withArrow(variant, children)
+    }
+  );
+});
+Button.displayName = "WarmButton";
+var ButtonLink = React.forwardRef(function ButtonLink2({
+  children,
+  className: _className,
+  disabled: _disabled,
+  presentation = "default",
+  render: _render,
+  size,
+  style: _style,
+  variant = "default",
+  width,
+  asChild: _asChild,
+  ...props
+}, ref) {
+  const { resolvedSize, explicitSize } = resolveButton(presentation, size);
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      ref,
+      "data-warm-button": "",
+      "data-slot": "button",
+      "data-presentation": resolvePresentation(presentation),
+      "data-variant": variant,
+      "data-size": resolvedSize,
+      "data-explicit-size": explicitSize,
+      "data-width": width,
+      children: withArrow(variant, children)
+    }
+  );
+});
+ButtonLink.displayName = "WarmButtonLink";
+
+export {
+  Button,
+  ButtonLink
+};