@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-gndm6am4.js

@@ -0,0 +1,128 @@
+import {
+  MorphSurface
+} from "./components-jxgznftn.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useMorph,
+  useMorphOrigin
+} from "./components-7nww01w4.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/overlays/tooltip/index.tsx
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { motion, useMotionValue } from "motion/react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TooltipPortalContainerContext = createContext(null);
+function TooltipPortalContainer({ value, children }) {
+  return /* @__PURE__ */ jsx(TooltipPortalContainerContext.Provider, {
+    value,
+    children
+  });
+}
+var DEFAULT_DELAY = 200;
+var TooltipGroupContext = createContext(false);
+function TooltipProvider({ children, delayDuration = DEFAULT_DELAY, skipDelayDuration = 300 }) {
+  return /* @__PURE__ */ jsx(TooltipGroupContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+      delay: delayDuration,
+      timeout: skipDelayDuration,
+      children
+    })
+  });
+}
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  sideOffset = 8,
+  delayDuration,
+  className,
+  contentClassName,
+  forceOpen,
+  onOpenChange: onOpenChangeProp,
+  followCursor,
+  from,
+  effect = "goo",
+  tier = "moderate"
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = forceOpen !== undefined ? forceOpen : internalOpen;
+  const shape = useShape();
+  const portalContainer = useContext(TooltipPortalContainerContext);
+  const hasAmbientProvider = useContext(TooltipGroupContext);
+  const { origin, capture } = useMorphOrigin();
+  const handedOff = useRef(false);
+  const morph = useMorph(open, origin, {
+    from,
+    effect: followCursor ? "fade" : effect,
+    tier,
+    instant: (popup) => handedOff.current || popup.dataset.instant === "delay"
+  });
+  const followOffset = useMotionValue(0);
+  useEffect(() => {
+    if (forceOpen && followCursor)
+      followOffset.set(0);
+  }, [forceOpen, followCursor, followOffset]);
+  const handleFollowMove = (event) => {
+    if (!followCursor)
+      return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    followOffset.set(followCursor === "y" ? event.clientY - (rect.top + rect.height / 2) : event.clientX - (rect.left + rect.width / 2));
+  };
+  const tooltip = /* @__PURE__ */ jsxs(TooltipPrimitive.Root, {
+    open,
+    onOpenChange: (v, details) => {
+      if (v)
+        capture(details);
+      handedOff.current = !v && details.reason === "none";
+      setInternalOpen(v);
+      onOpenChangeProp?.(v);
+    },
+    children: [
+      /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+        render: children,
+        delay: delayDuration,
+        onPointerMove: followCursor ? handleFollowMove : undefined
+      }),
+      /* @__PURE__ */ jsx(TooltipPrimitive.Portal, {
+        container: portalContainer ?? undefined,
+        children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, {
+          side,
+          sideOffset,
+          className: cn("z-50", contentClassName),
+          children: /* @__PURE__ */ jsx(TooltipPrimitive.Popup, {
+            ref: morph.popupRef,
+            className: "relative outline-none",
+            render: /* @__PURE__ */ jsx(motion.div, {
+              style: followCursor ? { [followCursor]: followOffset } : {}
+            }),
+            children: /* @__PURE__ */ jsx(MorphSurface, {
+              morph,
+              bg: "bg-foreground",
+              radius: shape.bg,
+              className: cn("text-background text-caption px-2 py-1", "[text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both]:py-2", "weight-medium", className),
+              children: content
+            })
+          })
+        })
+      })
+    ]
+  });
+  if (hasAmbientProvider)
+    return tooltip;
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+    delay: delayDuration ?? DEFAULT_DELAY,
+    children: tooltip
+  });
+}
+Tooltip.Provider = TooltipProvider;
+Tooltip.PortalContainer = TooltipPortalContainer;
+var tooltip_default = Tooltip;
+
+export { TooltipPortalContainer, TooltipProvider, Tooltip, tooltip_default };

package/dist/shared/components-hjkrv00c.js

@@ -0,0 +1,191 @@
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  GooIndicator
+} from "./components-kf2ehztc.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/switch/index.tsx
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { forwardRef, useCallback, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var METRICS = {
+  default: {
+    trackWidth: 34,
+    trackHeight: 20,
+    thumbSize: 16,
+    pillExtend: 2,
+    pressExtend: 4,
+    pressShrink: 4
+  },
+  compact: {
+    trackWidth: 28,
+    trackHeight: 16,
+    thumbSize: 12,
+    pillExtend: 2,
+    pressExtend: 3,
+    pressShrink: 3
+  }
+};
+var THUMB_OFFSET = 2;
+var DRAG_DEAD_ZONE = 2;
+var Switch = forwardRef(({
+  label,
+  checked,
+  defaultChecked = false,
+  onToggle,
+  onCheckedChange,
+  disabled = false,
+  thumbTransition,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const [isChecked, setChecked] = useControllableState(checked, defaultChecked, onCheckedChange);
+  const toggle = useCallback(() => {
+    setChecked((prev) => !prev);
+    onToggle?.();
+  }, [setChecked, onToggle]);
+  const labelId = useId();
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const sizeClasses = useSize(size);
+  const m = METRICS[sizeClasses.variant];
+  const thumbTravel = m.trackWidth - m.thumbSize - THUMB_OFFSET * 2;
+  const dragging = useRef(false);
+  const didDrag = useRef(false);
+  const pointerStart = useRef(null);
+  const [dragX, setDragXState] = useState(null);
+  const dragXRef = useRef(null);
+  const setDragX = useCallback((x) => {
+    dragXRef.current = x;
+    setDragXState(x);
+  }, []);
+  const thumbWidth = pressed ? m.thumbSize + m.pressExtend : hovered ? m.thumbSize + m.pillExtend : m.thumbSize;
+  const thumbHeight = pressed ? m.thumbSize - m.pressShrink : m.thumbSize;
+  const thumbY = pressed ? THUMB_OFFSET + m.pressShrink / 2 : THUMB_OFFSET;
+  const extraWidth = thumbWidth - m.thumbSize;
+  const thumbX = isChecked ? THUMB_OFFSET + thumbTravel - extraWidth : THUMB_OFFSET;
+  const thumb = { left: dragX ?? thumbX, top: thumbY, width: thumbWidth, height: thumbHeight };
+  const handlePointerDown = useCallback((e) => {
+    if (disabled)
+      return;
+    if (e.pointerType === "mouse" && e.button !== 0)
+      return;
+    setPressed(true);
+    dragging.current = false;
+    didDrag.current = false;
+    pointerStart.current = {
+      clientX: e.clientX,
+      originX: isChecked ? THUMB_OFFSET + thumbTravel - m.pressExtend : THUMB_OFFSET
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, [disabled, isChecked, thumbTravel, m]);
+  const handlePointerMove = useCallback((e) => {
+    if (!pointerStart.current)
+      return;
+    const delta = e.clientX - pointerStart.current.clientX;
+    if (!dragging.current) {
+      if (Math.abs(delta) < DRAG_DEAD_ZONE)
+        return;
+      dragging.current = true;
+    }
+    const dragMin = THUMB_OFFSET;
+    const pressedThumbWidth = m.thumbSize + m.pressExtend;
+    const dragMax = m.trackWidth - THUMB_OFFSET - pressedThumbWidth;
+    const rawX = pointerStart.current.originX + delta;
+    setDragX(Math.max(dragMin, Math.min(dragMax, rawX)));
+  }, [setDragX, m]);
+  const handlePointerUp = useCallback(() => {
+    if (!pointerStart.current)
+      return;
+    setPressed(false);
+    if (dragging.current) {
+      didDrag.current = true;
+      dragging.current = false;
+      const currentX = dragXRef.current ?? pointerStart.current.originX;
+      const dragMin = THUMB_OFFSET;
+      const pressedThumbWidth = m.thumbSize + m.pressExtend;
+      const dragMax = m.trackWidth - THUMB_OFFSET - pressedThumbWidth;
+      const midpoint = (dragMin + dragMax) / 2;
+      const shouldBeOn = currentX > midpoint;
+      if (shouldBeOn !== isChecked)
+        toggle();
+      setDragX(null);
+      requestAnimationFrame(() => {
+        didDrag.current = false;
+      });
+    }
+    pointerStart.current = null;
+  }, [isChecked, toggle, setDragX, m]);
+  const handlePointerCancel = useCallback(() => {
+    if (!pointerStart.current)
+      return;
+    setPressed(false);
+    if (dragging.current) {
+      dragging.current = false;
+      setDragX(null);
+    }
+    pointerStart.current = null;
+  }, [setDragX]);
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    className: cn("relative z-10 flex items-center cursor-pointer select-none touch-none", sizeClasses.gap, sizeClasses.px, sizeClasses.variant === "compact" ? "py-1" : "py-2", disabled && "opacity-50 pointer-events-none", className),
+    onPointerEnter: (e) => {
+      if (e.pointerType === "mouse")
+        setHovered(true);
+    },
+    onPointerLeave: () => setHovered(false),
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+    onClick: () => {
+      if (disabled || didDrag.current)
+        return;
+      toggle();
+    },
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
+        checked: isChecked,
+        "aria-labelledby": labelId,
+        disabled,
+        tabIndex: 0,
+        className: cn("relative shrink-0 rounded-full outline-none cursor-pointer", "transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", isChecked ? hovered ? "bg-brand-hover" : "bg-brand" : hovered ? "bg-accent-hover" : "bg-accent"),
+        style: {
+          width: m.trackWidth,
+          height: m.trackHeight
+        },
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
+          className: "pointer-events-none absolute inset-0",
+          children: /* @__PURE__ */ jsx(GooIndicator, {
+            rect: thumb,
+            className: "rounded-full bg-thumb",
+            shadow: "shadow-thumb",
+            transition: dragX === null ? thumbTransition ?? spring.moderate : false
+          })
+        })
+      }),
+      /* @__PURE__ */ jsx("span", {
+        id: labelId,
+        className: cn("[text-box:trim-both_cap_alphabetic] transition-[color] duration-fast", sizeClasses.text, isChecked ? "text-foreground" : "text-muted-foreground"),
+        children: label
+      })
+    ]
+  });
+});
+Switch.displayName = "Switch";
+var switch_default = Switch;
+
+export { Switch, switch_default };

package/dist/shared/components-hzfp4tjb.js

@@ -0,0 +1,270 @@
+import {
+  useIsMobile
+} from "./components-4xxddc44.js";
+import {
+  sheet_default
+} from "./components-r43mqnd6.js";
+import {
+  input_default
+} from "./components-7cqq1sqy.js";
+import {
+  fieldIconClasses,
+  fieldVariants
+} from "./components-de8xsm9y.js";
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  button_default
+} from "./components-5pkcfprd.js";
+import {
+  useIcon
+} from "./components-m5br529r.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  SurfaceProvider,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  MorphSurface
+} from "./components-jxgznftn.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  inPlaceOffset,
+  opensInPlace,
+  useMorph,
+  useMorphOrigin
+} from "./components-7nww01w4.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/date-time/picker-shell.tsx
+import { Popover } from "@base-ui/react/popover";
+import { forwardRef, useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PickerShell({ open: openProp, defaultOpen = false, onOpenChange, size, ...props }) {
+  const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);
+  const mobile = useIsMobile(640);
+  const shell = mobile ? /* @__PURE__ */ jsx(PickerSheet, {
+    open,
+    setOpen,
+    ...props
+  }) : /* @__PURE__ */ jsx(PickerPopover, {
+    open,
+    setOpen,
+    ...props
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: shell
+  }) : shell;
+}
+var PickerField = forwardRef(({ icon, display, placeholder, invalid, disabled, id, className, ...props }, ref) => {
+  const Icon = useIcon(icon);
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("button", {
+    ref,
+    type: "button",
+    id,
+    disabled,
+    "aria-invalid": invalid || undefined,
+    "data-invalid": invalid || undefined,
+    "data-disabled": disabled || undefined,
+    ...props,
+    className: cn(fieldVariants({ variant: "bordered" }), "flex w-full min-w-0 items-center text-left cursor-pointer outline-none focus-visible:ring-focus-ring", sizeClasses.gap, sizeClasses.control, compact ? "px-2" : "px-2.5", shape.input, className),
+    children: [
+      /* @__PURE__ */ jsx(Icon, {
+        size: sizeClasses.icon,
+        strokeWidth: 1.5,
+        className: fieldIconClasses
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: cn("flex-1 truncate", sizeClasses.text, display ? "text-foreground" : "text-muted-foreground"),
+        children: display || placeholder
+      })
+    ]
+  });
+});
+PickerField.displayName = "PickerField";
+function PanelHeader({
+  header,
+  closeLabel = "Close",
+  close
+}) {
+  const X = useIcon("x");
+  const sizeClasses = useSize();
+  return /* @__PURE__ */ jsxs("div", {
+    className: "flex items-center gap-1 border-b border-border pb-1",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "flex min-w-0 flex-1 items-center",
+        children: header
+      }),
+      /* @__PURE__ */ jsx(button_default, {
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": closeLabel,
+        onClick: close,
+        children: /* @__PURE__ */ jsx(X, {
+          size: sizeClasses.icon,
+          strokeWidth: 1.5
+        })
+      })
+    ]
+  });
+}
+function PickerPopover({
+  open,
+  setOpen,
+  header,
+  initialFocus,
+  closeLabel,
+  dir,
+  popupClassName,
+  from,
+  effect,
+  hideSource,
+  tier = "moderate",
+  children,
+  ...field
+}) {
+  const { origin, capture } = useMorphOrigin();
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  const shape = useShape();
+  const level = Math.min(useSurface() + 2, 8);
+  const handleOpenChange = useCallback((next, details) => {
+    if (next)
+      capture(details);
+    setOpen(next);
+  }, [capture, setOpen]);
+  return /* @__PURE__ */ jsxs(Popover.Root, {
+    open,
+    onOpenChange: handleOpenChange,
+    modal: false,
+    children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, {
+        disabled: field.disabled,
+        render: /* @__PURE__ */ jsx(PickerField, {
+          ...field
+        })
+      }),
+      /* @__PURE__ */ jsx(Popover.Portal, {
+        children: /* @__PURE__ */ jsx(Popover.Positioner, {
+          side: "bottom",
+          align: "start",
+          sideOffset: opensInPlace({ effect, hideSource }) ? inPlaceOffset : 6,
+          className: "z-50 outline-none",
+          children: /* @__PURE__ */ jsx(Popover.Popup, {
+            ref: morph.popupRef,
+            initialFocus,
+            className: "relative outline-none",
+            children: /* @__PURE__ */ jsx(SurfaceProvider, {
+              value: level,
+              children: /* @__PURE__ */ jsx(MorphSurface, {
+                morph,
+                bg: SURFACE_BG[level],
+                shadow: SURFACE_SHADOW[3],
+                radius: shape.container,
+                className: cn("flex max-w-[calc(100vw-1rem)] flex-col gap-1 p-1", popupClassName),
+                children: /* @__PURE__ */ jsxs("div", {
+                  dir,
+                  className: "flex min-h-0 flex-col gap-1",
+                  children: [
+                    /* @__PURE__ */ jsx(PanelHeader, {
+                      header,
+                      closeLabel,
+                      close: () => setOpen(false)
+                    }),
+                    children
+                  ]
+                })
+              })
+            })
+          })
+        })
+      })
+    ]
+  });
+}
+function PickerSheet({ open, setOpen, header, closeLabel, dir, children, ...field }) {
+  const {
+    initialFocus: _focus,
+    popupClassName: _width,
+    from: _from,
+    effect: _effect,
+    hideSource: _hide,
+    tier: _tier,
+    ...fieldProps
+  } = field;
+  return /* @__PURE__ */ jsxs(sheet_default, {
+    open,
+    onOpenChange: setOpen,
+    children: [
+      /* @__PURE__ */ jsx(sheet_default.Trigger, {
+        disabled: field.disabled,
+        render: /* @__PURE__ */ jsx(PickerField, {
+          ...fieldProps
+        })
+      }),
+      /* @__PURE__ */ jsx(sheet_default.Content, {
+        className: "gap-2 p-3 pt-3",
+        children: /* @__PURE__ */ jsxs("div", {
+          dir,
+          className: "flex min-h-0 flex-col gap-2",
+          children: [
+            /* @__PURE__ */ jsx(PanelHeader, {
+              header,
+              closeLabel,
+              close: () => setOpen(false)
+            }),
+            children
+          ]
+        })
+      })
+    ]
+  });
+}
+var PickerInput = forwardRef(({ formatted, onText, onEnter, onFocus, onBlur, onKeyDown, className, ...props }, ref) => {
+  const [draft, setDraft] = useState(null);
+  const [invalid, setInvalid] = useState(false);
+  return /* @__PURE__ */ jsx(input_default, {
+    ref,
+    ...props,
+    className: cn("hover:ring-transparent focus-within:ring-transparent data-[active]:ring-transparent", className),
+    value: draft ?? formatted,
+    invalid,
+    onChange: (text) => {
+      setDraft(text);
+      setInvalid(!onText(text));
+    },
+    onFocus: (e) => {
+      e.currentTarget.select();
+      onFocus?.(e);
+    },
+    onBlur: (e) => {
+      setDraft(null);
+      setInvalid(false);
+      onBlur?.(e);
+    },
+    onKeyDown: (e) => {
+      if (e.key === "Enter" && !invalid)
+        onEnter?.();
+      onKeyDown?.(e);
+    }
+  });
+});
+PickerInput.displayName = "PickerInput";
+
+export { PickerShell, PickerInput };