@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-66mv71kx.js

@@ -0,0 +1,262 @@
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+import {
+  useReduceMotion
+} from "./components-men63rwj.js";
+import {
+  MorphSurface
+} from "./components-0q0sqfh4.js";
+import {
+  useMorph
+} from "./components-hqeq3w9q.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  shapeMap,
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  CommandListRoot2,
+  CommandShortcut2,
+  CommandList2
+} from "./components-8fpr3s4p.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/inputs/search/index.tsx
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { motion } from "motion/react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var INSET = { default: "pl-2.5", compact: "pl-[7px]" };
+var SQUARE = { default: "w-9", compact: "w-7" };
+var PILL = { default: "min-w-[160px]", compact: "min-w-[128px]" };
+var isEditable = (target) => target instanceof HTMLElement && (target.isContentEditable || target.closest("input, textarea, select") !== null);
+function Search2({
+  variant = "pill",
+  placeholder = "Search",
+  items,
+  value,
+  defaultValue = "",
+  onValueChange,
+  onSubmit,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  width = 288,
+  align = "start",
+  shortcut,
+  emptyMessage = "No results found.",
+  effect,
+  tier = "moderate",
+  className
+}) {
+  const [query, setQuery] = useControllableState(value, defaultValue, onValueChange);
+  const [isExpanded, setExpanded] = useControllableState(expanded, defaultExpanded, onExpandedChange);
+  const [suggesting, setSuggesting] = useState(false);
+  const [settled, setSettled] = useState(isExpanded);
+  const [rest, setRest] = useState(0);
+  const reduced = useReduceMotion();
+  const shape = useShape();
+  const size = useSize2();
+  const level = Math.min(useSurface2() + 2, 8);
+  const SearchIcon = useIcon("search");
+  const XIcon = useIcon("x");
+  const button = useRef(null);
+  const field = useRef(null);
+  const input = useRef(null);
+  const origin = useRef({});
+  const suggestions = useMemo(() => items?.map((item) => typeof item === "string" ? { label: item } : item), [items]);
+  const open = suggesting && isExpanded && settled;
+  const lifted = isExpanded || settled;
+  const morph = useMorph(open, origin, { from: field, effect, tier });
+  useLayoutEffect(() => {
+    const el = button.current;
+    if (!el)
+      return;
+    const observer = new ResizeObserver(() => setRest(el.offsetWidth));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const expand = () => {
+    flushSync(() => setExpanded(true));
+    input.current?.focus({ preventScroll: true });
+  };
+  const collapse = (refocus) => {
+    flushSync(() => {
+      setQuery("");
+      setSuggesting(false);
+      setExpanded(false);
+    });
+    if (refocus)
+      button.current?.focus();
+  };
+  useEffect(() => {
+    if (!shortcut || isExpanded)
+      return;
+    const onKey = (event) => {
+      if (event.defaultPrevented || event.key !== shortcut || event.metaKey || event.ctrlKey || event.altKey)
+        return;
+      if (isEditable(event.target))
+        return;
+      event.preventDefault();
+      expand();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut, isExpanded]);
+  const onKeyDown = (event) => {
+    if (event.key !== "Escape" || open)
+      return;
+    event.stopPropagation();
+    if (query)
+      setQuery("");
+    else
+      collapse(true);
+  };
+  const inputProps = {
+    ref: input,
+    placeholder,
+    "aria-label": placeholder,
+    onKeyDown,
+    className: cn2("h-full min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden", size.text)
+  };
+  const root = /* @__PURE__ */ jsx("search", {
+    onBlur: (event) => {
+      if (!isExpanded || query || event.currentTarget.contains(event.relatedTarget))
+        return;
+      collapse(false);
+    },
+    className: cn2("group/search relative inline-flex shrink-0 align-middle", className),
+    children: /* @__PURE__ */ jsxs("form", {
+      className: "contents",
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit?.(query);
+      },
+      children: [
+        /* @__PURE__ */ jsxs("button", {
+          ref: button,
+          type: "button",
+          "aria-label": placeholder,
+          onClick: expand,
+          className: cn2("relative z-[1] flex items-center outline-none focus-visible:ring-1 focus-visible:ring-focus-ring", size.control, size.gap, size.text, shape.input, variant === "icon" ? cn2("cursor-pointer justify-center", SQUARE[size.variant]) : cn2("cursor-text pr-2.5", INSET[size.variant], PILL[size.variant]), isExpanded && "invisible"),
+          children: [
+            /* @__PURE__ */ jsx(SearchIcon, {
+              size: size.icon,
+              strokeWidth: 1.5,
+              className: "shrink-0 text-muted-foreground transition-colors duration-fast group-hover/search:text-foreground"
+            }),
+            variant === "pill" && /* @__PURE__ */ jsx("span", {
+              className: "text-muted-foreground",
+              children: placeholder
+            }),
+            variant === "pill" && shortcut && /* @__PURE__ */ jsx(CommandShortcut2, {
+              className: "pl-4",
+              children: shortcut
+            })
+          ]
+        }),
+        rest > 0 && /* @__PURE__ */ jsx(motion.div, {
+          ref: field,
+          className: cn2("absolute top-0 h-full overflow-hidden ring-1 transition-[box-shadow] duration-moderate", align === "end" ? "right-0" : "left-0", shape.input, lifted ? cn2("z-10 ring-transparent", SURFACE_BG[level], SURFACE_SHADOW[3]) : "ring-border group-hover/search:bg-muted/50"),
+          initial: false,
+          animate: { width: isExpanded ? width : rest },
+          transition: reduced ? { duration: 0 } : isExpanded ? spring2.slow : spring2.slow.exit,
+          onAnimationComplete: () => setSettled(isExpanded),
+          children: lifted && /* @__PURE__ */ jsxs("div", {
+            className: cn2("flex h-full items-center pr-1.5", size.gap, INSET[size.variant]),
+            style: { width },
+            children: [
+              /* @__PURE__ */ jsx(SearchIcon, {
+                size: size.icon,
+                strokeWidth: 1.5,
+                className: "shrink-0 text-muted-foreground"
+              }),
+              suggestions ? /* @__PURE__ */ jsx(Autocomplete.Input, {
+                ...inputProps
+              }) : /* @__PURE__ */ jsx("input", {
+                ...inputProps,
+                type: "search",
+                value: query,
+                onChange: (event) => setQuery(event.target.value)
+              }),
+              query && /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-label": "Clear",
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => {
+                  setQuery("");
+                  input.current?.focus();
+                },
+                className: "flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-[color,background-color] duration-fast hover:bg-hover hover:text-foreground active:bg-active focus-visible:ring-1 focus-visible:ring-focus-ring",
+                children: /* @__PURE__ */ jsx(XIcon, {
+                  size: size.icon - 2,
+                  strokeWidth: 1.5
+                })
+              })
+            ]
+          })
+        })
+      ]
+    })
+  });
+  if (!suggestions)
+    return root;
+  return /* @__PURE__ */ jsxs(CommandListRoot2, {
+    items: suggestions,
+    value: query,
+    onValueChange: setQuery,
+    open,
+    onOpenChange: setSuggesting,
+    children: [
+      root,
+      /* @__PURE__ */ jsx(Autocomplete.Portal, {
+        children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
+          anchor: field,
+          side: "bottom",
+          align,
+          sideOffset: 8,
+          className: "z-50 outline-none",
+          children: /* @__PURE__ */ jsx(Autocomplete.Popup, {
+            ref: morph.popupRef,
+            className: "relative outline-none",
+            children: /* @__PURE__ */ jsx(SurfaceProvider2, {
+              value: level,
+              children: /* @__PURE__ */ jsx(MorphSurface, {
+                morph,
+                bg: SURFACE_BG[level],
+                shadow: SURFACE_SHADOW[3],
+                radius: shapeMap.rounded.container,
+                className: "flex max-h-[min(300px,var(--available-height))] w-[var(--anchor-width)] flex-col overflow-hidden",
+                children: /* @__PURE__ */ jsx(CommandList2, {
+                  emptyMessage,
+                  onPick: (item) => onSubmit?.(item.label)
+                })
+              })
+            })
+          })
+        })
+      })
+    ]
+  });
+}
+var search_default = Search2;
+
+export { Search2, search_default };

package/dist/shared/components-7ans7ce5.js

@@ -0,0 +1,120 @@
+import {
+  defaultLocale,
+  fieldLabel,
+  dividedColumns,
+  ScrollColumn
+} 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
+} from "./components-q4daerx0.js";
+
+// components/inputs/date-time/duration-picker/index.tsx
+import { formatDuration } from "date-fns";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TYPED = /^\s*(\d{1,3})(?::(\d{1,2}))?\s*$/;
+function DurationPicker2({
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  maxHours = 99,
+  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 hours = value?.hours ?? 0;
+  const minutes = value?.minutes ?? 0;
+  const display = value ? hours || minutes ? formatDuration({ hours, minutes }, { locale, format: ["hours", "minutes"] }) : formatDuration({ minutes: 0 }, { locale, format: ["minutes"], zero: true }) : "";
+  const readDuration = (text) => {
+    if (!text.trim()) {
+      setValue(null);
+      return true;
+    }
+    const match = TYPED.exec(text);
+    const h = Number(match?.[1]);
+    const m = Number(match?.[2] ?? 0);
+    if (!match || h > maxHours || m > 59)
+      return false;
+    setValue({ hours: h, minutes: m });
+    return true;
+  };
+  const hourOptions = useMemo(() => Array.from({ length: maxHours + 1 }, (_, h) => ({ value: h, label: String(h) })), [maxHours]);
+  const minuteOptions = useMemo(() => Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => ({
+    value: i * minuteStep,
+    label: pad(i * minuteStep)
+  })), [minuteStep]);
+  return /* @__PURE__ */ jsx(PickerShell, {
+    open,
+    onOpenChange: setOpen,
+    size,
+    invalid,
+    disabled,
+    icon: "clock",
+    display,
+    placeholder,
+    header: /* @__PURE__ */ jsx(PickerInput, {
+      ref: input,
+      "aria-label": placeholder ?? "Duration",
+      placeholder: "0:00",
+      formatted: value ? `${hours}:${pad(minutes)}` : "",
+      onText: readDuration,
+      onEnter: () => setOpen(false),
+      className: "flex-1"
+    }),
+    initialFocus: input,
+    popupClassName: "w-[max(var(--anchor-width,0px),14rem)]",
+    id,
+    from,
+    effect,
+    hideSource,
+    tier,
+    className,
+    children: /* @__PURE__ */ jsxs("div", {
+      className: cn2(dividedColumns, "h-56"),
+      children: [
+        /* @__PURE__ */ jsx(ScrollColumn, {
+          label: fieldLabel(locale, "hour"),
+          options: hourOptions,
+          value: value ? hours : null,
+          onValueChange: (h) => setValue({ hours: h, minutes }),
+          className: "min-w-0 flex-1"
+        }),
+        /* @__PURE__ */ jsx(ScrollColumn, {
+          label: fieldLabel(locale, "minute"),
+          options: minuteOptions,
+          value: value ? minutes : null,
+          onValueChange: (m) => setValue({ hours, minutes: m }),
+          className: "min-w-0 flex-1"
+        })
+      ]
+    })
+  });
+}
+var duration_picker_default = DurationPicker2;
+
+export { DurationPicker2, duration_picker_default };

package/dist/shared/components-7btqt08d.js

@@ -0,0 +1,270 @@
+import {
+  fieldVariants,
+  fieldIconClasses
+} from "./components-mhd39z7x.js";
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+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 {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  useIsMobile
+} from "./components-c6s6b43g.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+import {
+  button_default
+} from "./components-b2wyq2cq.js";
+import {
+  sheet_default
+} from "./components-rr7a6ja9.js";
+import {
+  input_default
+} from "./components-gvr9w41t.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(SizeProvider2, {
+    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 = useSize2();
+  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: cn2(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: cn2("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 = useSize2();
+  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(useSurface2() + 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(SurfaceProvider2, {
+              value: level,
+              children: /* @__PURE__ */ jsx(MorphSurface, {
+                morph,
+                bg: SURFACE_BG[level],
+                shadow: SURFACE_SHADOW[3],
+                radius: shape.container,
+                className: cn2("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: cn2("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 };