@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/shared/components-gf5s6ap9.js

@@ -0,0 +1,42 @@
+import {
+  DialogTrigger2,
+  DialogClose2,
+  DialogContent2,
+  DialogHeader2,
+  DialogFooter2,
+  DialogTitle2,
+  DialogDescription2,
+  DialogState2
+} from "./components-zfnmn5d4.js";
+
+// components/overlays/alert-dialog/index.tsx
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var AlertDialogContent2 = forwardRef(({ showCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsx(DialogContent2, {
+  ref,
+  showCloseButton,
+  ...props
+}));
+AlertDialogContent2.displayName = "AlertDialogContent";
+function AlertDialog2({ children, open, defaultOpen, onOpenChange }) {
+  return /* @__PURE__ */ jsx(DialogState2, {
+    open,
+    defaultOpen,
+    onOpenChange,
+    children: (root) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, {
+      ...root,
+      children
+    })
+  });
+}
+AlertDialog2.Trigger = DialogTrigger2;
+AlertDialog2.Content = AlertDialogContent2;
+AlertDialog2.Header = DialogHeader2;
+AlertDialog2.Footer = DialogFooter2;
+AlertDialog2.Title = DialogTitle2;
+AlertDialog2.Description = DialogDescription2;
+AlertDialog2.Close = DialogClose2;
+var alert_dialog_default = AlertDialog2;
+
+export { AlertDialogContent2, AlertDialog2, alert_dialog_default };

package/dist/shared/components-gvr9w41t.js

@@ -0,0 +1,193 @@
+import {
+  fieldVariants,
+  fieldIconClasses
+} from "./components-mhd39z7x.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 {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  SizeProvider2
+} from "./components-jjw69c4c.js";
+
+// components/inputs/input/index.tsx
+import { Field } from "@base-ui/react/field";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputGroupContext = createContext(null);
+function useInputGroup() {
+  const ctx = useContext(InputGroupContext);
+  if (!ctx)
+    throw new Error("useInputGroup must be used within an InputGroup");
+  return ctx;
+}
+var FieldStateContext = createContext(null);
+var Input2 = forwardRef(({
+  icon: Icon,
+  value: valueProp,
+  defaultValue = "",
+  onChange: onChangeProp,
+  invalid,
+  disabled,
+  size,
+  className,
+  ...props
+}, ref) => {
+  const [value, onChange] = useControllableState(valueProp, defaultValue, onChangeProp);
+  const inputRef = useRef(null);
+  const field = useContext(FieldStateContext);
+  const shape = useShape();
+  const sizeClasses = useSize2(size);
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("div", {
+    onMouseDown: (e) => {
+      if (e.target === inputRef.current)
+        return;
+      e.preventDefault();
+      inputRef.current?.focus();
+    },
+    "data-active": field?.active || undefined,
+    "data-invalid": invalid || undefined,
+    "data-disabled": disabled || undefined,
+    className: cn2(fieldVariants(), "flex items-center", sizeClasses.gap, shape.input, compact ? "px-2" : "px-2.5", sizeClasses.control, className),
+    children: [
+      Icon && /* @__PURE__ */ jsx(Icon, {
+        size: sizeClasses.icon,
+        strokeWidth: 1.5,
+        className: fieldIconClasses
+      }),
+      /* @__PURE__ */ jsx(Field.Control, {
+        ref: (node) => {
+          const input = node;
+          inputRef.current = input;
+          if (typeof ref === "function")
+            ref(input);
+          else if (ref)
+            ref.current = input;
+        },
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        disabled,
+        "aria-invalid": invalid || undefined,
+        className: cn2("w-full rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, "weight-normal"),
+        ...props
+      })
+    ]
+  });
+});
+Input2.displayName = "Input";
+var Label2 = forwardRef(({ children, invalid, size, className, ...props }, ref) => {
+  const sizeClasses = useSize2(size);
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("label", {
+    ref,
+    className: cn2("inline-grid", sizeClasses.text, "data-[disabled]:opacity-50", compact ? "pl-2" : "pl-2.5", className),
+    ...props,
+    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
+      })
+    ]
+  });
+});
+Label2.displayName = "Label";
+var InputGroup2 = forwardRef(({ children, size, className, ...props }, ref) => {
+  const containerRef = useRef(null);
+  const { activeIndex, handlers, registerItem } = useFluidHover2(containerRef);
+  const contextValue = useMemo(() => ({ registerItem, activeIndex }), [registerItem, activeIndex]);
+  const group = /* @__PURE__ */ jsx(InputGroupContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsx("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,
+      className: cn2("relative flex flex-col gap-3 w-72 max-w-full", className),
+      ...props,
+      children
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: group
+  }) : group;
+});
+InputGroup2.displayName = "InputGroup";
+var InputField = forwardRef(({ label, labelHidden, index, error, disabled, className, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const { registerItem, activeIndex } = useInputGroup();
+  const sizeClasses = useSize2();
+  const compact = sizeClasses.variant === "compact";
+  useRegisterFluidHoverItem2(registerItem, index, internalRef);
+  const fieldState = useMemo(() => ({ active: activeIndex === index }), [activeIndex, index]);
+  return /* @__PURE__ */ jsxs(Field.Root, {
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    invalid: !!error,
+    disabled,
+    className: cn2("flex flex-col gap-1 cursor-text", disabled && "pointer-events-none", className),
+    children: [
+      /* @__PURE__ */ jsx(Field.Label, {
+        render: /* @__PURE__ */ jsx(Label2, {
+          invalid: !!error,
+          className: labelHidden ? "sr-only" : undefined,
+          children: label
+        })
+      }),
+      /* @__PURE__ */ jsx(FieldStateContext.Provider, {
+        value: fieldState,
+        children: /* @__PURE__ */ jsx(Input2, {
+          invalid: !!error,
+          disabled,
+          ...props
+        })
+      }),
+      error && /* @__PURE__ */ jsx(Field.Error, {
+        match: true,
+        className: cn2("text-destructive", compact ? "text-caption-compact pl-2" : "text-caption pl-2.5", "weight-medium"),
+        children: error
+      })
+    ]
+  });
+});
+InputField.displayName = "InputField";
+Object.assign(InputGroup2, { Field: InputField });
+var input_default = Input2;
+
+export { Input2, Label2, InputGroup2, input_default };

package/dist/shared/components-h2dpcwgc.js

@@ -0,0 +1,137 @@
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+import {
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
+
+// primitives/fluid-hover/index.tsx
+import {
+  Children,
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FluidHoverContext = createContext(null);
+function isItemDisabled(element) {
+  return element.hasAttribute("data-disabled");
+}
+var itemBaseClass = "relative z-10 flex shrink-0 cursor-pointer items-center text-left text-body text-foreground outline-none focus-visible:ring-1 focus-visible:ring-focus-ring";
+var itemAxisClass = {
+  y: "h-9 w-full px-3",
+  x: "h-9 justify-center whitespace-nowrap px-3",
+  xy: "min-h-20 w-full flex-col items-start justify-center gap-0.5 p-3"
+};
+var containerAxisClass = {
+  y: "flex flex-col gap-1",
+  x: "flex flex-row gap-1",
+  xy: "grid gap-1"
+};
+var FluidHoverItem2 = forwardRef(({ index, disabled = false, className, children, ...props }, ref) => {
+  const list = useContext(FluidHoverContext);
+  const shape = useShape();
+  const innerRef = useRef(null);
+  useRegisterFluidHoverItem2(list?.registerItem, index, innerRef);
+  const axis = list?.axis ?? "y";
+  return /* @__PURE__ */ jsx("button", {
+    ref: (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    type: "button",
+    "data-slot": "fluid-hover-item",
+    "data-disabled": disabled || undefined,
+    disabled,
+    ...props,
+    className: cn2(itemBaseClass, itemAxisClass[axis], shape.item, disabled && "cursor-default text-muted-foreground opacity-55", className),
+    children
+  });
+});
+FluidHoverItem2.displayName = "FluidHoverItem";
+var FluidHover2 = forwardRef(({
+  axis,
+  columns,
+  items,
+  renderItem,
+  disabledIndices,
+  gapClick = true,
+  highlightClassName,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const containerRef = useRef(null);
+  const shape = useShape();
+  const resolvedAxis = axis ?? ((columns ?? 1) > 1 ? "xy" : "y");
+  const resolvedColumns = resolvedAxis === "xy" ? Math.max(1, columns ?? 2) : 1;
+  const hover = useFluidHover2(containerRef, {
+    axis: resolvedAxis,
+    isItemDisabled,
+    gapClick
+  });
+  const { handlers, registerItem } = hover;
+  const contextValue = useMemo(() => ({ registerItem, axis: resolvedAxis }), [registerItem, resolvedAxis]);
+  const disabled = new Set(disabledIndices);
+  const rows = items ? items.map((item, i) => /* @__PURE__ */ jsx(FluidHoverItem2, {
+    index: i,
+    disabled: disabled.has(i),
+    children: renderItem ? renderItem(item, i) : item
+  }, `${i}-${item}`)) : Children.toArray(children).map((child, i) => {
+    if (!isValidElement(child) || child.type !== FluidHoverItem2)
+      return child;
+    const row = child;
+    return cloneElement(row, {
+      index: row.props.index ?? i,
+      disabled: row.props.disabled ?? disabled.has(i)
+    });
+  });
+  return /* @__PURE__ */ jsx(FluidHoverContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      ...props,
+      ...handlers,
+      "data-slot": "fluid-hover",
+      "data-axis": resolvedAxis,
+      className: cn2("relative", containerAxisClass[resolvedAxis], className),
+      style: resolvedAxis === "xy" ? {
+        gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
+        ...style
+      } : style,
+      children: [
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+          hover,
+          className: cn2("z-0", shape.bg, highlightClassName)
+        }),
+        rows
+      ]
+    })
+  });
+});
+FluidHover2.displayName = "FluidHover";
+Object.assign(FluidHover2, { Item: FluidHoverItem2 });
+var fluid_hover_default = FluidHover2;
+
+export { FluidHoverItem2, FluidHover2, fluid_hover_default };

package/dist/shared/components-hawvy2qz.js

@@ -0,0 +1,105 @@
+import {
+  useShape
+} from "./components-cv16mryv.js";
+import {
+  cn2
+} from "./components-ezxhrmer.js";
+
+// primitives/scroll-area/index.tsx
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import {
+  createContext,
+  forwardRef,
+  useContext
+} from "react";
+
+// lib/use-touch-primary.tsx
+import { useEffect, useState } from "react";
+function useTouchPrimary() {
+  const [isTouchPrimary, setIsTouchPrimary] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    const controller = new AbortController;
+    const { signal } = controller;
+    const handleTouch = () => {
+      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      const prefersTouch = window.matchMedia("(pointer: coarse)").matches;
+      setIsTouchPrimary(hasTouch && prefersTouch);
+    };
+    const mq = window.matchMedia("(pointer: coarse)");
+    mq.addEventListener("change", handleTouch, { signal });
+    window.addEventListener("pointerdown", handleTouch, { signal });
+    handleTouch();
+    return () => controller.abort();
+  }, []);
+  return isTouchPrimary;
+}
+
+// primitives/scroll-area/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ScrollAreaContext = createContext(false);
+var ScrollArea2 = forwardRef(({ className, children, viewportClassName, orientation = "vertical", ...props }, ref) => {
+  const isTouch = useTouchPrimary();
+  return /* @__PURE__ */ jsx(ScrollAreaContext.Provider, {
+    value: isTouch,
+    children: isTouch ? /* @__PURE__ */ jsx("div", {
+      ref,
+      role: "group",
+      "data-slot": "scroll-area",
+      "aria-roledescription": "scroll area",
+      className: cn2("relative overflow-hidden", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", {
+        "data-slot": "scroll-area-viewport",
+        className: cn2("size-full rounded-[inherit]", orientation === "vertical" && "overflow-y-auto", orientation === "horizontal" && "overflow-x-auto", orientation === "both" && "overflow-auto", viewportClassName),
+        tabIndex: 0,
+        children
+      })
+    }) : /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+      ref,
+      "data-slot": "scroll-area",
+      className: cn2("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+          "data-slot": "scroll-area-viewport",
+          className: cn2("size-full rounded-[inherit]", viewportClassName),
+          children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Content, {
+            children
+          })
+        }),
+        orientation !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar2, {
+          orientation: "vertical"
+        }),
+        orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollBar2, {
+          orientation: "horizontal"
+        }),
+        orientation === "both" && /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    })
+  });
+});
+ScrollArea2.displayName = "ScrollArea";
+var ScrollBar2 = forwardRef(({ className, orientation = "vertical", ...props }, ref) => {
+  const isTouch = useContext(ScrollAreaContext);
+  const shape = useShape();
+  if (isTouch)
+    return null;
+  return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
+    ref,
+    orientation,
+    "data-slot": "scroll-area-scrollbar",
+    className: cn2("group/scrollbar absolute z-20 flex touch-none select-none", "opacity-0 transition-opacity duration-moderate-exit ease-out delay-moderate", "data-[hovering]:duration-moderate data-[scrolling]:duration-moderate", "data-[hovering]:opacity-100 data-[scrolling]:opacity-100", "data-[hovering]:delay-0 data-[scrolling]:delay-0", orientation === "vertical" && "top-0 right-0 h-full w-2.5", orientation === "horizontal" && "bottom-0 left-0 h-2.5 w-full flex-col", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, {
+      "data-slot": "scroll-area-thumb",
+      className: cn2("relative bg-overlay/8 transition-[background-color,width,height] duration-moderate ease-in-out", "group-hover/scrollbar:bg-overlay/12 active:!bg-overlay/16", shape.bg, orientation === "vertical" && "mx-auto my-1 w-1 -translate-x-0.5 h-[var(--scroll-area-thumb-height)] group-hover/scrollbar:w-1.5", orientation === "horizontal" && "my-auto mx-1 h-1 -translate-y-0.5 w-[var(--scroll-area-thumb-width)] group-hover/scrollbar:h-1.5")
+    })
+  });
+});
+ScrollBar2.displayName = "ScrollBar";
+Object.assign(ScrollArea2, { Bar: ScrollBar2 });
+var scroll_area_default = ScrollArea2;
+
+export { ScrollArea2, ScrollBar2, scroll_area_default };