@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-8hzbsfbd.js

@@ -0,0 +1,123 @@
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/table/index.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TableContext = createContext(null);
+var Table = forwardRef(({ children, size, className, ...props }, ref) => {
+  const containerRef = useRef(null);
+  const sizeClasses = useSize(size);
+  const hover = useFluidHover(containerRef);
+  const { activeIndex, handlers, registerItem } = hover;
+  const contextValue = useMemo(() => ({ registerItem, activeIndex }), [registerItem, activeIndex]);
+  const table = /* @__PURE__ */ jsx(TableContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: containerRef,
+      className: "relative",
+      onMouseEnter: handlers.onMouseEnter,
+      onMouseMove: handlers.onMouseMove,
+      onMouseLeave: handlers.onMouseLeave,
+      onClick: handlers.onClick,
+      children: [
+        /* @__PURE__ */ jsx(FluidHoverHighlight, {
+          hover
+        }),
+        /* @__PURE__ */ jsx("table", {
+          ref,
+          className: cn("w-full border-collapse", sizeClasses.text, className),
+          ...props,
+          children
+        })
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: table
+  }) : table;
+});
+Table.displayName = "Table";
+var TableHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
+  ref,
+  className: cn("", className),
+  ...props
+}));
+TableHeader.displayName = "TableHeader";
+var TableBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
+  ref,
+  className: cn("", className),
+  ...props
+}));
+TableBody.displayName = "TableBody";
+var TableRow = forwardRef(({ index, className, style, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const ctx = useContext(TableContext);
+  useRegisterFluidHoverItem(ctx?.registerItem, index, internalRef);
+  const isBodyRow = index !== undefined;
+  const activeIdx = ctx?.activeIndex ?? null;
+  const hideBorder = activeIdx !== null && (isBodyRow && (index === activeIdx || index === activeIdx - 1) || !isBodyRow && activeIdx === 0);
+  return /* @__PURE__ */ jsx("tr", {
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    "data-fluid-hover-index": index,
+    className: cn("group/row relative z-10 border-b transition-[border-color] duration-fast", hideBorder ? "border-transparent" : "border-accent/40", isBodyRow && activeIdx === index && "is-active", isBodyRow ? "weight-normal" : "weight-semibold", className),
+    style,
+    ...props
+  });
+});
+TableRow.displayName = "TableRow";
+var TableHead = forwardRef(({ className, ...props }, ref) => {
+  const sizeClasses = useSize();
+  return /* @__PURE__ */ jsx("th", {
+    ref,
+    className: cn("text-left text-foreground", sizeClasses.variant === "compact" ? "px-2.5 py-[5px]" : "px-3 py-2", className),
+    ...props
+  });
+});
+TableHead.displayName = "TableHead";
+var TableCell = forwardRef(({ className, ...props }, ref) => {
+  const sizeClasses = useSize();
+  return /* @__PURE__ */ jsx("td", {
+    ref,
+    className: cn("text-muted-foreground transition-colors duration-fast group-[.is-active]/row:text-foreground", sizeClasses.variant === "compact" ? "px-2.5 py-[5px]" : "px-3 py-2", className),
+    ...props
+  });
+});
+TableCell.displayName = "TableCell";
+Object.assign(Table, {
+  Header: TableHeader,
+  Body: TableBody,
+  Row: TableRow,
+  Head: TableHead,
+  Cell: TableCell
+});
+var table_default = Table;
+
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, table_default };

package/dist/shared/components-9p8s8n5q.js

@@ -0,0 +1,171 @@
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useReduceMotion
+} from "./components-nnnd2xef.js";
+import {
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSizeVariant
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/badge/index.tsx
+import { cva } from "class-variance-authority";
+import { AnimatePresence, animate, motion } from "motion/react";
+import { forwardRef, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var badgeColors = {
+  gray: "var(--badge-gray)",
+  red: "var(--badge-red)",
+  orange: "var(--badge-orange)",
+  amber: "var(--badge-amber)",
+  yellow: "var(--badge-yellow)",
+  lime: "var(--badge-lime)",
+  green: "var(--badge-green)",
+  emerald: "var(--badge-emerald)",
+  teal: "var(--badge-teal)",
+  cyan: "var(--badge-cyan)",
+  blue: "var(--badge-blue)",
+  indigo: "var(--badge-indigo)",
+  violet: "var(--badge-violet)",
+  purple: "var(--badge-purple)",
+  fuchsia: "var(--badge-fuchsia)",
+  pink: "var(--badge-pink)",
+  rose: "var(--badge-rose)"
+};
+var badgeVariants = cva("inline-flex items-center weight-medium whitespace-nowrap", {
+  variants: {
+    variant: {
+      solid: "",
+      dot: "border border-border text-foreground"
+    },
+    size: {
+      default: "h-6 px-2.5 text-caption gap-1.5",
+      compact: "h-5 px-2 text-caption-compact gap-1"
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "default"
+  }
+});
+var legacySizeAliases = {
+  sm: "compact",
+  md: "default",
+  lg: "default"
+};
+var { exit: _exit, ...enter } = spring.moderate;
+function textOf(node) {
+  const parts = Array.isArray(node) ? node : [node];
+  if (parts.every((part) => typeof part === "string" || typeof part === "number"))
+    return parts.join("");
+}
+function useWidthMorph(change) {
+  const content = useRef(null);
+  const rest = useRef(0);
+  const live = useRef(null);
+  const reduced = useReduceMotion();
+  useLayoutEffect(() => {
+    const el = content.current;
+    if (!el)
+      return;
+    const observer = new ResizeObserver(() => {
+      if (live.current === null)
+        rest.current = el.offsetWidth;
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    const el = content.current;
+    const from = live.current ?? rest.current;
+    if (!el || !from)
+      return;
+    el.style.width = "";
+    const to = el.offsetWidth;
+    rest.current = to;
+    live.current = null;
+    if (reduced || from === to)
+      return;
+    const write = (width) => {
+      live.current = width;
+      el.style.width = `${width}px`;
+    };
+    write(from);
+    const controls = animate(from, to, {
+      ...enter,
+      onUpdate: write,
+      onComplete: () => {
+        live.current = null;
+        el.style.width = "";
+      }
+    });
+    return () => controls.stop();
+  }, [change, reduced]);
+  return content;
+}
+var Badge = forwardRef(({ className, variant = "solid", size: sizeProp, color = "gray", children, style, ...props }, ref) => {
+  const shape = useShape();
+  const contextSize = useSizeVariant();
+  const size = sizeProp ? legacySizeAliases[sizeProp] ?? sizeProp : contextSize === "compact" ? "compact" : "default";
+  const colorValue = badgeColors[color];
+  const isSolid = variant === "solid";
+  const dotSize = size === "compact" ? 6 : 7;
+  const colorStyle = isSolid ? color === "gray" ? { backgroundColor: "var(--accent)", color: "var(--foreground)" } : {
+    color: "var(--foreground)",
+    backgroundColor: `color-mix(in srgb, ${colorValue} 15%, var(--background))`
+  } : {};
+  const dotColor = color === "gray" ? "var(--muted-foreground)" : colorValue;
+  const label = textOf(children);
+  const content = useWidthMorph(`${variant} ${size} ${label}`);
+  return /* @__PURE__ */ jsx("span", {
+    ref,
+    className: cn(badgeVariants({ variant, size }), shape.item, "transition-[background-color] duration-moderate", className),
+    style: { ...colorStyle, ...style },
+    ...props,
+    children: /* @__PURE__ */ jsxs("span", {
+      ref: content,
+      className: "relative inline-flex min-w-0 items-center gap-[inherit] overflow-x-clip",
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, {
+          mode: "popLayout",
+          initial: false,
+          children: !isSolid && /* @__PURE__ */ jsx(motion.span, {
+            className: "shrink-0 rounded-full transition-[background-color] duration-moderate",
+            style: {
+              width: dotSize,
+              height: dotSize,
+              backgroundColor: dotColor
+            },
+            initial: { opacity: 0, scale: 0 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0, transition: spring.moderate.exit },
+            transition: enter
+          }, "dot")
+        }),
+        /* @__PURE__ */ jsx(AnimatePresence, {
+          mode: "popLayout",
+          initial: false,
+          children: /* @__PURE__ */ jsx(motion.span, {
+            layout: "position",
+            className: "[text-box:trim-both_cap_alphabetic]",
+            initial: { opacity: 0, filter: "blur(4px)" },
+            animate: { opacity: 1, filter: "blur(0px)", transitionEnd: { filter: "none" } },
+            exit: { opacity: 0, filter: "blur(4px)", transition: spring.moderate.exit },
+            transition: enter,
+            children
+          }, label ?? "label")
+        })
+      ]
+    })
+  });
+});
+Badge.displayName = "Badge";
+var badge_default = Badge;
+
+export { badgeColors, badgeVariants, Badge, badge_default };

package/dist/shared/components-aaq3yk4f.js

@@ -0,0 +1,304 @@
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  useFluidHover
+} from "./components-e46kf6cp.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.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-subtle/index.tsx
+import { Tabs } from "@base-ui/react/tabs";
+import { AnimatePresence, motion } from "motion/react";
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TabsSubtleContext = createContext(null);
+var isPanel = (child) => isValidElement(child) && child.type === TabsSubtlePanel;
+function useTabsSubtle() {
+  const ctx = useContext(TabsSubtleContext);
+  if (!ctx)
+    throw new Error("useTabsSubtle must be used within a TabsSubtle");
+  return ctx;
+}
+var TabsSubtle = forwardRef(({
+  children,
+  selectedIndex: selectedIndexProp,
+  defaultSelectedIndex = 0,
+  onSelect: onSelectProp,
+  idPrefix,
+  activeLabel = false,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const [selectedIndex, onSelect] = useControllableState(selectedIndexProp, defaultSelectedIndex, onSelectProp);
+  const childList = Children.toArray(children);
+  const panels = childList.filter(isPanel);
+  const tabs = childList.filter((child) => !isPanel(child));
+  const generatedIdPrefix = useId();
+  const resolvedIdPrefix = idPrefix ?? (panels.length > 0 ? generatedIdPrefix : undefined);
+  const containerRef = useRef(null);
+  const isMouseInside = useRef(false);
+  const shape = useShape();
+  const {
+    activeIndex: hoveredIndex,
+    setActiveIndex: setHoveredIndex,
+    itemRects: tabRects,
+    handlers,
+    registerItem,
+    measureItems: measureTabs
+  } = useFluidHover(containerRef, { axis: "x" });
+  const tabElementsRef = useRef(new Map);
+  const registerTab = useCallback((index, element) => {
+    registerItem(index, element);
+    if (element) {
+      tabElementsRef.current.set(index, element);
+    } else {
+      tabElementsRef.current.delete(index);
+    }
+  }, [registerItem]);
+  useEffect(() => {
+    measureTabs();
+  }, [measureTabs, children]);
+  useEffect(() => {
+    const elements = tabElementsRef.current;
+    if (elements.size === 0)
+      return;
+    const ro = new ResizeObserver(() => measureTabs());
+    elements.forEach((el) => ro.observe(el));
+    return () => ro.disconnect();
+  }, [measureTabs, 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 selectedRect = tabRects[selectedIndex];
+  const hoverRect = hoveredIndex !== null ? tabRects[hoveredIndex] : null;
+  const focusRect = focusedIndex !== null ? tabRects[focusedIndex] : null;
+  const isHoveringSelected = hoveredIndex === selectedIndex;
+  const isHovering = hoveredIndex !== null && !isHoveringSelected;
+  const root = /* @__PURE__ */ jsxs(TabsSubtleContext.Provider, {
+    value: {
+      registerTab,
+      hoveredIndex,
+      selectedIndex,
+      idPrefix: resolvedIdPrefix,
+      activeLabel
+    },
+    children: [
+      /* @__PURE__ */ jsx(Tabs.Root, {
+        value: selectedIndex,
+        onValueChange: (value) => {
+          if (typeof value === "number")
+            onSelect(value);
+        },
+        render: /* @__PURE__ */ jsxs(Tabs.List, {
+          activateOnFocus: false,
+          ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === "function")
+              ref(node);
+            else if (ref)
+              ref.current = node;
+          },
+          onMouseMove: handleMouseMove,
+          onMouseLeave: handleMouseLeave,
+          onFocus: (e) => {
+            const indexAttr = e.target.closest("[data-fluid-hover-index]")?.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 flex items-center select-none overflow-x-auto max-w-[calc(100%_+_8px)] scrollbar-hide -mx-1 px-1 -my-1 py-1", className),
+          ...props,
+          children: [
+            selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+              rect: selectedRect,
+              className: cn("bg-active", shape.bg),
+              opacity: isHovering ? 0.8 : 1
+            }),
+            selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+              rect: isHovering && hoverRect ? hoverRect : selectedRect,
+              className: cn("bg-active", 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 }
+                }
+              })
+            }),
+            tabs
+          ]
+        })
+      }),
+      panels
+    ]
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: root
+  }) : root;
+});
+TabsSubtle.displayName = "TabsSubtle";
+var TabsSubtleItem = forwardRef(({ icon: Icon, label, index, className, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const [labelWidth, setLabelWidth] = useState(null);
+  const labelRoRef = useRef(null);
+  const measureLabel = useCallback((el) => {
+    labelRoRef.current?.disconnect();
+    labelRoRef.current = null;
+    if (!el)
+      return;
+    const update = () => setLabelWidth(el.offsetWidth);
+    update();
+    labelRoRef.current = new ResizeObserver(update);
+    labelRoRef.current.observe(el);
+  }, []);
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const { registerTab, hoveredIndex, selectedIndex, idPrefix, activeLabel } = useTabsSubtle();
+  useEffect(() => {
+    registerTab(index, internalRef.current);
+    return () => registerTab(index, null);
+  }, [index, registerTab]);
+  const isSelected = selectedIndex === index;
+  const isActive = hoveredIndex === index || isSelected;
+  const collapseLabel = activeLabel && !!Icon;
+  const showLabel = !collapseLabel || isSelected;
+  const labelContent = /* @__PURE__ */ jsxs("span", {
+    ref: measureLabel,
+    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
+      })
+    ]
+  });
+  return /* @__PURE__ */ jsxs(Tabs.Tab, {
+    ref: (node) => {
+      const button = node;
+      internalRef.current = button;
+      if (typeof ref === "function")
+        ref(button);
+      else if (ref)
+        ref.current = button;
+    },
+    value: index,
+    "data-fluid-hover-index": index,
+    id: idPrefix ? `${idPrefix}-tab-${index}` : undefined,
+    "aria-controls": idPrefix ? `${idPrefix}-panel-${index}` : undefined,
+    "aria-label": collapseLabel && !showLabel ? label : undefined,
+    className: cn("relative z-10 flex items-center cursor-pointer bg-transparent border-none outline-none", sizeClasses.control, sizeClasses.px, !collapseLabel && sizeClasses.gap, shape.bg, className),
+    ...props,
+    children: [
+      Icon && /* @__PURE__ */ jsx(Icon, {
+        size: sizeClasses.icon,
+        strokeWidth: isActive ? 2 : 1.5,
+        className: cn("shrink-0 transition-[color,stroke-width] duration-fast", isActive ? "text-foreground" : "text-muted-foreground")
+      }),
+      collapseLabel ? /* @__PURE__ */ jsx(AnimatePresence, {
+        initial: false,
+        children: showLabel && /* @__PURE__ */ jsx(motion.span, {
+          className: "overflow-hidden",
+          style: labelWidth == null ? { width: "auto" } : undefined,
+          initial: { width: 0, opacity: 0, marginLeft: 0 },
+          animate: {
+            ...labelWidth != null ? { width: labelWidth } : null,
+            opacity: 1,
+            marginLeft: sizeClasses.variant === "compact" ? 6 : 8
+          },
+          exit: { width: 0, opacity: 0, marginLeft: 0 },
+          transition: {
+            ...spring.fast,
+            opacity: { duration: spring.fast.exit.duration }
+          },
+          children: labelContent
+        }, "label")
+      }) : labelContent
+    ]
+  });
+});
+TabsSubtleItem.displayName = "TabsSubtleItem";
+var TabsSubtlePanel = forwardRef(({ index, selectedIndex, idPrefix, children, className, ...props }, ref) => {
+  const ctx = useContext(TabsSubtleContext);
+  const resolvedSelectedIndex = selectedIndex ?? ctx?.selectedIndex ?? -1;
+  const resolvedIdPrefix = idPrefix ?? ctx?.idPrefix;
+  const isSelected = resolvedSelectedIndex === index;
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    id: resolvedIdPrefix ? `${resolvedIdPrefix}-panel-${index}` : undefined,
+    role: "tabpanel",
+    "aria-labelledby": resolvedIdPrefix ? `${resolvedIdPrefix}-tab-${index}` : undefined,
+    hidden: !isSelected,
+    tabIndex: -1,
+    className: cn("outline-none", className),
+    ...props,
+    children: isSelected && children
+  });
+});
+TabsSubtlePanel.displayName = "TabsSubtlePanel";
+Object.assign(TabsSubtle, { Item: TabsSubtleItem, Panel: TabsSubtlePanel });
+var tabs_subtle_default = TabsSubtle;
+
+export { TabsSubtle, TabsSubtleItem, TabsSubtlePanel, tabs_subtle_default };