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

package/dist/shared/{components-mattt5jp.js → components-h2ajmhwn.js}

@@ -1,39 +1,25 @@
-"use client";
-import {
-  fieldIconClasses2,
-  fieldAdornmentClasses2,
-  FIELD_ADORNMENT_ICON2,
-  FIELD_ACTION2,
-  FIELD_ACTION_RADIUS2,
-  fieldActionClasses2
-} from "./components-124epb7f.js";
-import {
-  useShape2
-} from "./components-71nbt03m.js";
 import {
   useSize2
-} from "./components-h83az0bz.js";
+} from "./components-0sn7ypjw.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
-  FieldStateContext2,
-  useFieldBox2,
-  focusControlOnPress2
-} from "./components-hdzrqqpx.js";
+  fieldIconClasses,
+  FieldStateContext,
+  useFieldBox,
+  focusControlOnPress
+} from "./components-raknhppb.js";
 import {
-  useControllableState2
-} from "./components-tz1fv35x.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-yhgq0qxx.js";
+} from "./components-59efxjd9.js";
 import {
   SizeProvider2
-} from "./components-dcc02hs2.js";
-import {
-  Label2
-} from "./components-adkarj8n.js";
+} from "./components-jjw69c4c.js";
 
 // components/inputs/input/index.tsx
 import { Field } from "@base-ui/react/field";
@@ -41,7 +27,6 @@ import {
   createContext,
   forwardRef,
   useContext,
-  useLayoutEffect,
   useMemo,
   useRef
 } from "react";
@@ -55,40 +40,29 @@ function useInputGroup() {
 }
 var Input2 = forwardRef(({
   icon: Icon,
-  startAdornment,
-  endAdornment,
   value: valueProp,
   defaultValue = "",
   onChange: onChangeProp,
   variant = "borderless",
   invalid,
   disabled,
-  readOnly,
-  required,
-  type = "text",
-  onSelect,
   size,
   className,
   ...props
 }, ref) => {
-  const [value, onChange] = useControllableState2(valueProp, defaultValue, onChangeProp);
+  const [value, onChange] = useControllableState(valueProp, defaultValue, onChangeProp);
   const inputRef = useRef(null);
-  const box = useFieldBox2({ variant, invalid, disabled, readOnly, required, size });
+  const box = useFieldBox({ variant, invalid, disabled, size });
   const { size: sizeClasses, props: boxProps } = box;
-  const keepSelection = useSelectionAcrossType(inputRef, type);
   return /* @__PURE__ */ jsxs("div", {
-    onMouseDown: focusControlOnPress2(inputRef),
+    onMouseDown: focusControlOnPress(inputRef),
     ...boxProps,
     className: cn2(boxProps.className, "flex items-center", sizeClasses.gap, sizeClasses.control, className),
     children: [
       Icon && /* @__PURE__ */ jsx(Icon, {
         size: sizeClasses.icon,
         strokeWidth: 1.5,
-        className: fieldIconClasses2
-      }),
-      /* @__PURE__ */ jsx(InputAdornment2, {
-        size,
-        children: startAdornment
+        className: fieldIconClasses
       }),
       /* @__PURE__ */ jsx(Field.Control, {
         ref: (node) => {
@@ -99,85 +73,39 @@ var Input2 = forwardRef(({
           else if (ref)
             ref.current = input;
         },
-        type,
-        onSelect: (e) => {
-          keepSelection(e.currentTarget);
-          onSelect?.(e);
-        },
+        type: "text",
         value,
         onChange: (e) => onChange(e.target.value),
         disabled: box.disabled,
-        readOnly: box.readOnly,
-        required: box.required,
         "aria-invalid": box.invalid || undefined,
-        className: cn2("w-full min-w-0 rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, "weight-normal"),
+        className: cn2("w-full rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, "weight-normal"),
         ...props
-      }),
-      /* @__PURE__ */ jsx(InputAdornment2, {
-        size,
-        children: endAdornment
       })
     ]
   });
 });
 Input2.displayName = "Input";
-function useSelectionAcrossType(input, type) {
-  const selection = useRef([null, null]);
-  const lastType = useRef(type);
-  useLayoutEffect(() => {
-    if (lastType.current === type)
-      return;
-    lastType.current = type;
-    const el = input.current;
-    const [start, end] = selection.current;
-    if (!el || start === null || el.ownerDocument.activeElement !== el)
-      return;
-    const restore = () => {
-      try {
-        el.setSelectionRange(start, end);
-      } catch {}
-    };
-    restore();
-    const frame = requestAnimationFrame(restore);
-    return () => cancelAnimationFrame(frame);
-  }, [input, type]);
-  return (el) => {
-    selection.current = [el.selectionStart, el.selectionEnd];
-  };
-}
-function InputAdornment2({ children, size, className }) {
-  const sizeClasses = useSize2(size);
-  if (children == null || children === false || children === "")
-    return null;
-  const node = /* @__PURE__ */ jsx("span", {
-    className: cn2(fieldAdornmentClasses2, FIELD_ADORNMENT_ICON2[sizeClasses.variant], sizeClasses.gap, sizeClasses.text, className),
-    children
-  });
-  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
-    size,
-    children: node
-  }) : node;
-}
-var InputAction2 = forwardRef(({ label, icon: Icon, children, size, className, onMouseDown, ...props }, ref) => {
+var Label2 = forwardRef(({ children, invalid, size, className, ...props }, ref) => {
   const sizeClasses = useSize2(size);
-  const shape = useShape2();
-  return /* @__PURE__ */ jsx("button", {
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("label", {
     ref,
-    type: "button",
-    "aria-label": label,
-    onMouseDown: (e) => {
-      onMouseDown?.(e);
-      e.preventDefault();
-    },
-    className: cn2(fieldActionClasses2, FIELD_ACTION2[sizeClasses.variant], FIELD_ACTION_RADIUS2[shape.variant], className),
+    className: cn2("inline-grid", sizeClasses.text, "data-[disabled]:opacity-50", compact ? "pl-2" : "pl-2.5", className),
     ...props,
-    children: Icon ? /* @__PURE__ */ jsx(Icon, {
-      size: sizeClasses.icon,
-      strokeWidth: 1.5
-    }) : children
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "col-start-1 row-start-1 invisible weight-semibold",
+        "aria-hidden": "true",
+        children
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: cn2("col-start-1 row-start-1", invalid ? "text-destructive" : "text-muted-foreground", "weight-normal"),
+        children
+      })
+    ]
   });
 });
-InputAction2.displayName = "InputAction";
+Label2.displayName = "Label";
 var InputGroup2 = forwardRef(({ children, size, className, ...props }, ref) => {
   const containerRef = useRef(null);
   const { activeIndex, handlers, registerItem } = useFluidHover2(containerRef);
@@ -232,7 +160,7 @@ var InputField = forwardRef(({ label, labelHidden, index, error, disabled, child
           children: label
         })
       }),
-      /* @__PURE__ */ jsx(FieldStateContext2.Provider, {
+      /* @__PURE__ */ jsx(FieldStateContext.Provider, {
         value: fieldState,
         children: children ?? /* @__PURE__ */ jsx(Input2, {
           invalid: !!error,
@@ -252,4 +180,4 @@ InputField.displayName = "InputField";
 Object.assign(InputGroup2, { Field: InputField });
 var input_default = Input2;
 
-export { Input2, InputAdornment2, InputAction2, InputGroup2, input_default };
+export { Input2, Label2, InputGroup2, input_default };

package/dist/shared/{components-m06yq8wk.js → components-hqeq3w9q.js}

@@ -1,17 +1,16 @@
-"use client";
 import {
-  useReduceMotion2
-} from "./components-de99ykt7.js";
+  useReduceMotion
+} from "./components-men63rwj.js";
 import {
   spring2,
   exitFallbackMs2
-} from "./components-3ey0hzpb.js";
+} from "./components-1v7rxytx.js";
 
 // lib/use-morph.ts
 import { animate, clamp, useMotionValue } from "motion/react";
 import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
-var GOO_MATRIX2 = "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10";
-var GOO_BLUR_RATIO2 = 0.5;
+var GOO_MATRIX = "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10";
+var GOO_BLUR_RATIO = 0.5;
 var GOO_SURFACE_BLUR = 8;
 var GOO_RELEASE = 0.3;
 var GOO_SETTLE = 0.1;
@@ -36,11 +35,10 @@ function roundedRectPath({ x, y, w, h, r }) {
   const arc = `A${n(r)} ${n(r)} 0 0 1`;
   return `M${n(x + r)} ${n(y)}` + `H${n(x + w - r)}${arc} ${n(x + w)} ${n(y + r)}` + `V${n(y + h - r)}${arc} ${n(x + w - r)} ${n(y + h)}` + `H${n(x + r)}${arc} ${n(x)} ${n(y + h - r)}` + `V${n(y + r)}${arc} ${n(x + r)} ${n(y)}Z`;
 }
-function radiusOf(el, width, height, fallback = 0) {
-  const style = getComputedStyle(el);
-  const px = (value) => (value.endsWith("%") ? Number.parseFloat(value) / 100 * width : Number.parseFloat(value)) || 0;
-  const r = Math.max(px(style.borderTopLeftRadius), px(style.borderTopRightRadius), px(style.borderBottomRightRadius), px(style.borderBottomLeftRadius));
-  return Math.min(r || fallback, width / 2, height / 2);
+function radiusOf(el, width, height) {
+  const value = getComputedStyle(el).borderTopLeftRadius;
+  const r = value.endsWith("%") ? Number.parseFloat(value) / 100 * width : Number.parseFloat(value);
+  return Math.min(r || 0, width / 2, height / 2);
 }
 function onScreen(rect) {
   return rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.right > 0 && rect.top < innerHeight && rect.left < innerWidth;
@@ -82,7 +80,7 @@ function sourceRect(from, origin, box, target) {
   const rect = el.getBoundingClientRect();
   if (!onScreen(rect))
     return center;
-  return local(rect.left, rect.top, rect.width, rect.height, radiusOf(el, rect.width, rect.height, target.r));
+  return local(rect.left, rect.top, rect.width, rect.height, radiusOf(el, rect.width, rect.height));
 }
 function slideOffset(from, source, target, box) {
   if (from === "left")
@@ -123,13 +121,13 @@ function insetClip(rect, box) {
   const bottom = box.h - rect.y - rect.h;
   return `inset(${rect.y}px ${right}px ${bottom}px ${rect.x}px round ${rect.r}px)`;
 }
-function opensInPlace2({ effect, hideSource = false }) {
+function opensInPlace({ effect, hideSource = false }) {
   return effect === "morph" && hideSource;
 }
-function inPlaceOffset2({ side, anchor }) {
+function inPlaceOffset({ side, anchor }) {
   return side === "top" || side === "bottom" ? -anchor.height : -anchor.width;
 }
-function holdExit2(el, tier) {
+function holdExit(el, tier) {
   return el.animate(null, { duration: exitFallbackMs2(spring2[tier]) });
 }
 function returnFocus(trigger) {
@@ -154,7 +152,7 @@ function pressPoint(event) {
     return;
   return { x: event.clientX, y: event.clientY };
 }
-function useMorphOrigin2() {
+function useMorphOrigin() {
   const origin = useRef({});
   const capture = useCallback((details) => {
     const { trigger, event } = details;
@@ -165,16 +163,8 @@ function useMorphOrigin2() {
   }, []);
   return { origin, capture };
 }
-function useMorph2(open, origin, {
-  from = "trigger",
-  effect = "goo",
-  hideSource = false,
-  tier = "slow",
-  exit,
-  instant,
-  returnFocus: refocus = true
-} = {}, onExited) {
-  const reduced = useReduceMotion2();
+function useMorph(open, origin, { from = "trigger", effect = "goo", hideSource = false, tier = "slow", exit, instant } = {}, onExited) {
+  const reduced = useReduceMotion();
   const resolve = (wanted) => reduced ? "fade" : wanted;
   const resolved = resolve(effect);
   const timing = (effect) => effect === "goo" ? "goo" : tier;
@@ -241,15 +231,9 @@ function useMorph2(open, origin, {
     const { effect, from } = run.current;
     const shaped = drawsShape(effect);
     const box = el.getBoundingClientRect();
-    const target = {
-      x: 0,
-      y: 0,
-      w: box.width,
-      h: box.height,
-      r: Math.min(targetRadius.current, box.width / 2, box.height / 2)
-    };
+    const target = { x: 0, y: 0, w: box.width, h: box.height, r: targetRadius.current };
     const source = sourceRect(from, origin.current ?? {}, box, target);
-    const blur = effect === "goo" ? Math.max(GOO_SURFACE_BLUR, target.r * GOO_BLUR_RATIO2) : 0;
+    const blur = effect === "goo" ? Math.max(GOO_SURFACE_BLUR, target.r * GOO_BLUR_RATIO) : 0;
     const layer = layerBox(source, target, blur * 3);
     geometry.current = { source, target, layer, offset: slideOffset(from, source, target, box), blur };
     const { shapes, copy, bg } = refs;
@@ -286,7 +270,7 @@ function useMorph2(open, origin, {
     const first = !geometry.current;
     if (first && refs.bg.current) {
       const box = popup.getBoundingClientRect();
-      targetRadius.current = radiusOf(refs.bg.current, box.width || Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);
+      targetRadius.current = radiusOf(refs.bg.current, box.width, box.height);
     }
     let controls;
     const begin = () => {
@@ -325,7 +309,7 @@ function useMorph2(open, origin, {
     };
   };
   const closing = (popup) => {
-    returnTo.current = refocus && popup.contains(document.activeElement) ? origin.current?.trigger ?? null : null;
+    returnTo.current = popup.contains(document.activeElement) ? origin.current?.trigger ?? null : null;
     if (!geometry.current) {
       exited.current?.();
       return;
@@ -344,7 +328,7 @@ function useMorph2(open, origin, {
     run.current = { effect: resolve(exit?.effect ?? effect), from: exit?.from ?? from };
     if (exit)
       progress.jump(1);
-    const hold = holdExit2(popup, timing(run.current.effect));
+    const hold = holdExit(popup, timing(run.current.effect));
     measure();
     render(progress.get());
     let controls;
@@ -387,4 +371,5 @@ function useMorph2(open, origin, {
   }, []);
   return { refs, popupRef, popup, gooId, effect: resolved, progress };
 }
-export { GOO_MATRIX2, GOO_BLUR_RATIO2, opensInPlace2, inPlaceOffset2, holdExit2, useMorphOrigin2, useMorph2 };
+
+export { GOO_MATRIX, GOO_BLUR_RATIO, opensInPlace, inPlaceOffset, holdExit, useMorphOrigin, useMorph };

package/dist/shared/{components-7qx17na9.js → components-hw9yk32z.js}

@@ -1,35 +1,29 @@
-"use client";
-import {
-  spring2
-} from "./components-3ey0hzpb.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
-import {
-  GooIndicator2
-} from "./components-pwayrkw9.js";
+} from "./components-ezxhrmer.js";
 import {
-  markInert2
-} from "./components-z3v0n0de.js";
+  GooIndicator
+} from "./components-chacnk61.js";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSize2
-} from "./components-h83az0bz.js";
-import {
-  SURFACE_BG2,
-  SURFACE_SHADOW2
-} from "./components-vf45j12c.js";
+} from "./components-0sn7ypjw.js";
 import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
   useSurface2
-} from "./components-dhgk6mbt.js";
+} from "./components-zx6b6yby.js";
 import {
   useFluidHover2
-} from "./components-yhgq0qxx.js";
+} from "./components-59efxjd9.js";
 import {
   SizeProvider2
-} from "./components-dcc02hs2.js";
+} from "./components-jjw69c4c.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/navigation/tabs/index.tsx
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
@@ -103,7 +97,7 @@ Tabs2.displayName = "Tabs";
 var TabsList2 = forwardRef(({ children, className, ...props }, ref) => {
   const containerRef = useRef(null);
   const isMouseInside = useRef(false);
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const substrate = useSurface2();
   const indicatorLevel = Math.min(substrate + 3, 8);
@@ -192,16 +186,16 @@ var TabsList2 = forwardRef(({ children, className, ...props }, ref) => {
           return;
         setHoveredIndex(null);
       },
-      className: cn2("relative inline-flex items-center select-none bg-well", sizeClasses.segmentPad, shape.container, className),
+      className: cn2("relative inline-flex items-center select-none bg-muted", sizeClasses.segmentPad, shape.container, className),
       ...props,
       children: [
-        selectedRect && /* @__PURE__ */ jsx(GooIndicator2, {
+        selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
           rect: selectedRect,
-          className: cn2(SURFACE_BG2[indicatorLevel], shape.bg),
-          shadow: SURFACE_SHADOW2[indicatorLevel],
+          className: cn2(SURFACE_BG[indicatorLevel], shape.bg),
+          shadow: SURFACE_SHADOW[indicatorLevel],
           opacity: isHovering ? 0.85 : 1
         }),
-        selectedRect && /* @__PURE__ */ jsx(GooIndicator2, {
+        selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
           rect: isHovering && hoverRect ? hoverRect : selectedRect,
           className: cn2("bg-hover", shape.bg),
           transition: spring2.fast,
@@ -230,7 +224,7 @@ var TabsList2 = forwardRef(({ children, className, ...props }, ref) => {
   });
 });
 TabsList2.displayName = "TabsList";
-var TabItem2 = forwardRef(({ value, icon: Icon, label, href, _index = 0, className, onClick, ...props }, ref) => {
+var TabItem2 = forwardRef(({ value, icon: Icon, label, _index = 0, className, onClick, ...props }, ref) => {
   const internalRef = useRef(null);
   const sizeClasses = useSize2();
   const { registerTab, hoveredIndex, selectedValue, setOptimisticIdx } = useTabsList();
@@ -240,8 +234,6 @@ var TabItem2 = forwardRef(({ value, icon: Icon, label, href, _index = 0, classNa
   }, [_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);
@@ -255,11 +247,8 @@ var TabItem2 = forwardRef(({ value, icon: Icon, label, href, _index = 0, classNa
         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 no-underline", sizeClasses.segmentItem, sizeClasses.gap, className),
+    className: cn2("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, {
@@ -271,13 +260,12 @@ var TabItem2 = forwardRef(({ value, icon: Icon, label, href, _index = 0, classNa
         className: cn2("inline-grid whitespace-nowrap", sizeClasses.text),
         children: [
           /* @__PURE__ */ jsx("span", {
-            className: cn2("col-start-1 row-start-1 invisible weight-semibold", labelLayout),
+            className: "col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold",
             "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", labelLayout, 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 [text-box:trim-both_cap_alphabetic]", isActive ? "text-foreground" : "text-muted-foreground", isSelected ? "weight-semibold" : "weight-normal"),
             children: label
           })
         ]