@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/shared/{components-s5ngg32c.js → components-paa08427.js}

@@ -1,60 +1,77 @@
+"use client";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  fieldIconClasses2
+} from "./components-124epb7f.js";
+import {
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
+import {
+  useFieldBox2
+} from "./components-6zng858q.js";
 import {
-  fieldIconClasses,
-  useFieldBox
-} from "./components-raknhppb.js";
+  useIcon2
+} from "./components-jqpefjsn.js";
 import {
-  useIcon
-} from "./components-zrkzcayz.js";
+  opensInPlace2,
+  inPlaceOffset2,
+  useMorphOrigin2,
+  useMorph2
+} from "./components-awra5sff.js";
 import {
-  MorphSurface
-} from "./components-0q0sqfh4.js";
+  MorphSurface2
+} from "./components-4y816hwp.js";
 import {
-  opensInPlace,
-  inPlaceOffset,
-  useMorphOrigin,
-  useMorph
-} from "./components-hqeq3w9q.js";
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
-  useIsMobile
-} from "./components-c6s6b43g.js";
+  useIsMobile2
+} from "./components-rrbpmfx4.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
+} from "./components-dcc02hs2.js";
 import {
   button_default
-} from "./components-b2wyq2cq.js";
+} from "./components-7d4r7hh1.js";
 import {
   sheet_default
-} from "./components-rr7a6ja9.js";
+} from "./components-658b26nb.js";
 import {
+  InputAdornment2,
+  InputAction2,
   input_default
-} from "./components-h2ajmhwn.js";
+} from "./components-y1w3a6wx.js";
 
 // components/inputs/date-time/picker-shell.tsx
 import { Popover } from "@base-ui/react/popover";
-import { forwardRef, useCallback, useState } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useRef,
+  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 [open, setOpenState] = useControllableState2(openProp, defaultOpen, onOpenChange);
+  const setOpen = (next) => {
+    if (next && props.readOnly)
+      return;
+    setOpenState(next);
+  };
+  const mobile = useIsMobile2(640);
   const shell = mobile ? /* @__PURE__ */ jsx(PickerSheet, {
     open,
     setOpen,
@@ -69,9 +86,9 @@ function PickerShell({ open: openProp, defaultOpen = false, onOpenChange, 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 });
+var PickerField = forwardRef(({ icon, display, placeholder, variant = "bordered", invalid, disabled, readOnly, id, className, ...props }, ref) => {
+  const Icon = useIcon2(icon);
+  const { size: sizeClasses, props: boxProps } = useFieldBox2({ variant, invalid, disabled, readOnly });
   return /* @__PURE__ */ jsxs("button", {
     ref,
     type: "button",
@@ -85,7 +102,7 @@ var PickerField = forwardRef(({ icon, display, placeholder, variant = "bordered"
       /* @__PURE__ */ jsx(Icon, {
         size: sizeClasses.icon,
         strokeWidth: 1.5,
-        className: fieldIconClasses
+        className: fieldIconClasses2
       }),
       /* @__PURE__ */ jsx("span", {
         className: cn2("flex-1 truncate", sizeClasses.text, display ? "text-foreground" : "text-muted-foreground"),
@@ -95,12 +112,42 @@ var PickerField = forwardRef(({ icon, display, placeholder, variant = "bordered"
   });
 });
 PickerField.displayName = "PickerField";
+var EditableField = forwardRef(({
+  icon,
+  variant = "bordered",
+  invalid,
+  disabled,
+  readOnly,
+  className,
+  editor,
+  triggerLabel = "Open calendar",
+  trigger
+}, ref) => {
+  const Icon = useIcon2(icon);
+  const { size: sizeClasses, props: boxProps } = useFieldBox2({ variant, invalid, disabled, readOnly });
+  return /* @__PURE__ */ jsxs("div", {
+    ref,
+    ...boxProps,
+    className: cn2(boxProps.className, "flex w-full min-w-0 items-center", sizeClasses.gap, sizeClasses.control, className),
+    children: [
+      /* @__PURE__ */ jsx(InputAdornment2, {
+        children: trigger(/* @__PURE__ */ jsx(InputAction2, {
+          label: triggerLabel,
+          icon: Icon,
+          disabled: disabled || readOnly
+        }))
+      }),
+      editor
+    ]
+  });
+});
+EditableField.displayName = "EditableField";
 function PanelHeader({
   header,
   closeLabel = "Close",
   close
 }) {
-  const X = useIcon("x");
+  const X = useIcon2("x");
   const sizeClasses = useSize2();
   return /* @__PURE__ */ jsxs("div", {
     className: "flex items-center gap-1 border-b border-border pb-1",
@@ -135,23 +182,41 @@ function PickerPopover({
   hideSource,
   tier = "moderate",
   children,
+  editor,
+  triggerLabel,
   ...field
 }) {
-  const { origin, capture } = useMorphOrigin();
-  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
-  const shape = useShape();
+  const fieldRef = useRef(null);
+  const { origin, capture } = useMorphOrigin2();
+  const morph = useMorph2(open, origin, { from, effect, hideSource, tier });
+  const shape = useShape2();
   const level = Math.min(useSurface2() + 2, 8);
   const handleOpenChange = useCallback((next, details) => {
+    if (!next && editor && (details.reason === "outside-press" || details.reason === "focus-out")) {
+      const event = details.event;
+      const target = event?.relatedTarget ?? event?.target;
+      if (target && fieldRef.current?.contains(target))
+        return;
+    }
     if (next)
-      capture(details);
+      capture(editor ? { event: details.event, trigger: fieldRef.current ?? undefined } : details);
     setOpen(next);
-  }, [capture, setOpen]);
+  }, [capture, setOpen, editor]);
   return /* @__PURE__ */ jsxs(Popover.Root, {
     open,
     onOpenChange: handleOpenChange,
     modal: false,
     children: [
-      /* @__PURE__ */ jsx(Popover.Trigger, {
+      editor ? /* @__PURE__ */ jsx(EditableField, {
+        ref: fieldRef,
+        ...field,
+        editor,
+        triggerLabel,
+        trigger: (button) => /* @__PURE__ */ jsx(Popover.Trigger, {
+          disabled: field.disabled,
+          render: button
+        })
+      }) : /* @__PURE__ */ jsx(Popover.Trigger, {
         disabled: field.disabled,
         render: /* @__PURE__ */ jsx(PickerField, {
           ...field
@@ -159,9 +224,10 @@ function PickerPopover({
       }),
       /* @__PURE__ */ jsx(Popover.Portal, {
         children: /* @__PURE__ */ jsx(Popover.Positioner, {
+          anchor: editor ? fieldRef : undefined,
           side: "bottom",
           align: "start",
-          sideOffset: opensInPlace({ effect, hideSource }) ? inPlaceOffset : 6,
+          sideOffset: opensInPlace2({ effect, hideSource }) ? inPlaceOffset2 : 6,
           className: "z-50 outline-none",
           children: /* @__PURE__ */ jsx(Popover.Popup, {
             ref: morph.popupRef,
@@ -169,10 +235,10 @@ function PickerPopover({
             className: "relative outline-none",
             children: /* @__PURE__ */ jsx(SurfaceProvider2, {
               value: level,
-              children: /* @__PURE__ */ jsx(MorphSurface, {
+              children: /* @__PURE__ */ jsx(MorphSurface2, {
                 morph,
-                bg: SURFACE_BG[level],
-                shadow: SURFACE_SHADOW[3],
+                bg: SURFACE_BG2[level],
+                shadow: SURFACE_SHADOW2[3],
                 radius: shape.container,
                 className: cn2("flex max-w-[calc(100vw-1rem)] flex-col gap-1 p-1", popupClassName),
                 children: /* @__PURE__ */ jsxs("div", {
@@ -195,7 +261,7 @@ function PickerPopover({
     ]
   });
 }
-function PickerSheet({ open, setOpen, header, closeLabel, dir, children, ...field }) {
+function PickerSheet({ open, setOpen, header, closeLabel, dir, children, editor, triggerLabel, ...field }) {
   const {
     initialFocus: _focus,
     popupClassName: _width,
@@ -209,7 +275,15 @@ function PickerSheet({ open, setOpen, header, closeLabel, dir, children, ...fiel
     open,
     onOpenChange: setOpen,
     children: [
-      /* @__PURE__ */ jsx(sheet_default.Trigger, {
+      editor ? /* @__PURE__ */ jsx(EditableField, {
+        ...fieldProps,
+        editor,
+        triggerLabel,
+        trigger: (button) => /* @__PURE__ */ jsx(sheet_default.Trigger, {
+          disabled: field.disabled,
+          render: button
+        })
+      }) : /* @__PURE__ */ jsx(sheet_default.Trigger, {
         disabled: field.disabled,
         render: /* @__PURE__ */ jsx(PickerField, {
           ...fieldProps

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

@@ -1,17 +1,18 @@
+"use client";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
   badge_default
-} from "./components-7r3etddy.js";
+} from "./components-z9n19fyk.js";
 
 // primitives/craft/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function Pane({ verdict, note, children }) {
-  const shape = useShape();
+  const shape = useShape2();
   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-hw9yk32z.js → components-pmfszv7a.js}

@@ -1,29 +1,35 @@
+"use client";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
+import {
+  GooIndicator2
+} from "./components-pw06rbxq.js";
 import {
-  GooIndicator
-} from "./components-chacnk61.js";
+  markInert2
+} from "./components-z3v0n0de.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
+import {
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
   useSurface2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
   useFluidHover2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
+} from "./components-dcc02hs2.js";
 
 // components/navigation/tabs/index.tsx
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
@@ -97,7 +103,7 @@ Tabs2.displayName = "Tabs";
 var TabsList2 = forwardRef(({ children, className, ...props }, ref) => {
   const containerRef = useRef(null);
   const isMouseInside = useRef(false);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
   const substrate = useSurface2();
   const indicatorLevel = Math.min(substrate + 3, 8);
@@ -189,13 +195,13 @@ var TabsList2 = forwardRef(({ children, className, ...props }, ref) => {
       className: cn2("relative inline-flex items-center select-none bg-muted", sizeClasses.segmentPad, shape.container, className),
       ...props,
       children: [
-        selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+        selectedRect && /* @__PURE__ */ jsx(GooIndicator2, {
           rect: selectedRect,
-          className: cn2(SURFACE_BG[indicatorLevel], shape.bg),
-          shadow: SURFACE_SHADOW[indicatorLevel],
+          className: cn2(SURFACE_BG2[indicatorLevel], shape.bg),
+          shadow: SURFACE_SHADOW2[indicatorLevel],
           opacity: isHovering ? 0.85 : 1
         }),
-        selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+        selectedRect && /* @__PURE__ */ jsx(GooIndicator2, {
           rect: isHovering && hoverRect ? hoverRect : selectedRect,
           className: cn2("bg-hover", shape.bg),
           transition: spring2.fast,
@@ -224,7 +230,7 @@ var TabsList2 = forwardRef(({ children, className, ...props }, ref) => {
   });
 });
 TabsList2.displayName = "TabsList";
-var TabItem2 = forwardRef(({ value, icon: Icon, label, _index = 0, className, onClick, ...props }, ref) => {
+var TabItem2 = forwardRef(({ value, icon: Icon, label, href, _index = 0, className, onClick, ...props }, ref) => {
   const internalRef = useRef(null);
   const sizeClasses = useSize2();
   const { registerTab, hoveredIndex, selectedValue, setOptimisticIdx } = useTabsList();
@@ -234,6 +240,8 @@ var TabItem2 = forwardRef(({ value, icon: Icon, label, _index = 0, className, on
   }, [_index, value, registerTab]);
   const isSelected = selectedValue === value;
   const isActive = hoveredIndex === _index || isSelected;
+  const text = typeof label === "string" || typeof label === "number";
+  const labelLayout = text ? "[text-box:trim-both_cap_alphabetic]" : "inline-flex items-center gap-1.5";
   return /* @__PURE__ */ jsxs(TabsPrimitive.Tab, {
     onClick: (e) => {
       setOptimisticIdx(_index);
@@ -247,8 +255,11 @@ var TabItem2 = forwardRef(({ value, icon: Icon, label, _index = 0, className, on
         ref.current = node;
     },
     value,
+    ...href !== undefined && { render: /* @__PURE__ */ jsx("a", {
+      href
+    }), nativeButton: false },
     "data-fluid-hover-index": _index,
-    className: cn2("relative z-10 flex items-center px-3 cursor-pointer bg-transparent border-none outline-none", sizeClasses.segmentItem, sizeClasses.gap, className),
+    className: cn2("relative z-10 flex items-center px-3 cursor-pointer bg-transparent border-none outline-none no-underline", sizeClasses.segmentItem, sizeClasses.gap, className),
     ...props,
     children: [
       Icon && /* @__PURE__ */ jsx(Icon, {
@@ -260,12 +271,13 @@ var TabItem2 = forwardRef(({ value, icon: Icon, label, _index = 0, className, on
         className: cn2("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",
+            className: cn2("col-start-1 row-start-1 invisible weight-semibold", labelLayout),
             "aria-hidden": "true",
+            ref: text ? undefined : markInert2,
             children: label
           }),
           /* @__PURE__ */ jsx("span", {
-            className: cn2("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"),
+            className: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast", labelLayout, isActive ? "text-foreground" : "text-muted-foreground", isSelected ? "weight-semibold" : "weight-normal"),
             children: label
           })
         ]

package/dist/shared/{components-chacnk61.js → components-pw06rbxq.js}

@@ -1,16 +1,17 @@
+"use client";
 import {
-  useReduceMotion
-} from "./components-men63rwj.js";
+  useReduceMotion2
+} from "./components-de99ykt7.js";
 import {
-  GOO_MATRIX,
-  GOO_BLUR_RATIO
-} from "./components-hqeq3w9q.js";
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
-  cn2
-} from "./components-ezxhrmer.js";
+  GOO_MATRIX2,
+  GOO_BLUR_RATIO2
+} from "./components-awra5sff.js";
 import {
-  spring2
-} from "./components-1v7rxytx.js";
+  cn2
+} from "./components-jcnjay5g.js";
 
 // lib/goo-indicator.tsx
 import { animate, motion, useMotionValue } from "motion/react";
@@ -18,7 +19,7 @@ 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) {
+function union2(a, b) {
   if (!a)
     return b;
   const left = Math.min(a.left, b.left);
@@ -57,9 +58,9 @@ function toTarget(rect) {
 }
 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;
+  return Math.min(r, rect.width / 2, rect.height / 2) * GOO_BLUR_RATIO2;
 }
-function GooLayer({ active, blur, box, fill, children }) {
+function GooLayer2({ active, blur, box, fill, children }) {
   const id = `goo-${useId().replace(/:/g, "")}`;
   const flood = useRef(null);
   const probe = useRef(null);
@@ -94,7 +95,7 @@ function GooLayer({ active, blur, box, fill, children }) {
             }),
             /* @__PURE__ */ jsx("feColorMatrix", {
               in: "blur",
-              values: GOO_MATRIX,
+              values: GOO_MATRIX2,
               result: "goo"
             }),
             /* @__PURE__ */ jsx("feFlood", {
@@ -121,7 +122,7 @@ function GooLayer({ active, blur, box, fill, children }) {
     ]
   });
 }
-function GooIndicator({
+function GooIndicator2({
   rect,
   from,
   className,
@@ -129,7 +130,7 @@ function GooIndicator({
   transition = spring2.moderate,
   opacity = 1
 }) {
-  const reduced = useReduceMotion();
+  const reduced = useReduceMotion2();
   const start = from ?? rect;
   const x = useMotionValue(start.left);
   const y = useMotionValue(start.top);
@@ -166,7 +167,7 @@ function GooIndicator({
   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 box = trails.reduce((all, trail) => union2(all, trail.from), union2(read(), rect));
   const drop = (trail) => setTrails((list) => list.filter((t) => t.id !== trail.id));
   return /* @__PURE__ */ jsxs(motion.div, {
     "aria-hidden": true,
@@ -189,7 +190,7 @@ function GooIndicator({
           })
         ]
       }),
-      /* @__PURE__ */ jsxs(GooLayer, {
+      /* @__PURE__ */ jsxs(GooLayer2, {
         active: melting,
         blur,
         box,
@@ -212,5 +213,4 @@ function GooIndicator({
     ]
   });
 }
-
-export { union, GooLayer, GooIndicator };
+export { union2, GooLayer2, GooIndicator2 };