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

package/dist/shared/components-hyq23phv.js

@@ -0,0 +1,310 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  IndexedRows,
+  useRowIndex
+} from "./components-ta7shw28.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useSize2
+} from "./components-0sn7ypjw.js";
+import {
+  useControllableState
+} from "./components-n7mjr357.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+import {
+  useSelectionRuns,
+  useMergeSplitBlocks,
+  SelectionBackgrounds
+} from "./components-5xc2j8jz.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+import {
+  spring2
+} from "./components-1v7rxytx.js";
+
+// components/inputs/checkbox/index.tsx
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckboxGroupContext = createContext(null);
+var CheckboxGroup2 = forwardRef(({
+  children,
+  checkedIndices: checkedIndicesProp,
+  defaultCheckedIndices,
+  onCheckedIndicesChange,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const containerRef = useRef(null);
+  const [checkedIndices, setCheckedIndices] = useControllableState(checkedIndicesProp, new Set(defaultCheckedIndices), onCheckedIndicesChange);
+  const setItemChecked = useCallback((index, checked) => {
+    setCheckedIndices((prev) => {
+      if (prev.has(index) === checked)
+        return prev;
+      const next = new Set(prev);
+      if (checked)
+        next.add(index);
+      else
+        next.delete(index);
+      return next;
+    });
+  }, [setCheckedIndices]);
+  const hover = useFluidHover2(containerRef);
+  const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
+  const checkedGroups = useSelectionRuns([...checkedIndices]);
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null;
+  const shape = useShape();
+  const blocks = useMergeSplitBlocks(checkedGroups, itemRects, shape.mergedRadius);
+  const group = /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+    value: { registerItem, activeIndex, checkedIndices, setItemChecked },
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      onMouseEnter: handlers.onMouseEnter,
+      onMouseMove: handlers.onMouseMove,
+      onMouseLeave: handlers.onMouseLeave,
+      onClick: handlers.onClick,
+      onFocus: (e) => {
+        const indexAttr = e.target.closest("[data-fluid-hover-index]")?.getAttribute("data-fluid-hover-index");
+        if (indexAttr != null) {
+          const idx = Number(indexAttr);
+          setActiveIndex(idx);
+          setFocusedIndex(e.target.matches(":focus-visible") ? idx : null);
+        }
+      },
+      onBlur: (e) => {
+        if (containerRef.current?.contains(e.relatedTarget))
+          return;
+        setFocusedIndex(null);
+        setActiveIndex(null);
+      },
+      onKeyDown: (e) => {
+        const items = Array.from(containerRef.current?.querySelectorAll("[data-fluid-hover-index]") ?? []);
+        const currentIdx = items.indexOf(e.target);
+        if (currentIdx === -1)
+          return;
+        if (["ArrowDown", "ArrowUp"].includes(e.key)) {
+          e.preventDefault();
+          const next = e.key === "ArrowDown" ? (currentIdx + 1) % items.length : (currentIdx - 1 + items.length) % items.length;
+          items[next]?.focus();
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === "End") {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        }
+      },
+      role: "group",
+      className: cn2("relative flex flex-col w-72 max-w-full select-none", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectionBackgrounds, {
+          blocks
+        }),
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+          hover,
+          className: shape.bg
+        }),
+        /* @__PURE__ */ jsx(AnimatePresence, {
+          children: focusRect && /* @__PURE__ */ jsx(motion.div, {
+            className: `absolute ${shape.focusRing} pointer-events-none z-20 border border-focus-ring`,
+            initial: false,
+            animate: {
+              left: focusRect.left - 2,
+              top: focusRect.top - 2,
+              width: focusRect.width + 4,
+              height: focusRect.height + 4
+            },
+            exit: { opacity: 0, transition: spring2.fast.exit },
+            transition: {
+              ...spring2.fast,
+              opacity: { duration: spring2.fast.duration }
+            }
+          })
+        }),
+        /* @__PURE__ */ jsx(IndexedRows, {
+          children
+        })
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: group
+  }) : group;
+});
+CheckboxGroup2.displayName = "CheckboxGroup";
+var Checkbox2 = forwardRef(({
+  label,
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  onToggle: onToggleProp,
+  index: indexProp,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const internalRef = useRef(null);
+  const hasMounted = useRef(false);
+  const group = useContext(CheckboxGroupContext);
+  const index = useRowIndex(indexProp);
+  const [ownChecked, setOwnChecked] = useControllableState(checkedProp, defaultChecked, onCheckedChange);
+  const [hovered, setHovered] = useState(false);
+  const checked = checkedProp ?? (group ? group.checkedIndices.has(index) : ownChecked);
+  const onToggle = () => {
+    onToggleProp?.();
+    group?.setItemChecked(index, !checked);
+    setOwnChecked(!checked);
+  };
+  useRegisterFluidHoverItem2(group?.registerItem, index, internalRef);
+  useEffect(() => {
+    hasMounted.current = true;
+  }, []);
+  const isActive = group ? group.activeIndex === index : hovered;
+  const skipAnimation = !hasMounted.current;
+  const shape = useShape();
+  const sizeClasses = useSize2(size);
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("div", {
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    "data-fluid-hover-index": index,
+    tabIndex: 0,
+    role: "checkbox",
+    "aria-checked": checked,
+    "aria-label": label,
+    onClick: onToggle,
+    onPointerEnter: (e) => {
+      if (e.pointerType === "mouse")
+        setHovered(true);
+    },
+    onPointerLeave: () => setHovered(false),
+    onMouseDown: (e) => {
+      const interactive = e.target.closest('button:not([tabindex="-1"]), a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (interactive && interactive !== e.currentTarget)
+        return;
+      e.preventDefault();
+      e.currentTarget.focus();
+    },
+    onKeyDown: (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        onToggle();
+      }
+    },
+    className: cn2(`relative z-10 flex ${sizeClasses.control} items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.px} cursor-pointer outline-none`, !group && "focus-visible:ring-1 focus-visible:ring-focus-ring", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs(CheckboxPrimitive.Root, {
+        checked,
+        onCheckedChange: () => onToggle(),
+        tabIndex: -1,
+        "aria-hidden": true,
+        className: cn2("relative shrink-0 appearance-none bg-transparent p-0 border-0 outline-none cursor-pointer", compact ? "w-[14px] h-[14px]" : "w-[16px] h-[16px]"),
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: cn2("absolute inset-0 border-solid transition-all duration-fast", compact ? "rounded-sm" : "rounded-box", checked ? "border-[1.5px] border-transparent" : isActive ? "border-[1.5px] border-control" : "border-[1.5px] border-border")
+          }),
+          /* @__PURE__ */ jsx(AnimatePresence, {
+            children: checked && /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+              keepMounted: true,
+              render: (indicatorProps) => {
+                const {
+                  style: _s,
+                  onDrag: _onDrag,
+                  onDragStart: _onDragStart,
+                  onDragEnd: _onDragEnd,
+                  onAnimationStart: _onAnimationStart,
+                  onAnimationEnd: _onAnimationEnd,
+                  onAnimationIteration: _onAnimationIteration,
+                  ...rest
+                } = indicatorProps;
+                return /* @__PURE__ */ jsx(motion.svg, {
+                  ...rest,
+                  width: compact ? 16 : 18,
+                  height: compact ? 16 : 18,
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-foreground",
+                  initial: { opacity: 1 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 1 },
+                  children: /* @__PURE__ */ jsx(motion.path, {
+                    d: "M6 12L10 16L18 8",
+                    initial: { pathLength: skipAnimation ? 1 : 0 },
+                    animate: {
+                      pathLength: 1,
+                      transition: { duration: spring2.fast.duration, ease: "easeOut" }
+                    },
+                    exit: {
+                      pathLength: 0,
+                      transition: { duration: 0.04, ease: "easeIn" }
+                    }
+                  })
+                });
+              }
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: cn2("inline-grid", 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: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", checked || isActive ? "text-foreground" : "text-muted-foreground", checked ? "weight-semibold" : "weight-normal"),
+            children: label
+          })
+        ]
+      })
+    ]
+  });
+});
+Checkbox2.displayName = "Checkbox";
+Object.assign(Checkbox2, { Group: CheckboxGroup2 });
+var checkbox_default = Checkbox2;
+
+export { CheckboxGroup2, Checkbox2, checkbox_default };

package/dist/shared/{components-8mt5bsv6.js → components-jbbmdr74.js}

@@ -1,29 +1,25 @@
-"use client";
 import {
   cn2
-} from "./components-jcnjay5g.js";
+} from "./components-ezxhrmer.js";
 import {
   FluidHoverHighlight2
-} from "./components-qdm3yh26.js";
+} from "./components-kvr7f9hy.js";
 import {
-  useIcon2
-} from "./components-jqpefjsn.js";
+  useIcon
+} from "./components-zrkzcayz.js";
 import {
-  useShape2
-} from "./components-71nbt03m.js";
+  useShape
+} from "./components-cv16mryv.js";
 import {
   useSize2
-} from "./components-h83az0bz.js";
+} from "./components-0sn7ypjw.js";
 import {
   useFluidHover2,
   useRegisterFluidHoverItem2
-} from "./components-yhgq0qxx.js";
-import {
-  separator_default
-} from "./components-3h92d94m.js";
+} from "./components-59efxjd9.js";
 import {
   SizeProvider2
-} from "./components-dcc02hs2.js";
+} from "./components-jjw69c4c.js";
 
 // components/card/index.tsx
 import {
@@ -55,7 +51,7 @@ var CardGroup2 = forwardRef(({
   ...props
 }, ref) => {
   const containerRef = useRef(null);
-  const shape = useShape2();
+  const shape = useShape();
   const axis = columns > 1 ? "xy" : "y";
   const hover = useFluidHover2(containerRef, { axis, gapClick: { maxDistance: 16 } });
   const { activeIndex, handlers, registerItem } = hover;
@@ -120,18 +116,17 @@ var Card2 = forwardRef(({
   dismissOnHover = true,
   onDismiss,
   size,
-  border = "none",
   index,
   className,
   children,
   ...props
 }, ref) => {
   const internalRef = useRef(null);
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2(size);
   const compact = sizeClasses.variant === "compact";
   const group = useContext(CardGroupContext);
-  const XIcon = useIcon2("x");
+  const XIcon = useIcon("x");
   const orientation = group?.orientation ?? "card";
   const columns = group?.columns ?? 1;
   const count = group?.count ?? 1;
@@ -156,7 +151,7 @@ var Card2 = forwardRef(({
   const inlineImage = isInline && hasImage;
   const clickable = !!href || !!onClick;
   const emphasized = selected;
-  const tileShape = !group ? cn2(shape.container, "overflow-hidden", border === "outlined" && "border border-border/60") : separated && outlined ? cn2(shape.container, "overflow-hidden border border-border/60") : "";
+  const tileShape = !group ? cn2(shape.container, "overflow-hidden") : separated && outlined ? cn2(shape.container, "overflow-hidden border border-border/60") : "";
   const overlay = clickable && !disabled ? href ? /* @__PURE__ */ jsx("a", {
     href,
     onClick,
@@ -251,15 +246,15 @@ var CardHeader2 = forwardRef(({ className, ...props }, ref) => {
   });
 });
 CardHeader2.displayName = "CardHeader";
-var CardTitle2 = forwardRef(({ as: Tag = "span", className, children, ...props }, ref) => {
+var CardTitle2 = forwardRef(({ className, children, ...props }, ref) => {
   const { emphasized, orientation } = useContext(CardContext);
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const trim = orientation === "inline" ? "[text-box:trim-both_cap_alphabetic]" : "";
-  return /* @__PURE__ */ jsxs(Tag, {
+  return /* @__PURE__ */ jsxs("span", {
     ref,
     "data-slot": "card-title",
-    className: cn2("inline-grid grid-cols-[minmax(0,1fr)] leading-snug", Tag !== "span" && "m-0", compact ? "text-subtitle-compact" : "text-subtitle", className),
+    className: cn2("inline-grid grid-cols-[minmax(0,1fr)] leading-snug", compact ? "text-subtitle-compact" : "text-subtitle", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx("span", {
@@ -293,14 +288,14 @@ var CardAction2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   ...props
 }));
 CardAction2.displayName = "CardAction";
-var CardContent2 = forwardRef(({ bodyText = false, className, ...props }, ref) => {
+var CardContent2 = forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useContext(CardContext);
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   return /* @__PURE__ */ jsx("div", {
     ref,
     "data-slot": "card-content",
-    className: cn2(orientation === "inline" ? "" : compact ? "px-3 pt-2.5" : "px-4 pt-3", bodyText && sizeClasses.text, className),
+    className: cn2(orientation === "inline" ? "" : compact ? "px-3 pt-2.5" : "px-4 pt-3", className),
     ...props
   });
 });
@@ -318,22 +313,9 @@ var CardFooter2 = forwardRef(({ className, ...props }, ref) => {
   });
 });
 CardFooter2.displayName = "CardFooter";
-var CardDivider2 = forwardRef(({ className, orientation, ...props }, ref) => {
-  const { orientation: cardOrientation } = useContext(CardContext);
-  const compact = useSize2().variant === "compact";
-  const vertical = (orientation ?? (cardOrientation === "inline" ? "vertical" : "horizontal")) === "vertical";
-  return /* @__PURE__ */ jsx(separator_default, {
-    ref,
-    "data-slot": "card-divider",
-    ...props,
-    orientation: vertical ? "vertical" : "horizontal",
-    className: cn2("bg-border/60", vertical ? compact ? "my-2.5" : "my-3.5" : compact ? "mt-2.5" : "mt-3", className)
-  });
-});
-CardDivider2.displayName = "CardDivider";
 function CardMedia2({ logo, logoAlt, icon: Icon, size = 22, className }) {
   const { orientation } = useContext(CardContext);
-  const shape = useShape2();
+  const shape = useShape();
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const wrap = cn2(orientation === "inline" ? "" : "mb-2", className);
@@ -438,8 +420,8 @@ function CardButton2({
   external = false,
   disabled = false
 }) {
-  const shape = useShape2();
-  const ArrowRight = useIcon2("arrow-right");
+  const shape = useShape();
+  const ArrowRight = useIcon("arrow-right");
   const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const position = iconPosition ?? (external ? "end" : "start");
@@ -491,7 +473,6 @@ Object.assign(Card2, {
   Action: CardAction2,
   Content: CardContent2,
   Footer: CardFooter2,
-  Divider: CardDivider2,
   Media: CardMedia2,
   Image: CardImage2,
   Eyebrow: CardEyebrow2,
@@ -500,4 +481,4 @@ Object.assign(Card2, {
 });
 var card_default = Card2;
 
-export { CardGroup2, Card2, CardHeader2, CardTitle2, CardDescription2, CardAction2, CardContent2, CardFooter2, CardDivider2, CardMedia2, CardImage2, CardEyebrow2, CardFeature2, CardButton2, card_default };
+export { CardGroup2, Card2, CardHeader2, CardTitle2, CardDescription2, CardAction2, CardContent2, CardFooter2, CardMedia2, CardImage2, CardEyebrow2, CardFeature2, CardButton2, card_default };

package/dist/shared/{components-dcc02hs2.js → components-jjw69c4c.js}

@@ -1,10 +1,7 @@
-"use client";
 import {
-  sizeMap2
-} from "./components-34txk9rj.js";
-import {
-  SizeContext2
-} from "./components-h83az0bz.js";
+  sizeMap2,
+  SizeContext
+} from "./components-0sn7ypjw.js";
 
 // primitives/sizes/index.tsx
 import { useCallback, useMemo, useState } from "react";
@@ -23,7 +20,7 @@ function SizeProvider2({
     setInternalSize(next);
   }, [isControlled]);
   const value = useMemo(() => ({ size: resolved, setSize, classes: sizeMap2[resolved] }), [resolved, setSize]);
-  return /* @__PURE__ */ jsx(SizeContext2.Provider, {
+  return /* @__PURE__ */ jsx(SizeContext.Provider, {
     value,
     children
   });