@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-4hh0gm0v.js

@@ -0,0 +1,292 @@
+import {
+  DialogContent,
+  DialogState,
+  DialogTrigger
+} from "./components-61ckf42z.js";
+import {
+  useIcon
+} from "./components-m5br529r.js";
+import {
+  isDisabledRow,
+  popupScrollAreaClass,
+  popupViewportClass
+} from "./components-jw16snbn.js";
+import {
+  ScrollArea
+} from "./components-ed7cmssr.js";
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  shapeMap
+} from "./components-7zp99w5d.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/overlays/command/index.tsx
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var listShape = shapeMap.rounded;
+var CommandContext = createContext({
+  trigger: { current: null },
+  close: () => {},
+  session: 0
+});
+var CommandHighlight = createContext(null);
+var CommandRows = createContext(undefined);
+var isGrouped = (items) => items[0] !== undefined && ("items" in items[0]);
+function CommandListRoot({ items, ...props }) {
+  const [highlight, setHighlight] = useState(null);
+  const { contains } = Autocomplete.useFilter();
+  return /* @__PURE__ */ jsx(CommandHighlight.Provider, {
+    value: highlight,
+    children: /* @__PURE__ */ jsx(Autocomplete.Root, {
+      ...props,
+      items,
+      itemToStringValue: (item) => item.label,
+      filter: (item, query) => contains([item.label, ...item.keywords ?? []].join(" "), query),
+      onItemHighlighted: (item, details) => setHighlight(item ? details.index : null)
+    })
+  });
+}
+function CommandShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", {
+    className: cn("ml-auto shrink-0 font-sans text-caption text-muted-foreground", className),
+    ...props
+  });
+}
+function CommandRow({
+  item,
+  index,
+  onPick
+}) {
+  const registerItem = useContext(CommandRows);
+  const active = useContext(CommandHighlight) === index;
+  const ref = useRef(null);
+  const size = useSize();
+  useRegisterFluidHoverItem(registerItem, index, ref);
+  const Icon = item.icon;
+  return /* @__PURE__ */ jsxs(Autocomplete.Item, {
+    ref,
+    value: item,
+    disabled: item.disabled,
+    onClick: () => onPick(item),
+    className: cn("relative z-10 flex shrink-0 cursor-pointer select-none items-center outline-none transition-[color] duration-fast", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", size.control, size.gap, size.itemPx, size.text, listShape.item, active ? "text-foreground" : "text-muted-foreground"),
+    children: [
+      Icon && /* @__PURE__ */ jsx(Icon, {
+        size: size.icon,
+        strokeWidth: active ? 2 : 1.5,
+        className: "shrink-0 transition-[color,stroke-width] duration-fast"
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "min-w-0 flex-1 truncate [text-box:trim-both_cap_alphabetic] py-1 -my-1",
+        children: item.label
+      }),
+      item.shortcut && /* @__PURE__ */ jsx(CommandShortcut, {
+        children: item.shortcut
+      })
+    ]
+  });
+}
+function CommandList({ onPick, emptyMessage, className }) {
+  const filtered = Autocomplete.useFilteredItems();
+  const highlight = useContext(CommandHighlight);
+  const compact = useSize().variant === "compact";
+  const containerRef = useRef(null);
+  const { itemRects, isMeasured, registerItem } = useFluidHover(containerRef, { isItemDisabled: isDisabledRow });
+  const rect = isMeasured && highlight !== null ? itemRects[highlight] ?? null : null;
+  const rows = (items, start2) => items.map((item, i) => /* @__PURE__ */ jsx(CommandRow, {
+    item,
+    index: start2 + i,
+    onPick
+  }, item.label));
+  let start = 0;
+  return /* @__PURE__ */ jsx(CommandRows.Provider, {
+    value: registerItem,
+    children: /* @__PURE__ */ jsxs(ScrollArea, {
+      className: cn(popupScrollAreaClass, className),
+      viewportClassName: cn(popupViewportClass, "scroll-fade"),
+      children: [
+        /* @__PURE__ */ jsx(Autocomplete.Empty, {
+          className: "px-4 py-6 text-center text-body text-muted-foreground empty:hidden",
+          children: emptyMessage
+        }),
+        /* @__PURE__ */ jsxs(Autocomplete.List, {
+          ref: containerRef,
+          className: "relative flex flex-col p-1 outline-none data-[empty]:p-0",
+          children: [
+            /* @__PURE__ */ jsx(FluidHoverHighlight, {
+              rect,
+              session: 0,
+              className: listShape.bg
+            }),
+            isGrouped(filtered) ? filtered.map((group) => {
+              const first = start;
+              start += group.items.length;
+              return /* @__PURE__ */ jsxs(Autocomplete.Group, {
+                className: "flex flex-col",
+                children: [
+                  /* @__PURE__ */ jsx(Autocomplete.GroupLabel, {
+                    className: cn("shrink-0 px-2 pt-2 pb-1 text-muted-foreground", compact ? "text-caption-compact" : "text-caption"),
+                    children: group.label
+                  }),
+                  rows(group.items, first)
+                ]
+              }, group.label);
+            }) : rows(filtered, 0)
+          ]
+        })
+      ]
+    })
+  });
+}
+function CommandPalette({
+  items,
+  placeholder = "Type a command or search…",
+  emptyMessage = "No results found.",
+  className
+}) {
+  const { close } = useContext(CommandContext);
+  const SearchIcon = useIcon("search");
+  const size = useSize();
+  const [query, setQuery] = useState("");
+  return /* @__PURE__ */ jsx(CommandListRoot, {
+    items,
+    inline: true,
+    open: true,
+    autoHighlight: "always",
+    keepHighlight: true,
+    value: query,
+    onValueChange: (next, details) => {
+      if (details.reason === "item-press")
+        return;
+      setQuery(next);
+    },
+    children: /* @__PURE__ */ jsxs("div", {
+      className: cn("flex flex-col", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-4",
+          children: [
+            /* @__PURE__ */ jsx(SearchIcon, {
+              size: size.icon,
+              strokeWidth: 1.5,
+              className: "shrink-0 text-muted-foreground"
+            }),
+            /* @__PURE__ */ jsx(Autocomplete.Input, {
+              placeholder,
+              className: cn("h-full min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground", size.text)
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx(CommandList, {
+          emptyMessage,
+          className: "max-h-80",
+          onPick: (item) => {
+            item.onSelect?.();
+            close();
+          }
+        })
+      ]
+    })
+  });
+}
+var CommandTrigger = forwardRef((props, ref) => {
+  const { trigger } = useContext(CommandContext);
+  useImperativeHandle(ref, () => trigger.current);
+  return /* @__PURE__ */ jsx(DialogTrigger, {
+    ref: trigger,
+    ...props
+  });
+});
+CommandTrigger.displayName = "CommandTrigger";
+var CommandContent = forwardRef(({ items, placeholder, emptyMessage, className, label = "Command menu", ...morph }, ref) => {
+  const { session } = useContext(CommandContext);
+  return /* @__PURE__ */ jsx(DialogContent, {
+    ref,
+    position: "top",
+    size: "lg",
+    showCloseButton: false,
+    "aria-label": label,
+    className: "p-0",
+    ...morph,
+    children: /* @__PURE__ */ jsx(CommandPalette, {
+      items,
+      placeholder,
+      emptyMessage,
+      className
+    }, session)
+  });
+});
+CommandContent.displayName = "CommandContent";
+function CommandScope({ open, onOpenChange, hotkey, children }) {
+  const trigger = useRef(null);
+  const change = useRef(onOpenChange);
+  change.current = onOpenChange;
+  const [session, setSession] = useState(0);
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open)
+      setSession(session + 1);
+  }
+  useEffect(() => {
+    if (!hotkey)
+      return;
+    const onKey = (event) => {
+      if (event.defaultPrevented || !(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== hotkey)
+        return;
+      event.preventDefault();
+      change.current(!open, { trigger: trigger.current ?? undefined });
+    };
+    window.addEventListener("keydown", onKey, open);
+    return () => window.removeEventListener("keydown", onKey, open);
+  }, [hotkey, open]);
+  const ctx = useMemo(() => ({ trigger, close: () => change.current(false, {}), session }), [session]);
+  return /* @__PURE__ */ jsx(CommandContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+      open,
+      onOpenChange,
+      children
+    })
+  });
+}
+function Command({ open, defaultOpen, onOpenChange, hotkey = "k", children }) {
+  return /* @__PURE__ */ jsx(DialogState, {
+    open,
+    defaultOpen,
+    onOpenChange,
+    children: (root) => /* @__PURE__ */ jsx(CommandScope, {
+      ...root,
+      hotkey,
+      children
+    })
+  });
+}
+Command.Trigger = CommandTrigger;
+Command.Content = CommandContent;
+Command.Palette = CommandPalette;
+Command.Shortcut = CommandShortcut;
+var command_default = Command;
+
+export { CommandListRoot, CommandShortcut, CommandList, CommandPalette, CommandTrigger, CommandContent, Command, command_default };

package/dist/shared/components-4xxddc44.js

@@ -0,0 +1,15 @@
+// lib/use-is-mobile.ts
+import { useEffect, useState } from "react";
+function useIsMobile(breakpoint) {
+  const [isMobile, setIsMobile] = useState(undefined);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [breakpoint]);
+  return !!isMobile;
+}
+
+export { useIsMobile };

package/dist/shared/components-4xxtggzp.js

@@ -0,0 +1,110 @@
+import {
+  TimeColumns,
+  pad
+} from "./components-r4jt6hgd.js";
+import {
+  PickerInput,
+  PickerShell
+} from "./components-hzfp4tjb.js";
+import {
+  defaultLocale,
+  dividedColumns,
+  hourCycleOf,
+  parseTimeText
+} from "./components-x2xyckd5.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  cn
+} from "./components-0f0as45n.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 TimePicker({
+  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: cn(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 = TimePicker;
+
+export { TimePicker, time_picker_default };