@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-ed7cmssr.js

@@ -0,0 +1,105 @@
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// primitives/scroll-area/index.tsx
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import {
+  createContext,
+  forwardRef,
+  useContext
+} from "react";
+
+// lib/use-touch-primary.tsx
+import { useEffect, useState } from "react";
+function useTouchPrimary() {
+  const [isTouchPrimary, setIsTouchPrimary] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    const controller = new AbortController;
+    const { signal } = controller;
+    const handleTouch = () => {
+      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      const prefersTouch = window.matchMedia("(pointer: coarse)").matches;
+      setIsTouchPrimary(hasTouch && prefersTouch);
+    };
+    const mq = window.matchMedia("(pointer: coarse)");
+    mq.addEventListener("change", handleTouch, { signal });
+    window.addEventListener("pointerdown", handleTouch, { signal });
+    handleTouch();
+    return () => controller.abort();
+  }, []);
+  return isTouchPrimary;
+}
+
+// primitives/scroll-area/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ScrollAreaContext = createContext(false);
+var ScrollArea = forwardRef(({ className, children, viewportClassName, orientation = "vertical", ...props }, ref) => {
+  const isTouch = useTouchPrimary();
+  return /* @__PURE__ */ jsx(ScrollAreaContext.Provider, {
+    value: isTouch,
+    children: isTouch ? /* @__PURE__ */ jsx("div", {
+      ref,
+      role: "group",
+      "data-slot": "scroll-area",
+      "aria-roledescription": "scroll area",
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", {
+        "data-slot": "scroll-area-viewport",
+        className: cn("size-full rounded-[inherit]", orientation === "vertical" && "overflow-y-auto", orientation === "horizontal" && "overflow-x-auto", orientation === "both" && "overflow-auto", viewportClassName),
+        tabIndex: 0,
+        children
+      })
+    }) : /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+      ref,
+      "data-slot": "scroll-area",
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+          "data-slot": "scroll-area-viewport",
+          className: cn("size-full rounded-[inherit]", viewportClassName),
+          children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Content, {
+            children
+          })
+        }),
+        orientation !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar, {
+          orientation: "vertical"
+        }),
+        orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, {
+          orientation: "horizontal"
+        }),
+        orientation === "both" && /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    })
+  });
+});
+ScrollArea.displayName = "ScrollArea";
+var ScrollBar = forwardRef(({ className, orientation = "vertical", ...props }, ref) => {
+  const isTouch = useContext(ScrollAreaContext);
+  const shape = useShape();
+  if (isTouch)
+    return null;
+  return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
+    ref,
+    orientation,
+    "data-slot": "scroll-area-scrollbar",
+    className: cn("group/scrollbar absolute z-20 flex touch-none select-none", "opacity-0 transition-opacity duration-moderate-exit ease-out delay-moderate", "data-[hovering]:duration-moderate data-[scrolling]:duration-moderate", "data-[hovering]:opacity-100 data-[scrolling]:opacity-100", "data-[hovering]:delay-0 data-[scrolling]:delay-0", orientation === "vertical" && "top-0 right-0 h-full w-2.5", orientation === "horizontal" && "bottom-0 left-0 h-2.5 w-full flex-col", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, {
+      "data-slot": "scroll-area-thumb",
+      className: cn("relative bg-overlay/8 transition-[background-color,width,height] duration-moderate ease-in-out", "group-hover/scrollbar:bg-overlay/12 active:!bg-overlay/16", shape.bg, orientation === "vertical" && "mx-auto my-1 w-1 -translate-x-0.5 h-[var(--scroll-area-thumb-height)] group-hover/scrollbar:w-1.5", orientation === "horizontal" && "my-auto mx-1 h-1 -translate-y-0.5 w-[var(--scroll-area-thumb-width)] group-hover/scrollbar:h-1.5")
+    })
+  });
+});
+ScrollBar.displayName = "ScrollBar";
+Object.assign(ScrollArea, { Bar: ScrollBar });
+var scroll_area_default = ScrollArea;
+
+export { ScrollArea, ScrollBar, scroll_area_default };

package/dist/shared/components-ess3ch6w.js

@@ -0,0 +1,137 @@
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// primitives/fluid-hover/index.tsx
+import {
+  Children,
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FluidHoverContext = createContext(null);
+function isItemDisabled(element) {
+  return element.hasAttribute("data-disabled");
+}
+var itemBaseClass = "relative z-10 flex shrink-0 cursor-pointer items-center text-left text-body text-foreground outline-none focus-visible:ring-1 focus-visible:ring-focus-ring";
+var itemAxisClass = {
+  y: "h-9 w-full px-3",
+  x: "h-9 justify-center whitespace-nowrap px-3",
+  xy: "min-h-20 w-full flex-col items-start justify-center gap-0.5 p-3"
+};
+var containerAxisClass = {
+  y: "flex flex-col gap-1",
+  x: "flex flex-row gap-1",
+  xy: "grid gap-1"
+};
+var FluidHoverItem = forwardRef(({ index, disabled = false, className, children, ...props }, ref) => {
+  const list = useContext(FluidHoverContext);
+  const shape = useShape();
+  const innerRef = useRef(null);
+  useRegisterFluidHoverItem(list?.registerItem, index, innerRef);
+  const axis = list?.axis ?? "y";
+  return /* @__PURE__ */ jsx("button", {
+    ref: (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    type: "button",
+    "data-slot": "fluid-hover-item",
+    "data-disabled": disabled || undefined,
+    disabled,
+    ...props,
+    className: cn(itemBaseClass, itemAxisClass[axis], shape.item, disabled && "cursor-default text-muted-foreground opacity-55", className),
+    children
+  });
+});
+FluidHoverItem.displayName = "FluidHoverItem";
+var FluidHover = forwardRef(({
+  axis,
+  columns,
+  items,
+  renderItem,
+  disabledIndices,
+  gapClick = true,
+  highlightClassName,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const containerRef = useRef(null);
+  const shape = useShape();
+  const resolvedAxis = axis ?? ((columns ?? 1) > 1 ? "xy" : "y");
+  const resolvedColumns = resolvedAxis === "xy" ? Math.max(1, columns ?? 2) : 1;
+  const hover = useFluidHover(containerRef, {
+    axis: resolvedAxis,
+    isItemDisabled,
+    gapClick
+  });
+  const { handlers, registerItem } = hover;
+  const contextValue = useMemo(() => ({ registerItem, axis: resolvedAxis }), [registerItem, resolvedAxis]);
+  const disabled = new Set(disabledIndices);
+  const rows = items ? items.map((item, i) => /* @__PURE__ */ jsx(FluidHoverItem, {
+    index: i,
+    disabled: disabled.has(i),
+    children: renderItem ? renderItem(item, i) : item
+  }, `${i}-${item}`)) : Children.toArray(children).map((child, i) => {
+    if (!isValidElement(child) || child.type !== FluidHoverItem)
+      return child;
+    const row = child;
+    return cloneElement(row, {
+      index: row.props.index ?? i,
+      disabled: row.props.disabled ?? disabled.has(i)
+    });
+  });
+  return /* @__PURE__ */ jsx(FluidHoverContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      ...props,
+      ...handlers,
+      "data-slot": "fluid-hover",
+      "data-axis": resolvedAxis,
+      className: cn("relative", containerAxisClass[resolvedAxis], className),
+      style: resolvedAxis === "xy" ? {
+        gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
+        ...style
+      } : style,
+      children: [
+        /* @__PURE__ */ jsx(FluidHoverHighlight, {
+          hover,
+          className: cn("z-0", shape.bg, highlightClassName)
+        }),
+        rows
+      ]
+    })
+  });
+});
+FluidHover.displayName = "FluidHover";
+Object.assign(FluidHover, { Item: FluidHoverItem });
+var fluid_hover_default = FluidHover;
+
+export { FluidHoverItem, FluidHover, fluid_hover_default };