@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-r43mqnd6.js

@@ -0,0 +1,160 @@
+import {
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogState,
+  DialogTitle,
+  DialogTrigger,
+  useDialogState
+} from "./components-61ckf42z.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 {
+  useMorph
+} from "./components-7nww01w4.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/overlays/sheet/index.tsx
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { motion } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SheetContext = createContext({ side: "bottom", swiped: false });
+var SWIPE = {
+  top: "up",
+  right: "right",
+  bottom: "down",
+  left: "left"
+};
+var PLACEMENT = {
+  top: "inset-x-2 top-2 mx-auto max-w-[36rem] max-h-[calc(100dvh-4rem)]",
+  bottom: "inset-x-2 bottom-2 mx-auto max-w-[36rem] max-h-[calc(100dvh-4rem)]",
+  left: "inset-y-2 left-2 w-[min(24rem,calc(100%-1rem))]",
+  right: "inset-y-2 right-2 w-[min(24rem,calc(100%-1rem))]"
+};
+var DRAWER_OFFSET = 4;
+var INDENT_RADIUS = { pill: "data-[active]:rounded-3xl", rounded: "data-[active]:rounded-xl" };
+var SheetContent = forwardRef(({ from, effect, hideSource, tier, container, className, children, ...props }, ref) => {
+  const { side, swiped } = useContext(SheetContext);
+  const { open, origin } = useDialogState();
+  const morph = useMorph(open, origin, {
+    from: from ?? side,
+    effect,
+    hideSource,
+    tier,
+    exit: swiped ? { effect: "slide", from: side } : undefined
+  });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  const shape = useShape();
+  const level = Math.min(useSurface() + DRAWER_OFFSET, 8);
+  const edge = side === "top" || side === "bottom";
+  return /* @__PURE__ */ jsxs(DrawerPrimitive.Portal, {
+    container: container ?? undefined,
+    children: [
+      /* @__PURE__ */ jsx(DrawerPrimitive.Backdrop, {
+        render: /* @__PURE__ */ jsx(motion.div, {
+          style: { opacity: morph.progress }
+        }),
+        className: cn(container ? "absolute" : "fixed", "inset-0 z-50 bg-scrim")
+      }),
+      /* @__PURE__ */ jsx(DrawerPrimitive.Viewport, {
+        className: cn(container ? "absolute" : "fixed", "inset-0 z-50"),
+        children: /* @__PURE__ */ jsx(DrawerPrimitive.Popup, {
+          ref: morph.popupRef,
+          ...props,
+          className: cn("absolute flex flex-col focus:outline-none", PLACEMENT[side], "[transform:translate(var(--drawer-swipe-movement-x),calc(var(--drawer-snap-point-offset)_+_var(--drawer-swipe-movement-y)))]", "transition-[transform] duration-slow"),
+          children: /* @__PURE__ */ jsx(SurfaceProvider, {
+            value: level,
+            children: /* @__PURE__ */ jsxs(MorphSurface, {
+              morph,
+              bg: SURFACE_BG[level],
+              shadow: SURFACE_SHADOW[level],
+              radius: shape.container,
+              className: cn("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-6", edge && "pt-3", className),
+              children: [
+                edge && /* @__PURE__ */ jsx("div", {
+                  "aria-hidden": true,
+                  className: "mx-auto h-1 w-10 shrink-0 rounded-full bg-overlay/16"
+                }),
+                children
+              ]
+            })
+          })
+        })
+      })
+    ]
+  });
+});
+SheetContent.displayName = "SheetContent";
+var SheetIndent = forwardRef(({ className, ...props }, ref) => {
+  const shape = useShape();
+  return /* @__PURE__ */ jsx(DrawerPrimitive.Indent, {
+    ref,
+    className: cn("origin-top transition-[transform] duration-slow data-[active]:scale-[0.96] data-[active]:overflow-hidden", INDENT_RADIUS[shape.variant], className),
+    ...props
+  });
+});
+SheetIndent.displayName = "SheetIndent";
+function Sheet({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  side = "bottom",
+  snapPoints,
+  defaultSnapPoint,
+  modal = true
+}) {
+  const [swiped, setSwiped] = useState(false);
+  return /* @__PURE__ */ jsx(SheetContext.Provider, {
+    value: { side, swiped },
+    children: /* @__PURE__ */ jsx(DialogState, {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: (root) => /* @__PURE__ */ jsx(DrawerPrimitive.Root, {
+        open: root.open,
+        onOpenChange: (next, details) => {
+          setSwiped(!next && details.reason === "swipe");
+          root.onOpenChange(next, details);
+        },
+        swipeDirection: SWIPE[side],
+        snapPoints,
+        defaultSnapPoint,
+        modal,
+        children
+      })
+    })
+  });
+}
+Sheet.Trigger = DialogTrigger;
+Sheet.Content = SheetContent;
+Sheet.Header = DialogHeader;
+Sheet.Footer = DialogFooter;
+Sheet.Title = DialogTitle;
+Sheet.Description = DialogDescription;
+Sheet.Close = DialogClose;
+Sheet.Provider = DrawerPrimitive.Provider;
+Sheet.Indent = SheetIndent;
+var sheet_default = Sheet;
+
+export { SheetContent, SheetIndent, Sheet, sheet_default };

package/dist/shared/components-r4jt6hgd.js

@@ -0,0 +1,58 @@
+import {
+  ScrollColumn,
+  fieldLabel
+} from "./components-x2xyckd5.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/date-time/time-columns.tsx
+import { format } from "date-fns";
+import { useMemo } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var pad = (n) => String(n).padStart(2, "0");
+function TimeColumns({
+  value,
+  onValueChange,
+  hourCycle,
+  minuteStep,
+  locale,
+  orientation,
+  fill = false
+}) {
+  const twelve = hourCycle === "h12" || hourCycle === "h11";
+  const hours = value?.hours ?? null;
+  const minutes = value?.minutes ?? 0;
+  const hourOptions = useMemo(() => Array.from({ length: 24 }, (_, h) => ({
+    value: h,
+    label: twelve ? format(new Date(2000, 0, 1, h), hourCycle === "h11" ? "K a" : "h a", { locale }) : pad(h)
+  })), [twelve, hourCycle, locale]);
+  const minuteOptions = useMemo(() => Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => ({
+    value: i * minuteStep,
+    label: pad(i * minuteStep)
+  })), [minuteStep]);
+  const vertical = orientation === "vertical";
+  const width = (fixed) => !vertical ? "w-full" : fill ? "min-w-0 flex-1" : cn("shrink-0", fixed);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(ScrollColumn, {
+        label: fieldLabel(locale, "hour"),
+        options: hourOptions,
+        value: hours,
+        onValueChange: (h) => onValueChange({ hours: h, minutes }),
+        orientation,
+        className: width(twelve ? "w-15" : "w-12")
+      }),
+      /* @__PURE__ */ jsx(ScrollColumn, {
+        label: fieldLabel(locale, "minute"),
+        options: minuteOptions,
+        value: hours === null ? null : minutes,
+        onValueChange: (m) => onValueChange({ hours: hours ?? 0, minutes: m }),
+        orientation,
+        className: width("w-12")
+      })
+    ]
+  });
+}
+
+export { pad, TimeColumns };

package/dist/shared/components-rc63qsy6.js

@@ -0,0 +1,159 @@
+import {
+  GooLayer,
+  union
+} from "./components-kf2ehztc.js";
+import {
+  GOO_BLUR_RATIO
+} from "./components-7nww01w4.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+
+// lib/use-merge-split.tsx
+import { AnimatePresence, motion } from "motion/react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var mergeSpring = spring.moderate;
+var settleMs = mergeSpring.duration * 1000 + 80;
+var SEED = 0.5;
+function useSelectionRuns(checkedIndices) {
+  const prevGroupMap = useRef(new Map);
+  const groupIdCounter = useRef(0);
+  const runs = [];
+  const sorted = [...checkedIndices].sort((a, b) => a - b);
+  for (const idx of sorted) {
+    const last = runs[runs.length - 1];
+    if (last && idx === last.end + 1)
+      last.end = idx;
+    else
+      runs.push({ start: idx, end: idx });
+  }
+  const usedIds = new Set;
+  const nextGroupMap = new Map;
+  const result = runs.map((run) => {
+    let stableId = null;
+    for (let i = run.start;i <= run.end; i++) {
+      const prevId = prevGroupMap.current.get(i);
+      if (prevId !== undefined && !usedIds.has(prevId)) {
+        stableId = prevId;
+        break;
+      }
+    }
+    const id = stableId ?? ++groupIdCounter.current;
+    usedIds.add(id);
+    for (let i = run.start;i <= run.end; i++)
+      nextGroupMap.set(i, id);
+    return { ...run, id };
+  });
+  prevGroupMap.current = nextGroupMap;
+  return result;
+}
+function useMergeSplitBlocks(runs, itemRects, R) {
+  const blocks = [];
+  for (const run of runs) {
+    const first = itemRects[run.start];
+    const last = itemRects[run.end];
+    if (!first || !last)
+      continue;
+    const left = Math.min(first.left, last.left);
+    const width = Math.max(first.width, last.width);
+    for (let i = run.start;i <= run.end; i++) {
+      const row = itemRects[i];
+      if (!row)
+        continue;
+      const next = i < run.end ? itemRects[i + 1] : undefined;
+      const bottom = next?.top ?? row.top + row.height;
+      const top = i === run.start ? R : 0;
+      const end = i === run.end ? R : 0;
+      blocks.push({
+        key: `sel-${i}`,
+        top: row.top,
+        left,
+        width,
+        height: bottom - row.top,
+        radii: [top, top, end, end],
+        instant: false
+      });
+    }
+  }
+  return blocks;
+}
+var corners = ([tl, tr, br, bl]) => ({
+  borderTopLeftRadius: tl,
+  borderTopRightRadius: tr,
+  borderBottomRightRadius: br,
+  borderBottomLeftRadius: bl
+});
+var rest = (b) => ({
+  top: b.top,
+  left: b.left,
+  width: b.width,
+  height: b.height,
+  opacity: 1,
+  ...corners(b.radii)
+});
+var seed = (b) => ({
+  top: b.top + b.height / 2,
+  left: b.left + b.width * (1 - SEED) / 2,
+  width: b.width * SEED,
+  height: 0,
+  ...corners(b.radii)
+});
+var variants = (b) => ({
+  rest: rest(b),
+  enter: (mode) => mode === "goo" ? seed(b) : { ...rest(b), opacity: 0 },
+  leave: (mode) => mode === "goo" ? { ...seed(b), transition: mergeSpring.exit } : { opacity: 0, transition: mode === "fade" ? mergeSpring.exit : { duration: 0 } }
+});
+function SelectionBackgrounds({ blocks }) {
+  const reduced = useReduceMotion();
+  const mode = blocks.some((b) => b.instant) ? "snap" : reduced ? "fade" : "goo";
+  const rows = blocks.map((b) => b.key).join("|");
+  const [melting, setMelting] = useState(false);
+  const shown = useRef(rows);
+  const timer = useRef();
+  const covered = useRef(null);
+  const radius = useRef(0);
+  useLayoutEffect(() => {
+    if (rows === shown.current)
+      return;
+    shown.current = rows;
+    if (mode !== "goo")
+      return;
+    setMelting(true);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setMelting(false), settleMs);
+  }, [rows, mode]);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const box = blocks.reduce(union, null);
+  const changing = melting || rows !== shown.current;
+  if (!changing)
+    covered.current = box;
+  else if (box)
+    covered.current = union(covered.current, box);
+  radius.current = Math.max(changing ? radius.current : 0, ...blocks.flatMap((b) => b.radii));
+  return /* @__PURE__ */ jsx(GooLayer, {
+    active: melting,
+    blur: radius.current * GOO_BLUR_RATIO,
+    box: covered.current,
+    fill: "bg-active",
+    children: /* @__PURE__ */ jsx(AnimatePresence, {
+      initial: false,
+      custom: mode,
+      children: blocks.map((b) => /* @__PURE__ */ jsx(motion.div, {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute bg-active",
+        custom: mode,
+        variants: variants(b),
+        initial: mode === "snap" ? false : "enter",
+        animate: "rest",
+        exit: "leave",
+        transition: mode === "snap" ? { duration: 0 } : { ...mergeSpring, opacity: { duration: spring.fast.duration } }
+      }, b.key))
+    })
+  });
+}
+
+export { useSelectionRuns, useMergeSplitBlocks, SelectionBackgrounds };

package/dist/shared/components-s3yfvfkr.js

@@ -0,0 +1,149 @@
+import {
+  slotRender
+} from "./components-5vxtcp88.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 {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/overlays/popover/index.tsx
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useMemo
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var PopoverContext = createContext({ open: false, origin: { current: {} } });
+var PopoverTrigger = forwardRef(({ render, asChild, children, ...props }, ref) => {
+  const el = slotRender(render, asChild, children);
+  return el ? /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+    ref,
+    render: el,
+    ...props
+  }) : /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+    ref,
+    ...props,
+    children
+  });
+});
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverClose = forwardRef(({ render, asChild, children, ...props }, ref) => {
+  const el = slotRender(render, asChild, children);
+  return el ? /* @__PURE__ */ jsx(PopoverPrimitive.Close, {
+    ref,
+    render: el,
+    ...props
+  }) : /* @__PURE__ */ jsx(PopoverPrimitive.Close, {
+    ref,
+    ...props,
+    children
+  });
+});
+PopoverClose.displayName = "PopoverClose";
+var PopoverContent = forwardRef(({
+  side = "bottom",
+  align,
+  sideOffset = 12,
+  from,
+  effect,
+  hideSource,
+  tier,
+  container,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const { open, origin } = useContext(PopoverContext);
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  const inPlace = opensInPlace({ effect, hideSource });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  const shape = useShape();
+  const level = Math.min(useSurface() + 2, 8);
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, {
+    container: container ?? undefined,
+    children: /* @__PURE__ */ jsx(PopoverPrimitive.Positioner, {
+      side,
+      align: align ?? (inPlace ? "start" : "center"),
+      sideOffset: inPlace ? inPlaceOffset : sideOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx(PopoverPrimitive.Popup, {
+        ref: morph.popupRef,
+        className: "relative outline-none",
+        ...props,
+        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 w-max max-w-[min(92vw,20rem)] flex-col gap-1 p-4", className),
+            children
+          })
+        })
+      })
+    })
+  });
+});
+PopoverContent.displayName = "PopoverContent";
+var PopoverTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Title, {
+  ref,
+  className: cn("text-subtitle weight-semibold text-foreground", className),
+  ...props
+}));
+PopoverTitle.displayName = "PopoverTitle";
+var PopoverDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Description, {
+  ref,
+  className: cn("text-caption text-muted-foreground", className),
+  ...props
+}));
+PopoverDescription.displayName = "PopoverDescription";
+function Popover({ open, defaultOpen = false, onOpenChange, modal = false, children }) {
+  const [current, setCurrent] = useControllableState(open, defaultOpen, onOpenChange);
+  const { origin, capture } = useMorphOrigin();
+  const ctx = useMemo(() => ({ open: current, origin }), [current, origin]);
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
+      open: current,
+      modal,
+      onOpenChange: (next, details) => {
+        if (next)
+          capture(details);
+        setCurrent(next);
+      },
+      children
+    })
+  });
+}
+Popover.Trigger = PopoverTrigger;
+Popover.Content = PopoverContent;
+Popover.Title = PopoverTitle;
+Popover.Description = PopoverDescription;
+Popover.Close = PopoverClose;
+var popover_default = Popover;
+
+export { PopoverTrigger, PopoverClose, PopoverContent, PopoverTitle, PopoverDescription, Popover, popover_default };