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

package/dist/shared/{components-px2zm7dc.js → components-q5xj5c16.js}

@@ -1,16 +1,15 @@
-"use client";
-import {
-  spring2
-} from "./components-3ey0hzpb.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
   button_default
-} from "./components-9sttq78t.js";
+} from "./components-b2wyq2cq.js";
 import {
-  useControllableState2
-} from "./components-tz1fv35x.js";
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
 
 // primitives/motion/index.tsx
 import { MotionConfig, motion } from "motion/react";
@@ -25,7 +24,7 @@ function Motion2({
   className,
   children
 }) {
-  const [shown, setShown] = useControllableState2(show, defaultShow, onShowChange);
+  const [shown, setShown] = useControllableState(show, defaultShow, onShowChange);
   const enter = spring2[tier];
   const leave = sameExit ? enter : enter.exit;
   return /* @__PURE__ */ jsx(MotionConfig, {

package/dist/shared/components-raknhppb.js

@@ -0,0 +1,64 @@
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+
+// lib/field-classes.ts
+import { cva } from "class-variance-authority";
+import { createContext, useContext } from "react";
+var fieldVariants = cva([
+  "group/field ring-1 cursor-text transition-[background-color,box-shadow,opacity] duration-fast",
+  "hover:bg-muted/50 hover:ring-border data-[active]:bg-muted/50 data-[active]:ring-border",
+  "focus-within:!bg-card focus-within:ring-border",
+  "data-[invalid]:!ring-destructive/50 data-[invalid]:hover:bg-destructive-light/60 data-[invalid]:data-[active]:bg-destructive-light/60",
+  "data-[disabled]:ring-border data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
+], {
+  variants: {
+    variant: {
+      borderless: "bg-transparent ring-transparent",
+      bordered: "bg-transparent ring-border"
+    }
+  },
+  defaultVariants: {
+    variant: "borderless"
+  }
+});
+var fieldIconClasses = "shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-hover/field:text-foreground group-hover/field:stroke-[2] group-data-[active]/field:text-foreground group-data-[active]/field:stroke-[2] group-focus-within/field:text-foreground group-focus-within/field:stroke-[2]";
+var FieldStateContext = createContext(null);
+var FIELD_PX = {
+  default: "px-2.5",
+  compact: "px-2"
+};
+function useFieldBox({ variant, invalid, disabled, active, size }) {
+  const field = useContext(FieldStateContext);
+  const shape = useShape();
+  const sizeClasses = useSize2(size);
+  const isInvalid = invalid ?? field?.invalid ?? false;
+  const isDisabled = disabled ?? field?.disabled ?? false;
+  return {
+    size: sizeClasses,
+    invalid: isInvalid,
+    disabled: isDisabled,
+    props: {
+      "data-active": (active ?? field?.active) || undefined,
+      "data-invalid": isInvalid || undefined,
+      "data-disabled": isDisabled || undefined,
+      className: cn2(fieldVariants({ variant }), shape.input, FIELD_PX[sizeClasses.variant])
+    }
+  };
+}
+function focusControlOnPress(control) {
+  return (e) => {
+    if (e.target === control.current)
+      return;
+    e.preventDefault();
+    control.current?.focus();
+  };
+}
+
+export { fieldVariants, fieldIconClasses, FieldStateContext, useFieldBox, focusControlOnPress };

package/dist/shared/{components-8rb25gbe.js → components-rr7a6ja9.js}

@@ -1,24 +1,21 @@
-"use client";
 import {
-  useMorph2
-} from "./components-awra5sff.js";
+  MorphSurface
+} from "./components-0q0sqfh4.js";
 import {
-  cn2
-} from "./components-jcnjay5g.js";
-import {
-  MorphSurface2
-} from "./components-4y816hwp.js";
+  useMorph
+} from "./components-hqeq3w9q.js";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  SURFACE_BG2,
-  SURFACE_SHADOW2
-} from "./components-vf45j12c.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-dhgk6mbt.js";
+} from "./components-zx6b6yby.js";
 import {
   useDialogState2,
   DialogTrigger2,
@@ -28,7 +25,7 @@ import {
   DialogTitle2,
   DialogDescription2,
   DialogState2
-} from "./components-t50hrswb.js";
+} from "./components-zfnmn5d4.js";
 
 // components/overlays/sheet/index.tsx
 import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
@@ -38,11 +35,10 @@ import {
   forwardRef,
   useContext,
   useImperativeHandle,
-  useLayoutEffect,
   useState
 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var SheetContext = createContext({ side: "bottom", swiped: false, setContentSide: () => {} });
+var SheetContext = createContext({ side: "bottom", swiped: false });
 var SWIPE = {
   top: "up",
   right: "right",
@@ -57,39 +53,18 @@ var PLACEMENT = {
 };
 var DRAWER_OFFSET = 4;
 var INDENT_RADIUS = { pill: "data-[active]:rounded-3xl", rounded: "data-[active]:rounded-xl" };
-var SheetContent2 = forwardRef(({
-  from,
-  effect,
-  hideSource,
-  tier,
-  container,
-  side: sideProp,
-  initialFocus,
-  finalFocus,
-  popupClassName,
-  className,
-  children,
-  ...props
-}, ref) => {
-  const { side: rootSide, swiped, setContentSide } = useContext(SheetContext);
-  const side = sideProp ?? rootSide;
-  useLayoutEffect(() => {
-    if (!sideProp)
-      return;
-    setContentSide(sideProp);
-    return () => setContentSide(undefined);
-  }, [sideProp, setContentSide]);
+var SheetContent2 = forwardRef(({ from, effect, hideSource, tier, container, className, children, ...props }, ref) => {
+  const { side, swiped } = useContext(SheetContext);
   const { open, origin } = useDialogState2();
-  const morph = useMorph2(open, origin, {
+  const morph = useMorph(open, origin, {
     from: from ?? side,
     effect,
     hideSource,
     tier,
-    exit: swiped ? { effect: "slide", from: side } : undefined,
-    returnFocus: typeof finalFocus === "boolean" ? finalFocus : finalFocus === undefined
+    exit: swiped ? { effect: "slide", from: side } : undefined
   });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
-  const shape = useShape2();
+  const shape = useShape();
   const level = Math.min(useSurface2() + DRAWER_OFFSET, 8);
   const edge = side === "top" || side === "bottom";
   return /* @__PURE__ */ jsxs(DrawerPrimitive.Portal, {
@@ -106,15 +81,13 @@ var SheetContent2 = forwardRef(({
         children: /* @__PURE__ */ jsx(DrawerPrimitive.Popup, {
           ref: morph.popupRef,
           ...props,
-          initialFocus,
-          finalFocus,
-          className: cn2("absolute flex flex-col focus:outline-none", PLACEMENT[side], "[transform:translate(var(--drawer-swipe-movement-x),calc(var(--drawer-snap-point-offset)_+_var(--drawer-swipe-movement-y)))]", "transition-[transform] duration-slow", popupClassName),
+          className: cn2("absolute flex flex-col focus:outline-none", PLACEMENT[side], "[transform:translate(var(--drawer-swipe-movement-x),calc(var(--drawer-snap-point-offset)_+_var(--drawer-swipe-movement-y)))]", "transition-[transform] duration-slow"),
           children: /* @__PURE__ */ jsx(SurfaceProvider2, {
             value: level,
-            children: /* @__PURE__ */ jsxs(MorphSurface2, {
+            children: /* @__PURE__ */ jsxs(MorphSurface, {
               morph,
-              bg: SURFACE_BG2[level],
-              shadow: SURFACE_SHADOW2[level],
+              bg: SURFACE_BG[level],
+              shadow: SURFACE_SHADOW[level],
               radius: shape.container,
               className: cn2("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-6", edge && "pt-3", className),
               children: [
@@ -133,7 +106,7 @@ var SheetContent2 = forwardRef(({
 });
 SheetContent2.displayName = "SheetContent";
 var SheetIndent2 = forwardRef(({ className, ...props }, ref) => {
-  const shape = useShape2();
+  const shape = useShape();
   return /* @__PURE__ */ jsx(DrawerPrimitive.Indent, {
     ref,
     className: cn2("origin-top transition-[transform] duration-slow data-[active]:scale-[0.96] data-[active]:overflow-hidden", INDENT_RADIUS[shape.variant], className),
@@ -149,14 +122,11 @@ function Sheet2({
   side = "bottom",
   snapPoints,
   defaultSnapPoint,
-  modal = true,
-  disablePointerDismissal
+  modal = true
 }) {
   const [swiped, setSwiped] = useState(false);
-  const [contentSide, setContentSide] = useState();
-  const edge = contentSide ?? side;
   return /* @__PURE__ */ jsx(SheetContext.Provider, {
-    value: { side: edge, swiped, setContentSide },
+    value: { side, swiped },
     children: /* @__PURE__ */ jsx(DialogState2, {
       open,
       defaultOpen,
@@ -164,15 +134,13 @@ function Sheet2({
       children: (root) => /* @__PURE__ */ jsx(DrawerPrimitive.Root, {
         open: root.open,
         onOpenChange: (next, details) => {
+          setSwiped(!next && details.reason === "swipe");
           root.onOpenChange(next, details);
-          if (!details.isCanceled)
-            setSwiped(!next && details.reason === "swipe");
         },
-        swipeDirection: SWIPE[edge],
+        swipeDirection: SWIPE[side],
         snapPoints,
         defaultSnapPoint,
         modal,
-        disablePointerDismissal,
         children
       })
     })

package/dist/shared/{components-5012r6gr.js → components-s083f38z.js}

@@ -1,34 +1,30 @@
-"use client";
 import {
-  useIcon2
-} from "./components-jqpefjsn.js";
+  useIcon
+} from "./components-zrkzcayz.js";
 import {
-  useReduceMotion2
-} from "./components-de99ykt7.js";
+  useReduceMotion
+} from "./components-men63rwj.js";
 import {
-  spring2
-} from "./components-3ey0hzpb.js";
+  GooFilter
+} from "./components-0q0sqfh4.js";
 import {
-  GOO_BLUR_RATIO2
-} from "./components-awra5sff.js";
+  GOO_BLUR_RATIO
+} from "./components-hqeq3w9q.js";
 import {
   cn2
-} from "./components-jcnjay5g.js";
-import {
-  GooFilter2
-} from "./components-4y816hwp.js";
+} from "./components-ezxhrmer.js";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSize2
-} from "./components-h83az0bz.js";
-import {
-  useSurface2
-} from "./components-dhgk6mbt.js";
+} from "./components-0sn7ypjw.js";
 import {
   Tooltip2
-} from "./components-cwg1d0w6.js";
+} from "./components-ng72k97e.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/copy/index.tsx
 import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
@@ -49,7 +45,7 @@ var sheet = (at) => ({ x: at * UNIT, y: at * UNIT, w: 14 * UNIT, h: 14 * UNIT, r
 var BACK = sheet(2);
 var FRONT = sheet(8);
 var DISC_RECT = { x: (GLYPH - DISC) / 2, y: (GLYPH - DISC) / 2, w: DISC, h: DISC, r: DISC / 2 };
-var BLUR = DISC / 2 * GOO_BLUR_RATIO2;
+var BLUR = DISC / 2 * GOO_BLUR_RATIO;
 var LAYER = { at: DISC_RECT.x - BLUR * 3, size: DISC + BLUR * 6 };
 var TONE_BG = { copied: "bg-status-success", error: "bg-status-error" };
 var TONE_TEXT = { copied: "text-status-success", error: "text-status-error" };
@@ -75,7 +71,7 @@ function CopyDisc({ status }) {
   const back = useRef(null);
   const front = useRef(null);
   const progress = useMotionValue(0);
-  const reduced = useReduceMotion2();
+  const reduced = useReduceMotion();
   const gooId = `copy-goo-${useId().replace(/:/g, "")}`;
   const tone = useRef("copied");
   const on = status !== "idle";
@@ -103,7 +99,7 @@ function CopyDisc({ status }) {
     className: "pointer-events-none absolute",
     style: { left: LAYER.at, top: LAYER.at, width: LAYER.size, height: LAYER.size },
     children: [
-      /* @__PURE__ */ jsx(GooFilter2, {
+      /* @__PURE__ */ jsx(GooFilter, {
         id: gooId,
         blur: BLUR
       }),
@@ -180,62 +176,26 @@ function CopyGlyph({
     ]
   });
 }
-var DARK_CHIP_BG = {
-  1: "dark:bg-surface-1",
-  2: "dark:bg-surface-2",
-  3: "dark:bg-surface-3",
-  4: "dark:bg-surface-4",
-  5: "dark:bg-surface-5",
-  6: "dark:bg-surface-6",
-  7: "dark:bg-surface-7",
-  8: "dark:bg-surface-8"
-};
-var LABELS = {
-  copy: "Copy to clipboard",
-  copied: "Copied",
-  failed: "Copy failed",
-  word: "Copy",
-  failedWord: "Failed"
-};
-var Copy2 = forwardRef(({
-  value,
-  children,
-  label,
-  onCopy,
-  disabled,
-  variant = "icon",
-  align = "right",
-  size,
-  className,
-  labels,
-  "aria-label": ariaLabel,
-  ...props
-}, ref) => {
-  const CopyIcon = useIcon2("copy");
+var Copy2 = forwardRef(({ value, label, onCopy, disabled, variant = "icon", align = "right", size, className, ...props }, ref) => {
+  const CopyIcon = useIcon("copy");
   const [status, setStatus] = useState("idle");
   const [copyCount, setCopyCount] = useState(0);
   const [tooltipState, setTooltipState] = useState("idle");
   const timeoutRef = useRef(null);
   const tooltipVisibleRef = useRef(false);
   const tooltipWasVisibleRef = useRef(false);
-  const textRef = useRef(null);
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2(size);
-  const chipLevel = Math.min(useSurface2() + 3, 8);
-  const words = { ...LABELS, ...labels };
-  const chip = variant === "chip";
-  const glyph = variant === "glyph";
-  const compact = sizeClasses.variant === "compact";
-  const rowPy = compact ? "py-1" : "py-2";
+  const rowPy = sizeClasses.variant === "compact" ? "py-1" : "py-2";
   const generatedId = useId();
   const labelId = label ? `${generatedId}-label` : undefined;
   const buttonId = `${generatedId}-button`;
   const handlePointerDown = useCallback(() => {
     tooltipWasVisibleRef.current = tooltipVisibleRef.current;
   }, []);
-  const copyViaExecCommand = useCallback((text) => {
+  const copyViaExecCommand = useCallback(() => {
     const textarea = document.createElement("textarea");
-    textarea.value = text;
+    textarea.value = value;
     textarea.setAttribute("readonly", "");
     textarea.style.position = "fixed";
     textarea.style.opacity = "0";
@@ -249,16 +209,15 @@ var Copy2 = forwardRef(({
     }
     document.body.removeChild(textarea);
     return ok;
-  }, []);
+  }, [value]);
   const handleCopy = useCallback(async () => {
     if (disabled)
       return;
-    const text = value ?? textRef.current?.textContent ?? "";
     let ok = true;
     try {
-      await navigator.clipboard.writeText(text);
+      await navigator.clipboard.writeText(value);
     } catch {
-      ok = copyViaExecCommand(text);
+      ok = copyViaExecCommand();
     }
     setStatus(ok ? "copied" : "error");
     setCopyCount((c) => c + 1);
@@ -287,94 +246,6 @@ var Copy2 = forwardRef(({
   const handleMouseLeave = useCallback(() => {
     setTooltipState((prev) => prev === "copied" ? "suppressed" : prev);
   }, []);
-  const announcement = /* @__PURE__ */ jsx("span", {
-    role: "status",
-    className: "sr-only",
-    children: status !== "idle" && /* @__PURE__ */ jsx("span", {
-      children: status === "error" ? words.failed : words.copied
-    }, copyCount)
-  });
-  if (chip) {
-    return /* @__PURE__ */ jsxs("span", {
-      ref,
-      className: cn2("relative inline-flex rounded-box bg-muted", DARK_CHIP_BG[chipLevel], disabled && "opacity-50 pointer-events-none", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("button", {
-          id: buttonId,
-          type: "button",
-          onPointerDown: handlePointerDown,
-          onClick: handleCopy,
-          disabled,
-          "aria-label": ariaLabel,
-          className: cn2("group relative inline-flex cursor-pointer select-none items-center gap-1 rounded-box px-1 py-0.5 text-foreground outline-none", "focus-visible:ring-1 focus-visible:ring-focus-ring"),
-          children: [
-            /* @__PURE__ */ jsx("span", {
-              "aria-hidden": true,
-              className: "pointer-events-none absolute inset-0 rounded-box bg-hover opacity-0 transition-opacity duration-fast group-hover:opacity-100"
-            }),
-            /* @__PURE__ */ jsx("span", {
-              ref: textRef,
-              className: cn2("relative font-mono", compact ? "text-caption-compact" : "text-caption"),
-              children: children ?? value
-            }),
-            !ariaLabel && /* @__PURE__ */ jsxs("span", {
-              className: "sr-only",
-              children: [
-                ", ",
-                words.copy
-              ]
-            }),
-            /* @__PURE__ */ jsx("span", {
-              className: "relative text-muted-foreground transition-colors duration-fast group-hover:text-foreground",
-              children: /* @__PURE__ */ jsx(CopyGlyph, {
-                status,
-                copyCount,
-                variant: "icon",
-                CopyIcon
-              })
-            })
-          ]
-        }),
-        announcement
-      ]
-    });
-  }
-  if (glyph) {
-    const name = ariaLabel ?? words.copy;
-    return /* @__PURE__ */ jsxs("span", {
-      ref,
-      className: cn2("inline-flex", disabled && "opacity-50 pointer-events-none", className),
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Tooltip2, {
-          content: tooltipState === "idle" ? name : status === "error" ? words.failed : words.copied,
-          delayDuration: 500,
-          sideOffset: 2,
-          forceOpen: tooltipState === "copied" ? true : tooltipState === "suppressed" ? false : undefined,
-          onOpenChange: handleTooltipOpenChange,
-          children: /* @__PURE__ */ jsx("button", {
-            id: buttonId,
-            type: "button",
-            onPointerDown: handlePointerDown,
-            onClick: handleCopy,
-            disabled,
-            "aria-label": name,
-            className: cn2("group inline-flex shrink-0 cursor-pointer items-center justify-center text-muted-foreground outline-none transition-colors duration-fast", "hover:bg-hover hover:text-foreground active:bg-active focus-visible:ring-1 focus-visible:ring-focus-ring", shape.button, compact ? "size-7" : "size-9"),
-            children: /* @__PURE__ */ jsx(CopyGlyph, {
-              status,
-              copyCount,
-              variant: "icon",
-              CopyIcon
-            })
-          })
-        }),
-        announcement
-      ]
-    });
-  }
   const actionElement = variant === "button" ? /* @__PURE__ */ jsxs("span", {
     className: cn2("shrink-0 flex items-center gap-1.5 px-1.5 transition-colors duration-fast", rowPy, sizeClasses.text, "text-muted-foreground group-hover:text-foreground", "weight-normal"),
     children: [
@@ -387,11 +258,11 @@ var Copy2 = forwardRef(({
       /* @__PURE__ */ jsxs("span", {
         className: "select-none inline-grid text-left",
         children: [
-          [words.word, words.copied, words.failedWord].map((word) => /* @__PURE__ */ jsx("span", {
+          /* @__PURE__ */ jsx("span", {
             className: "col-start-1 row-start-1 invisible",
             "aria-hidden": "true",
-            children: word
-          }, word)),
+            children: "Copied"
+          }),
           /* @__PURE__ */ jsx(AnimatePresence, {
             mode: "wait",
             initial: false,
@@ -401,7 +272,7 @@ var Copy2 = forwardRef(({
               animate: { opacity: 1, scale: 1 },
               exit: { opacity: 0, scale: 0.8, transition: spring2.fast.exit },
               transition: spring2.fast,
-              children: status === "copied" ? words.copied : status === "error" ? words.failedWord : words.word
+              children: status === "copied" ? "Copied" : status === "error" ? "Failed" : "Copy"
             }, status)
           })
         ]
@@ -440,7 +311,7 @@ var Copy2 = forwardRef(({
     onPointerDown: handlePointerDown,
     onClick: handleCopy,
     disabled,
-    "aria-label": status === "copied" ? words.copied : status === "error" ? words.failed : label ? words.word : words.copy,
+    "aria-label": status === "copied" ? "Copied" : status === "error" ? "Copy failed" : label ? "Copy" : "Copy to clipboard",
     "aria-labelledby": label ? `${buttonId} ${labelId}` : undefined,
     className: cn2("group flex items-center w-full cursor-pointer outline-none transition-all duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring", shape.input),
     children: buttonContent
@@ -450,7 +321,6 @@ var Copy2 = forwardRef(({
     className: cn2("flex flex-col gap-0.5", disabled && "opacity-50 pointer-events-none", className),
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    "aria-label": ariaLabel,
     ...props,
     children: [
       label && /* @__PURE__ */ jsx("span", {
@@ -459,7 +329,7 @@ var Copy2 = forwardRef(({
         children: label
       }),
       variant === "icon" ? /* @__PURE__ */ jsx(Tooltip2, {
-        content: tooltipState === "idle" ? words.copy : status === "error" ? words.failed : words.copied,
+        content: tooltipState === "idle" ? "Copy to clipboard" : status === "error" ? "Copy failed" : "Copied",
         delayDuration: 500,
         sideOffset: 2,
         forceOpen: tooltipState === "copied" ? true : tooltipState === "suppressed" ? false : undefined,