@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-6t6nr33r.js

@@ -0,0 +1,86 @@
+import {
+  button_default
+} from "./components-5pkcfprd.js";
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  SurfaceProvider,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  MorphPart,
+  MorphSurface
+} from "./components-jxgznftn.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  opensInPlace,
+  useMorph,
+  useMorphOrigin
+} from "./components-7nww01w4.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// primitives/morph/index.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Morph({
+  from = "trigger",
+  effect = "goo",
+  tier = "slow",
+  hideSource = false,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  label = "Open",
+  className,
+  children
+}) {
+  const [shown, setShown] = useControllableState(open, defaultOpen, onOpenChange);
+  const [mounted, setMounted] = useState(shown);
+  if (shown && !mounted)
+    setMounted(true);
+  const { origin, capture } = useMorphOrigin();
+  const morph = useMorph(shown, origin, { from, effect, tier, hideSource }, () => setMounted(false));
+  const shape = useShape();
+  const level = Math.min(useSurface() + 2, 8);
+  const inPlace = opensInPlace({ effect, hideSource });
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("relative inline-flex flex-col items-center", className),
+    children: [
+      /* @__PURE__ */ jsx(button_default, {
+        variant: "secondary",
+        "aria-expanded": shown,
+        onClick: (event) => {
+          if (!shown)
+            capture({ trigger: event.currentTarget, event: event.nativeEvent });
+          setShown(!shown);
+        },
+        children: shown ? "Close" : label
+      }),
+      mounted && /* @__PURE__ */ jsx("div", {
+        ref: morph.popupRef,
+        className: inPlace ? "absolute top-0 left-0 z-10" : "absolute top-full left-1/2 z-10 mt-3 -translate-x-1/2",
+        onClick: inPlace ? () => setShown(false) : undefined,
+        children: /* @__PURE__ */ jsx(SurfaceProvider, {
+          value: level,
+          children: /* @__PURE__ */ jsx(MorphSurface, {
+            morph,
+            bg: SURFACE_BG[level],
+            shadow: SURFACE_SHADOW[level],
+            radius: shape.container,
+            className: "w-56 p-4",
+            children
+          })
+        })
+      })
+    ]
+  });
+}
+Morph.Part = MorphPart;
+export { Morph };

package/dist/shared/components-6y1th6k4.js

@@ -0,0 +1,111 @@
+import {
+  SURFACE_BG,
+  SURFACE_SHADOW,
+  SurfaceProvider,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  MorphSurface
+} from "./components-jxgznftn.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  inPlaceOffset,
+  opensInPlace,
+  useMorph,
+  useMorphOrigin
+} from "./components-7nww01w4.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/overlays/preview-card/index.tsx
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useMemo
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var PreviewCardContext = createContext({ open: false, origin: { current: {} } });
+var PreviewCardTrigger = forwardRef(({ render, className, ...props }, ref) => /* @__PURE__ */ jsx(PreviewCardPrimitive.Trigger, {
+  ref,
+  render,
+  className: cn(!render && "weight-medium text-foreground underline decoration-border underline-offset-4 transition-colors duration-fast hover:decoration-foreground", className),
+  ...props
+}));
+PreviewCardTrigger.displayName = "PreviewCardTrigger";
+var PreviewCardContent = forwardRef(({
+  side = "bottom",
+  align,
+  sideOffset = 12,
+  from,
+  effect,
+  hideSource,
+  tier,
+  container,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const { open, origin } = useContext(PreviewCardContext);
+  const morph = useMorph(open, origin, { from, effect, hideSource, tier });
+  const inPlace = opensInPlace({ effect, hideSource });
+  useImperativeHandle(ref, () => morph.popup, [morph.popup]);
+  const shape = useShape();
+  const level = Math.min(useSurface() + 2, 8);
+  return /* @__PURE__ */ jsx(PreviewCardPrimitive.Portal, {
+    container: container ?? undefined,
+    children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Positioner, {
+      side,
+      align: align ?? (inPlace ? "start" : "center"),
+      sideOffset: inPlace ? inPlaceOffset : sideOffset,
+      className: "z-50 outline-none",
+      children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Popup, {
+        ref: morph.popupRef,
+        className: "relative outline-none",
+        ...props,
+        children: /* @__PURE__ */ jsx(SurfaceProvider, {
+          value: level,
+          children: /* @__PURE__ */ jsx(MorphSurface, {
+            morph,
+            bg: SURFACE_BG[level],
+            shadow: SURFACE_SHADOW[3],
+            radius: shape.container,
+            className: cn("flex w-max max-w-[min(92vw,20rem)] flex-col gap-3 p-4", className),
+            children
+          })
+        })
+      })
+    })
+  });
+});
+PreviewCardContent.displayName = "PreviewCardContent";
+function PreviewCard({ open, defaultOpen = false, onOpenChange, children }) {
+  const [current, setCurrent] = useControllableState(open, defaultOpen, onOpenChange);
+  const { origin, capture } = useMorphOrigin();
+  const ctx = useMemo(() => ({ open: current, origin }), [current, origin]);
+  return /* @__PURE__ */ jsx(PreviewCardContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Root, {
+      open: current,
+      onOpenChange: (next, details) => {
+        if (next)
+          capture(details);
+        setCurrent(next);
+      },
+      children
+    })
+  });
+}
+PreviewCard.Trigger = PreviewCardTrigger;
+PreviewCard.Content = PreviewCardContent;
+var preview_card_default = PreviewCard;
+
+export { PreviewCardTrigger, PreviewCardContent, PreviewCard, preview_card_default };

package/dist/shared/components-74c20v2f.js

@@ -0,0 +1,32 @@
+import {
+  SurfaceProvider,
+  surfaceClasses,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// primitives/surface/index.tsx
+import {
+  forwardRef
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var Elevated = forwardRef(({ offset, shadowLevel, className, children, ...props }, ref) => {
+  const substrate = useSurface();
+  const level = Math.min(substrate + offset, 8);
+  return /* @__PURE__ */ jsx(SurfaceProvider, {
+    value: level,
+    children: /* @__PURE__ */ jsx("div", {
+      ref,
+      className: cn(surfaceClasses(level, shadowLevel ?? level), className),
+      ...props,
+      children
+    })
+  });
+});
+Elevated.displayName = "Elevated";
+Object.assign(Elevated, { Provider: SurfaceProvider });
+var surface_default = Elevated;
+
+export { Elevated, surface_default };

package/dist/shared/components-7cqq1sqy.js

@@ -0,0 +1,193 @@
+import {
+  fieldIconClasses,
+  fieldVariants
+} from "./components-de8xsm9y.js";
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  useFluidHover,
+  useRegisterFluidHoverItem
+} from "./components-e46kf6cp.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  useSize
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.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 Input = 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 = useSize(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: cn(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: cn("w-full rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, "weight-normal"),
+        ...props
+      })
+    ]
+  });
+});
+Input.displayName = "Input";
+var Label = forwardRef(({ children, invalid, size, className, ...props }, ref) => {
+  const sizeClasses = useSize(size);
+  const compact = sizeClasses.variant === "compact";
+  return /* @__PURE__ */ jsxs("label", {
+    ref,
+    className: cn("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: cn("col-start-1 row-start-1", invalid ? "text-destructive" : "text-muted-foreground", "weight-normal"),
+        children
+      })
+    ]
+  });
+});
+Label.displayName = "Label";
+var InputGroup = forwardRef(({ children, size, className, ...props }, ref) => {
+  const containerRef = useRef(null);
+  const { activeIndex, handlers, registerItem } = useFluidHover(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: cn("relative flex flex-col gap-3 w-72 max-w-full", className),
+      ...props,
+      children
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider, {
+    size,
+    children: group
+  }) : group;
+});
+InputGroup.displayName = "InputGroup";
+var InputField = forwardRef(({ label, labelHidden, index, error, disabled, className, ...props }, ref) => {
+  const internalRef = useRef(null);
+  const { registerItem, activeIndex } = useInputGroup();
+  const sizeClasses = useSize();
+  const compact = sizeClasses.variant === "compact";
+  useRegisterFluidHoverItem(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: cn("flex flex-col gap-1 cursor-text", disabled && "pointer-events-none", className),
+    children: [
+      /* @__PURE__ */ jsx(Field.Label, {
+        render: /* @__PURE__ */ jsx(Label, {
+          invalid: !!error,
+          className: labelHidden ? "sr-only" : undefined,
+          children: label
+        })
+      }),
+      /* @__PURE__ */ jsx(FieldStateContext.Provider, {
+        value: fieldState,
+        children: /* @__PURE__ */ jsx(Input, {
+          invalid: !!error,
+          disabled,
+          ...props
+        })
+      }),
+      error && /* @__PURE__ */ jsx(Field.Error, {
+        match: true,
+        className: cn("text-destructive", compact ? "text-caption-compact pl-2" : "text-caption pl-2.5", "weight-medium"),
+        children: error
+      })
+    ]
+  });
+});
+InputField.displayName = "InputField";
+Object.assign(InputGroup, { Field: InputField });
+var input_default = Input;
+
+export { Input, Label, InputGroup, input_default };