@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-cbxjn9p8.js

@@ -0,0 +1,141 @@
+import {
+  defaultLocale,
+  parseDateText
+} from "./components-9jvzzvt1.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  calendar_default
+} from "./components-1rfwbyyc.js";
+import {
+  PickerShell,
+  PickerInput
+} from "./components-7btqt08d.js";
+
+// components/inputs/date-time/date-range-picker/index.tsx
+import { endOfMonth, format } from "date-fns";
+import { useRef, useState } from "react";
+import { dateMatchModifiers } from "react-day-picker";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function DateRangePicker2({
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  locale = defaultLocale,
+  placeholder,
+  disabled,
+  startMonth,
+  endMonth,
+  invalid,
+  size,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  dir,
+  columnsSide,
+  id,
+  from: growFrom,
+  effect,
+  hideSource,
+  tier,
+  className
+}) {
+  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
+  const [open, setOpenState] = useControllableState(openProp, defaultOpen, onOpenChange);
+  const [picking, setPicking] = useState(false);
+  const fromInput = useRef(null);
+  const off = typeof disabled === "boolean" && disabled;
+  const days = off ? undefined : disabled;
+  const from = value?.from;
+  const to = value?.to;
+  const setOpen = (next) => {
+    setPicking(false);
+    setOpenState(next);
+  };
+  const allowed = (date) => (!startMonth || date >= startMonth) && (!endMonth || date <= endOfMonth(endMonth)) && !(days && dateMatchModifiers(date, days));
+  const pick = (day) => {
+    if (!picking || !from) {
+      setValue({ from: day, to: undefined });
+      setPicking(true);
+      return;
+    }
+    setValue(day < from ? { from: day, to: from } : { from, to: day });
+    setOpen(false);
+  };
+  const readEnd = (end) => (text) => {
+    if (!text.trim()) {
+      setValue(end === "from" ? null : from ? { from, to: undefined } : null);
+      return true;
+    }
+    const date = parseDateText(text, locale, (end === "from" ? from : to) ?? undefined);
+    if (!date || !allowed(date))
+      return false;
+    if (end === "from")
+      setValue({ from: date, to: to && to >= date ? to : undefined });
+    else if (!from || date < from)
+      return false;
+    else
+      setValue({ from, to: date });
+    return true;
+  };
+  const display = from ? to ? new Intl.DateTimeFormat(locale.code, { dateStyle: "medium" }).formatRange(from, to) : `${format(from, "PP", { locale })} –` : "";
+  const header = /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(PickerInput, {
+        ref: fromInput,
+        "aria-label": "Start date",
+        placeholder,
+        formatted: from ? format(from, "PP", { locale }) : "",
+        onText: readEnd("from"),
+        onEnter: () => setOpen(false),
+        className: "min-w-0 flex-1"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        "aria-hidden": true,
+        className: "px-0.5 text-muted-foreground",
+        children: "–"
+      }),
+      /* @__PURE__ */ jsx(PickerInput, {
+        "aria-label": "End date",
+        formatted: to ? format(to, "PP", { locale }) : "",
+        onText: readEnd("to"),
+        onEnter: () => setOpen(false),
+        className: "min-w-0 flex-1"
+      })
+    ]
+  });
+  return /* @__PURE__ */ jsx(PickerShell, {
+    open,
+    onOpenChange: setOpen,
+    size,
+    invalid,
+    disabled: off,
+    icon: "calendar",
+    display,
+    placeholder,
+    header,
+    initialFocus: fromInput,
+    id,
+    dir,
+    from: growFrom,
+    effect,
+    hideSource,
+    tier,
+    className,
+    children: /* @__PURE__ */ jsx(calendar_default, {
+      mode: "range",
+      locale,
+      selected: value ?? undefined,
+      onSelect: (_, day) => pick(day),
+      disabled: days,
+      startMonth,
+      endMonth,
+      dir,
+      columnsSide
+    })
+  });
+}
+var date_range_picker_default = DateRangePicker2;
+
+export { DateRangePicker2, date_range_picker_default };

package/dist/shared/components-chacnk61.js

@@ -0,0 +1,216 @@
+import {
+  useReduceMotion
+} from "./components-men63rwj.js";
+import {
+  GOO_MATRIX,
+  GOO_BLUR_RATIO
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// lib/goo-indicator.tsx
+import { animate, motion, useMotionValue } from "motion/react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var COVERAGE = "0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 255 0";
+var NECK = 0.5;
+function union(a, b) {
+  if (!a)
+    return b;
+  const left = Math.min(a.left, b.left);
+  const top = Math.min(a.top, b.top);
+  return {
+    left,
+    top,
+    width: Math.max(a.left + a.width, b.left + b.width) - left,
+    height: Math.max(a.top + a.height, b.top + b.height) - top
+  };
+}
+function pad(rect, by) {
+  return { left: rect.left - by, top: rect.top - by, width: rect.width + by * 2, height: rect.height + by * 2 };
+}
+function center(rect) {
+  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+}
+function travels(from, to) {
+  const a = center(from);
+  const b = center(to);
+  return Math.abs(b.x - a.x) > Math.min(from.width, to.width) / 2 || Math.abs(b.y - a.y) > Math.min(from.height, to.height) / 2;
+}
+function retract(from, to) {
+  const axis = (start, size, toStart, toSize) => {
+    const delta = toStart + toSize / 2 - (start + size / 2);
+    if (Math.abs(delta) < 1)
+      return [start + size * (1 - NECK) / 2, size * NECK];
+    return [delta > 0 ? toStart : toStart + toSize, 0];
+  };
+  const [left, width] = axis(from.left, from.width, to.left, to.width);
+  const [top, height] = axis(from.top, from.height, to.top, to.height);
+  return { left, top, width, height };
+}
+function toTarget(rect) {
+  return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+}
+function blurOf(el, rect) {
+  const r = Number.parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;
+  return Math.min(r, rect.width / 2, rect.height / 2) * GOO_BLUR_RATIO;
+}
+function GooLayer({ active, blur, box, fill, children }) {
+  const id = `goo-${useId().replace(/:/g, "")}`;
+  const flood = useRef(null);
+  const probe = useRef(null);
+  const layer = box ? pad(box, blur * 3) : { left: 0, top: 0, width: 0, height: 0 };
+  useLayoutEffect(() => {
+    if (!active || !probe.current)
+      return;
+    flood.current?.setAttribute("flood-color", getComputedStyle(probe.current).backgroundColor);
+  }, [active]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("svg", {
+        "aria-hidden": true,
+        className: "absolute size-0",
+        children: /* @__PURE__ */ jsxs("filter", {
+          id,
+          x: "-50%",
+          y: "-50%",
+          width: "200%",
+          height: "200%",
+          colorInterpolationFilters: "sRGB",
+          children: [
+            /* @__PURE__ */ jsx("feColorMatrix", {
+              in: "SourceGraphic",
+              values: COVERAGE,
+              result: "coverage"
+            }),
+            /* @__PURE__ */ jsx("feGaussianBlur", {
+              in: "coverage",
+              stdDeviation: blur,
+              result: "blur"
+            }),
+            /* @__PURE__ */ jsx("feColorMatrix", {
+              in: "blur",
+              values: GOO_MATRIX,
+              result: "goo"
+            }),
+            /* @__PURE__ */ jsx("feFlood", {
+              ref: flood
+            }),
+            /* @__PURE__ */ jsx("feComposite", {
+              in2: "goo",
+              operator: "in"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute",
+        style: { ...layer, filter: active ? `url(#${id})` : undefined },
+        children: /* @__PURE__ */ jsx("div", {
+          ref: probe,
+          className: cn2(fill, "absolute"),
+          style: { left: -layer.left, top: -layer.top },
+          children
+        })
+      })
+    ]
+  });
+}
+function GooIndicator({
+  rect,
+  from,
+  className,
+  shadow,
+  transition = spring2.moderate,
+  opacity = 1
+}) {
+  const reduced = useReduceMotion();
+  const start = from ?? rect;
+  const x = useMotionValue(start.left);
+  const y = useMotionValue(start.top);
+  const width = useMotionValue(start.width);
+  const height = useMotionValue(start.height);
+  const lead = useRef(null);
+  const [trails, setTrails] = useState([]);
+  const [blur, setBlur] = useState(0);
+  const ids = useRef(0);
+  const travel = transition === false || reduced ? false : transition;
+  const travelRef = useRef(travel);
+  travelRef.current = travel;
+  const read = () => ({ left: x.get(), top: y.get(), width: width.get(), height: height.get() });
+  useLayoutEffect(() => {
+    const move = travelRef.current;
+    const current = read();
+    if (!move) {
+      x.jump(rect.left);
+      y.jump(rect.top);
+      width.jump(rect.width);
+      height.jump(rect.height);
+      return;
+    }
+    const goo = lead.current && travels(current, rect) ? blurOf(lead.current, current) : 0;
+    if (goo >= 1) {
+      setBlur(goo);
+      setTrails((list) => [...list, { id: ++ids.current, from: current, to: retract(current, rect) }]);
+    }
+    animate(x, rect.left, move);
+    animate(y, rect.top, move);
+    animate(width, rect.width, move);
+    animate(height, rect.height, move);
+  }, [rect.left, rect.top, rect.width, rect.height]);
+  const melting = trails.length > 0;
+  const linger = travel ? { ...travel, delay: (travel.duration ?? 0) / 3 } : undefined;
+  const shape = cn2("pointer-events-none absolute top-0 left-0", className);
+  const box = trails.reduce((all, trail) => union(all, trail.from), union(read(), rect));
+  const drop = (trail) => setTrails((list) => list.filter((t) => t.id !== trail.id));
+  return /* @__PURE__ */ jsxs(motion.div, {
+    "aria-hidden": true,
+    className: "pointer-events-none absolute top-0 left-0",
+    initial: false,
+    animate: { opacity },
+    transition: { duration: spring2.fast.duration },
+    children: [
+      shadow && /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          trails.map((trail) => /* @__PURE__ */ jsx(motion.div, {
+            className: cn2(shape, shadow),
+            initial: { ...toTarget(trail.from), opacity: 1 },
+            animate: { ...toTarget(trail.to), opacity: 0 },
+            transition: linger
+          }, trail.id)),
+          /* @__PURE__ */ jsx(motion.div, {
+            className: cn2(shape, shadow, !melting && "invisible"),
+            style: { x, y, width, height }
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs(GooLayer, {
+        active: melting,
+        blur,
+        box,
+        fill: className ?? "",
+        children: [
+          trails.map((trail) => /* @__PURE__ */ jsx(motion.div, {
+            className: shape,
+            initial: toTarget(trail.from),
+            animate: toTarget(trail.to),
+            transition: linger,
+            onAnimationComplete: () => drop(trail)
+          }, trail.id)),
+          /* @__PURE__ */ jsx(motion.div, {
+            ref: lead,
+            className: cn2(shape, !melting && shadow),
+            style: { x, y, width, height }
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { union, GooLayer, GooIndicator };

package/dist/shared/components-cv16mryv.js

@@ -0,0 +1,62 @@
+// lib/shape-context.tsx
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var shapeMap = {
+  pill: {
+    variant: "pill",
+    item: "rounded-[20px]",
+    bg: "rounded-[20px]",
+    focusRing: "rounded-[22px]",
+    mergedBg: "rounded-2xl",
+    container: "rounded-3xl",
+    button: "rounded-[20px]",
+    input: "rounded-[20px]",
+    bgRadius: 20,
+    mergedRadius: 16
+  },
+  rounded: {
+    variant: "rounded",
+    item: "rounded-lg",
+    bg: "rounded-lg",
+    focusRing: "rounded-[10px]",
+    mergedBg: "rounded-lg",
+    container: "rounded-xl",
+    button: "rounded-lg",
+    input: "rounded-lg",
+    bgRadius: 8,
+    mergedRadius: 8
+  }
+};
+var ShapeContext = createContext(null);
+function useShape() {
+  const ctx = useContext(ShapeContext);
+  if (!ctx)
+    return shapeMap.rounded;
+  return ctx.classes;
+}
+function ShapeProvider2({ children, defaultShape = "rounded" }) {
+  const [shape, setShapeState] = useState(defaultShape);
+  const transitionTimeoutRef = useRef(null);
+  const transitionShape = useCallback((callback) => {
+    const root = document.documentElement;
+    root.classList.add("transitioning");
+    root.offsetHeight;
+    callback();
+    if (transitionTimeoutRef.current)
+      clearTimeout(transitionTimeoutRef.current);
+    transitionTimeoutRef.current = setTimeout(() => root.classList.remove("transitioning"), 200);
+  }, []);
+  const setShape = useCallback((next) => {
+    transitionShape(() => setShapeState(next));
+  }, [transitionShape]);
+  useEffect(() => {
+    document.documentElement.style.setProperty("--shape-input-radius", `${shapeMap[shape].bgRadius}px`);
+  }, [shape]);
+  const value = useMemo(() => ({ shape, setShape, classes: shapeMap[shape] }), [shape, setShape]);
+  return /* @__PURE__ */ jsx(ShapeContext.Provider, {
+    value,
+    children
+  });
+}
+
+export { shapeMap, useShape, ShapeProvider2 };

package/dist/shared/components-ez65vtbq.js

@@ -0,0 +1,110 @@
+import {
+  defaultLocale,
+  hourCycleOf,
+  parseTimeText,
+  dividedColumns
+} from "./components-9jvzzvt1.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  PickerShell,
+  PickerInput
+} from "./components-7btqt08d.js";
+import {
+  pad,
+  TimeColumns
+} from "./components-q4daerx0.js";
+
+// components/inputs/date-time/time-picker/index.tsx
+import { format, set } from "date-fns";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var toTime = (value) => {
+  const [hours, minutes] = value?.split(":").map(Number) ?? [];
+  return hours === undefined || minutes === undefined ? null : { hours, minutes };
+};
+var toValue = ({ hours, minutes }) => `${pad(hours)}:${pad(minutes)}`;
+function TimePicker2({
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  hourCycle,
+  minuteStep = 1,
+  locale = defaultLocale,
+  placeholder,
+  disabled,
+  invalid,
+  size,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  id,
+  from,
+  effect,
+  hideSource,
+  tier,
+  className
+}) {
+  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);
+  const input = useRef(null);
+  const time = toTime(value);
+  const formatted = time ? format(set(new Date, time), "p", { locale }) : "";
+  const readTime = (text) => {
+    if (!text.trim()) {
+      setValue(null);
+      return true;
+    }
+    const read = parseTimeText(text, locale);
+    if (!read)
+      return false;
+    setValue(toValue({ hours: read.getHours(), minutes: read.getMinutes() }));
+    return true;
+  };
+  return /* @__PURE__ */ jsx(PickerShell, {
+    open,
+    onOpenChange: setOpen,
+    size,
+    invalid,
+    disabled,
+    icon: "clock",
+    display: formatted,
+    placeholder,
+    header: /* @__PURE__ */ jsx(PickerInput, {
+      ref: input,
+      "aria-label": placeholder ?? "Time",
+      placeholder,
+      formatted,
+      onText: readTime,
+      onEnter: () => setOpen(false),
+      className: "flex-1"
+    }),
+    initialFocus: input,
+    popupClassName: "w-[max(var(--anchor-width,0px),14rem)]",
+    id,
+    from,
+    effect,
+    hideSource,
+    tier,
+    className,
+    children: /* @__PURE__ */ jsx("div", {
+      className: cn2(dividedColumns, "h-56"),
+      children: /* @__PURE__ */ jsx(TimeColumns, {
+        value: time,
+        onValueChange: (next) => setValue(toValue(next)),
+        hourCycle: hourCycle ?? hourCycleOf(locale),
+        minuteStep,
+        locale,
+        orientation: "vertical",
+        fill: true
+      })
+    })
+  });
+}
+var time_picker_default = TimePicker2;
+
+export { TimePicker2, time_picker_default };

package/dist/shared/components-ezxhrmer.js

@@ -0,0 +1,17 @@
+// lib/utils.ts
+import { createCn } from "cn/config";
+var TYPE_ROLES = ["display", "title", "subtitle", "body", "caption", "micro"];
+var TIERS = ["fast", "fast-exit", "moderate", "moderate-exit", "slow", "slow-exit"];
+var cn2 = createCn({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: TYPE_ROLES.flatMap((role) => [role, `${role}-compact`]) }],
+      "font-variation": [{ weight: ["normal", "medium", "semibold", "bold"] }],
+      duration: [{ duration: TIERS }],
+      delay: [{ delay: TIERS }],
+      rounded: [{ rounded: ["box", "glyph"] }]
+    }
+  }
+});
+
+export { cn2 };

package/dist/shared/components-gc5vtq2f.js

@@ -0,0 +1,149 @@
+import {
+  MorphSurface
+} from "./components-0q0sqfh4.js";
+import {
+  opensInPlace,
+  inPlaceOffset,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  slotRender
+} from "./components-3ky44908.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.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 PopoverTrigger2 = 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
+  });
+});
+PopoverTrigger2.displayName = "PopoverTrigger";
+var PopoverClose2 = 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
+  });
+});
+PopoverClose2.displayName = "PopoverClose";
+var PopoverContent2 = 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(useSurface2() + 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(SurfaceProvider2, {
+          value: level,
+          children: /* @__PURE__ */ jsx(MorphSurface, {
+            morph,
+            bg: SURFACE_BG[level],
+            shadow: SURFACE_SHADOW[3],
+            radius: shape.container,
+            className: cn2("flex w-max max-w-[min(92vw,20rem)] flex-col gap-1 p-4", className),
+            children
+          })
+        })
+      })
+    })
+  });
+});
+PopoverContent2.displayName = "PopoverContent";
+var PopoverTitle2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Title, {
+  ref,
+  className: cn2("text-subtitle weight-semibold text-foreground", className),
+  ...props
+}));
+PopoverTitle2.displayName = "PopoverTitle";
+var PopoverDescription2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Description, {
+  ref,
+  className: cn2("text-caption text-muted-foreground", className),
+  ...props
+}));
+PopoverDescription2.displayName = "PopoverDescription";
+function Popover2({ 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
+    })
+  });
+}
+Popover2.Trigger = PopoverTrigger2;
+Popover2.Content = PopoverContent2;
+Popover2.Title = PopoverTitle2;
+Popover2.Description = PopoverDescription2;
+Popover2.Close = PopoverClose2;
+var popover_default = Popover2;
+
+export { PopoverTrigger2, PopoverClose2, PopoverContent2, PopoverTitle2, PopoverDescription2, Popover2, popover_default };