@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-zvb11ker.js

@@ -0,0 +1,288 @@
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  useFluidHover
+} from "./components-e46kf6cp.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  GooIndicator
+} from "./components-kf2ehztc.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/navigation/tabs/index.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  Children,
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TabsValueOrderContext = createContext(null);
+var TabsListContext = createContext(null);
+function useTabsList() {
+  const ctx = useContext(TabsListContext);
+  if (!ctx)
+    throw new Error("TabItem must be used within a TabsList");
+  return ctx;
+}
+var Tabs = forwardRef(({ value, onValueChange, selectedIndex, onSelect, defaultValue, defaultSelectedIndex, size, children, ...props }, ref) => {
+  const [valueOrder, setValueOrder] = useState([]);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const updateValueOrder = useCallback((order) => {
+    setValueOrder((current) => {
+      if (current.length === order.length && current.every((v, i) => v === order[i])) {
+        return current;
+      }
+      return order;
+    });
+  }, []);
+  const resolvedValue = value ?? (selectedIndex != null ? valueOrder[selectedIndex] : uncontrolledValue ?? valueOrder[defaultSelectedIndex ?? 0]);
+  const handleValueChange = useCallback((newValue) => {
+    const v = newValue;
+    if (value === undefined && selectedIndex == null) {
+      setUncontrolledValue(v);
+    }
+    onValueChange?.(v);
+    if (onSelect) {
+      const idx = valueOrder.indexOf(v);
+      if (idx !== -1)
+        onSelect(idx);
+    }
+  }, [onValueChange, onSelect, valueOrder, value, selectedIndex]);
+  const root = /* @__PURE__ */ jsx(TabsValueOrderContext.Provider, {
+    value: {
+      valueOrder,
+      setValueOrder: updateValueOrder,
+      selectedValue: resolvedValue
+    },
+    children: /* @__PURE__ */ jsx(TabsPrimitive.Root, {
+      ref,
+      value: resolvedValue ?? "",
+      onValueChange: handleValueChange,
+      ...props,
+      children
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: root
+  }) : root;
+});
+Tabs.displayName = "Tabs";
+var TabsList = forwardRef(({ children, className, ...props }, ref) => {
+  const containerRef = useRef(null);
+  const isMouseInside = useRef(false);
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const substrate = useSurface();
+  const indicatorLevel = Math.min(substrate + 3, 8);
+  const valueOrderCtx = useContext(TabsValueOrderContext);
+  const [optimisticIdx, setOptimisticIdx] = useState(null);
+  const values = Children.toArray(children).filter(isValidElement).map((child) => child.props.value).filter((v) => typeof v === "string");
+  const valueOrderKey = values.join(",");
+  const setValueOrder = valueOrderCtx?.setValueOrder;
+  useLayoutEffect(() => {
+    setValueOrder?.(values);
+  }, [setValueOrder, valueOrderKey]);
+  const {
+    activeIndex: hoveredIndex,
+    setActiveIndex: setHoveredIndex,
+    itemRects,
+    handlers,
+    registerItem,
+    measureItems
+  } = useFluidHover(containerRef, { axis: "x" });
+  const registerTab = useCallback((index, _value, el) => {
+    registerItem(index, el);
+  }, [registerItem]);
+  useEffect(() => {
+    measureItems();
+  }, [measureItems, children]);
+  const handleMouseMove = useCallback((e) => {
+    isMouseInside.current = true;
+    handlers.onMouseMove(e);
+  }, [handlers]);
+  const handleMouseLeave = useCallback(() => {
+    isMouseInside.current = false;
+    handlers.onMouseLeave();
+  }, [handlers]);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const selectedValue = valueOrderCtx?.selectedValue;
+  const selectedIdx = selectedValue !== undefined ? values.indexOf(selectedValue) : -1;
+  useEffect(() => {
+    setOptimisticIdx(selectedIdx >= 0 ? selectedIdx : null);
+  }, [selectedIdx]);
+  const activeSelectedIdx = optimisticIdx;
+  const selectedRect = activeSelectedIdx !== null ? itemRects[activeSelectedIdx] : null;
+  const hoverRect = hoveredIndex !== null ? itemRects[hoveredIndex] : null;
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const isHoveringSelected = hoveredIndex === activeSelectedIdx;
+  const isHovering = hoveredIndex !== null && !isHoveringSelected;
+  const indexedChildren = Children.map(children, (child, i) => {
+    if (isValidElement(child) && typeof child.type !== "string") {
+      return cloneElement(child, { _index: i });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx(TabsListContext.Provider, {
+    value: {
+      registerTab,
+      hoveredIndex,
+      selectedValue,
+      setOptimisticIdx
+    },
+    children: /* @__PURE__ */ jsxs(TabsPrimitive.List, {
+      activateOnFocus: true,
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onFocus: (e) => {
+        const trigger = e.target.closest('[role="tab"]');
+        if (!trigger)
+          return;
+        const indexAttr = trigger.getAttribute("data-fluid-hover-index");
+        if (indexAttr != null) {
+          const idx = Number(indexAttr);
+          setHoveredIndex(idx);
+          setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+        }
+      },
+      onBlur: (e) => {
+        if (containerRef.current?.contains(e.relatedTarget))
+          return;
+        setFocusedIndex(null);
+        if (isMouseInside.current)
+          return;
+        setHoveredIndex(null);
+      },
+      className: cn("relative inline-flex items-center select-none bg-muted", sizeClasses.segmentPad, shape.container, className),
+      ...props,
+      children: [
+        selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+          rect: selectedRect,
+          className: cn(SURFACE_BG[indicatorLevel], shape.bg),
+          shadow: SURFACE_SHADOW[indicatorLevel],
+          opacity: isHovering ? 0.85 : 1
+        }),
+        selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+          rect: isHovering && hoverRect ? hoverRect : selectedRect,
+          className: cn("bg-hover", shape.bg),
+          transition: spring.fast,
+          opacity: isHovering ? 0.4 : 0
+        }),
+        /* @__PURE__ */ jsx(AnimatePresence, {
+          children: focusRect && /* @__PURE__ */ jsx(motion.div, {
+            className: cn("absolute pointer-events-none z-20 border border-focus-ring", shape.focusRing),
+            initial: false,
+            animate: {
+              left: focusRect.left - 2,
+              top: focusRect.top - 2,
+              width: focusRect.width + 4,
+              height: focusRect.height + 4
+            },
+            exit: { opacity: 0, transition: spring.fast.exit },
+            transition: {
+              ...spring.fast,
+              opacity: { duration: spring.fast.duration }
+            }
+          })
+        }),
+        indexedChildren
+      ]
+    })
+  });
+});
+TabsList.displayName = "TabsList";
+var TabItem = forwardRef(({ value, icon: Icon, label, _index = 0, className, onClick, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const sizeClasses = useSize();
+  const { registerTab, hoveredIndex, selectedValue, setOptimisticIdx } = useTabsList();
+  useEffect(() => {
+    registerTab(_index, value, internalRef.current);
+    return () => registerTab(_index, value, null);
+  }, [_index, value, registerTab]);
+  const isSelected = selectedValue === value;
+  const isActive = hoveredIndex === _index || isSelected;
+  return /* @__PURE__ */ jsxs(TabsPrimitive.Tab, {
+    onClick: (e) => {
+      setOptimisticIdx(_index);
+      onClick?.(e);
+    },
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    value,
+    "data-fluid-hover-index": _index,
+    className: cn("relative z-10 flex items-center px-3 cursor-pointer bg-transparent border-none outline-none", sizeClasses.segmentItem, sizeClasses.gap, className),
+    ...props,
+    children: [
+      Icon && /* @__PURE__ */ jsx(Icon, {
+        size: sizeClasses.icon,
+        strokeWidth: isActive ? 2 : 1.5,
+        className: cn("transition-[color,stroke-width] duration-fast", isActive ? "text-foreground" : "text-muted-foreground")
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: cn("inline-grid whitespace-nowrap", sizeClasses.text),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold",
+            "aria-hidden": "true",
+            children: label
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: cn("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", isActive ? "text-foreground" : "text-muted-foreground", isSelected ? "weight-semibold" : "weight-normal"),
+            children: label
+          })
+        ]
+      })
+    ]
+  });
+});
+TabItem.displayName = "TabItem";
+var TabPanel = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Panel, {
+    ref,
+    className: cn("outline-none", className),
+    ...props
+  });
+});
+TabPanel.displayName = "TabPanel";
+Object.assign(Tabs, { List: TabsList, Item: TabItem, Panel: TabPanel });
+var tabs_default = Tabs;
+
+export { Tabs, TabsList, TabItem, TabPanel, tabs_default };

package/dist/shared/components-zx2hr57f.js

@@ -0,0 +1,124 @@
+import {
+  PickerInput,
+  PickerShell
+} from "./components-hzfp4tjb.js";
+import {
+  ScrollColumn,
+  defaultLocale,
+  dividedColumns,
+  fieldLabel,
+  parseMonthText
+} from "./components-x2xyckd5.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/inputs/date-time/month-picker/index.tsx
+import { addYears, endOfYear, format, startOfMonth, startOfYear } from "date-fns";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MonthPicker({
+  value: valueProp,
+  defaultValue = null,
+  onValueChange,
+  locale = defaultLocale,
+  placeholder,
+  startMonth,
+  endMonth,
+  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 today = useMemo(() => new Date, []);
+  const start = startOfMonth(startMonth ?? startOfYear(addYears(today, -100)));
+  const end = startOfMonth(endMonth ?? endOfYear(addYears(today, 50)));
+  const year = value?.getFullYear() ?? today.getFullYear();
+  const formatted = value ? format(value, "LLLL y", { locale }) : "";
+  const pick = (date) => setValue(startOfMonth(date < start ? start : date > end ? end : date));
+  const readMonth = (text) => {
+    if (!text.trim()) {
+      setValue(null);
+      return true;
+    }
+    const read = parseMonthText(text, locale);
+    if (!read || read < start || read > end)
+      return false;
+    setValue(startOfMonth(read));
+    return true;
+  };
+  const months = useMemo(() => Array.from({ length: 12 }, (_, m) => ({
+    value: m,
+    label: format(new Date(2000, m, 1), "LLLL", { locale }),
+    disabled: new Date(year, m, 1) < start || new Date(year, m, 1) > end
+  })), [locale, year, start.getTime(), end.getTime()]);
+  const years = useMemo(() => Array.from({ length: end.getFullYear() - start.getFullYear() + 1 }, (_, i) => ({
+    value: start.getFullYear() + i,
+    label: String(start.getFullYear() + i)
+  })), [start.getFullYear(), end.getFullYear()]);
+  return /* @__PURE__ */ jsx(PickerShell, {
+    open,
+    onOpenChange: setOpen,
+    size,
+    invalid,
+    disabled,
+    icon: "calendar",
+    display: formatted,
+    placeholder,
+    header: /* @__PURE__ */ jsx(PickerInput, {
+      ref: input,
+      "aria-label": placeholder ?? "Month",
+      placeholder,
+      formatted,
+      onText: readMonth,
+      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: cn(dividedColumns, "h-56"),
+      children: [
+        /* @__PURE__ */ jsx(ScrollColumn, {
+          label: fieldLabel(locale, "month"),
+          options: months,
+          value: value?.getMonth() ?? null,
+          follow: value?.getMonth() ?? today.getMonth(),
+          onValueChange: (m) => pick(new Date(year, m, 1)),
+          className: "min-w-0 flex-1"
+        }),
+        /* @__PURE__ */ jsx(ScrollColumn, {
+          label: fieldLabel(locale, "year"),
+          options: years,
+          value: value?.getFullYear() ?? null,
+          follow: year,
+          onValueChange: (y) => pick(new Date(y, value?.getMonth() ?? today.getMonth(), 1)),
+          className: "min-w-0 flex-1"
+        })
+      ]
+    })
+  });
+}
+var month_picker_default = MonthPicker;
+
+export { MonthPicker, month_picker_default };