@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

package/dist/shared/components-s5ngg32c.js

@@ -0,0 +1,267 @@
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  fieldIconClasses,
+  useFieldBox
+} from "./components-raknhppb.js";
+import {
+  useIcon
+} from "./components-zrkzcayz.js";
+import {
+  MorphSurface
+} from "./components-0q0sqfh4.js";
+import {
+  opensInPlace,
+  inPlaceOffset,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.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-h2ajmhwn.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, variant = "bordered", invalid, disabled, id, className, ...props }, ref) => {
+  const Icon = useIcon(icon);
+  const { size: sizeClasses, props: boxProps } = useFieldBox({ variant, invalid, disabled });
+  return /* @__PURE__ */ jsxs("button", {
+    ref,
+    type: "button",
+    id,
+    disabled,
+    "aria-invalid": invalid || undefined,
+    ...boxProps,
+    ...props,
+    className: cn2(boxProps.className, "flex w-full min-w-0 items-center text-left cursor-pointer outline-none focus-visible:ring-focus-ring", sizeClasses.gap, sizeClasses.control, 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 };

package/dist/shared/components-sn1rxx1d.js

@@ -0,0 +1,143 @@
+import {
+  defaultLocale,
+  parseDateText
+} from "./components-gz8zf3ec.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  calendar_default
+} from "./components-1z6tdadk.js";
+import {
+  PickerShell,
+  PickerInput
+} from "./components-s5ngg32c.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,
+  variant,
+  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,
+    variant,
+    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-r8eqs7gz.js → components-ta7shw28.js}

@@ -1,9 +1,8 @@
-"use client";
 // lib/row-index.tsx
 import { Children, createContext, isValidElement, useContext } from "react";
 import { jsx, Fragment } from "react/jsx-runtime";
 var RowIndexContext = createContext(0);
-function IndexedRows2({ children }) {
+function IndexedRows({ children }) {
   let index = 0;
   return /* @__PURE__ */ jsx(Fragment, {
     children: Children.map(children, (child) => isValidElement(child) ? /* @__PURE__ */ jsx(RowIndexContext.Provider, {
@@ -12,8 +11,9 @@ function IndexedRows2({ children }) {
     }) : child)
   });
 }
-function useRowIndex2(own) {
+function useRowIndex(own) {
   const position = useContext(RowIndexContext);
   return own ?? position;
 }
-export { IndexedRows2, useRowIndex2 };
+
+export { IndexedRows, useRowIndex };

package/dist/shared/{components-9as3rf68.js → components-vc7vq5nz.js}

@@ -1,14 +1,11 @@
-"use client";
-import {
-  surfaceClasses2
-} from "./components-vf45j12c.js";
 import {
+  surfaceClasses2,
   useSurface2,
   SurfaceProvider2
-} from "./components-dhgk6mbt.js";
+} from "./components-zx6b6yby.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 
 // primitives/surface/index.tsx
 import {

package/dist/shared/{components-ft3zdc79.js → components-vfbhxf5r.js}

@@ -1,18 +1,17 @@
-"use client";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
   badge_default
-} from "./components-4nck8acq.js";
+} from "./components-7r3etddy.js";
 
 // primitives/craft/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function Pane({ verdict, note, children }) {
-  const shape = useShape2();
+  const shape = useShape();
   return /* @__PURE__ */ jsxs("figure", {
     className: cn2("row-span-2 m-0 grid min-w-0 grid-rows-subgrid gap-0 ring-1 ring-border", shape.container),
     children: [

package/dist/shared/components-vynjtrk6.js

@@ -0,0 +1,19 @@
+// lib/popup.ts
+var popupScrollAreaClass = "min-h-0 flex-1 max-h-[inherit]";
+var popupViewportClass = "!h-auto max-h-[inherit] [&>div[style]]:!block [&>div[style]]:!min-w-0 [--scroll-fade-size:32px]";
+var POPUP_NAV_KEYS = [
+  "ArrowDown",
+  "ArrowUp",
+  "ArrowLeft",
+  "ArrowRight",
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "Tab"
+];
+function isDisabledRow(el) {
+  return el.getAttribute("aria-disabled") === "true" || el.hasAttribute("data-disabled");
+}
+
+export { popupScrollAreaClass, popupViewportClass, POPUP_NAV_KEYS, isDisabledRow };