@pichetch08/trip-ui 0.1.0

package/dist/tooltip.js

@@ -0,0 +1,69 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+function Tooltip({
+  content,
+  children,
+  placement = "top",
+  delay = 300
+}) {
+  const [visible, setVisible] = useState(false);
+  const timerRef = useRef(null);
+  const show = () => {
+    timerRef.current = setTimeout(() => setVisible(true), delay);
+  };
+  const hide = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setVisible(false);
+  };
+  const positionClasses = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2"
+  };
+  const arrowClasses = {
+    top: "top-full left-1/2 -translate-x-1/2 border-t-on-surface border-x-transparent border-b-transparent",
+    bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-on-surface border-x-transparent border-t-transparent",
+    left: "left-full top-1/2 -translate-y-1/2 border-l-on-surface border-y-transparent border-r-transparent",
+    right: "right-full top-1/2 -translate-y-1/2 border-r-on-surface border-y-transparent border-l-transparent"
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "relative inline-block",
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            role: "tooltip",
+            className: `absolute z-50 px-3 py-1.5 text-xs font-medium bg-on-surface text-surface rounded-lg whitespace-nowrap shadow-lg pointer-events-none transition-opacity duration-150 ${positionClasses[placement]} ${visible ? "opacity-100" : "opacity-0"}`,
+            children: [
+              content,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: `absolute border-4 ${arrowClasses[placement]}`,
+                  style: { borderStyle: "solid" }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Tooltip
+};

package/dist/trip-day-map-lazy.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface MapActivity {
+    name: string;
+    lat: number;
+    lng: number;
+    time?: string | null;
+}
+interface TripDayMapLazyProps {
+    activities: MapActivity[];
+    height?: string;
+}
+declare function TripDayMapLazy(props: TripDayMapLazyProps): react_jsx_runtime.JSX.Element;
+
+export { type MapActivity, TripDayMapLazy };

package/dist/trip-day-map-lazy.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  __spreadValues
+} from "./chunk-ORMEWXMH.js";
+import { jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+const TripDayMapInner = dynamic(
+  () => import("./trip-day-map").then((m) => ({ default: m.TripDayMap })),
+  { ssr: false, loading: () => /* @__PURE__ */ jsx("div", { className: "w-full h-[280px] rounded-2xl bg-surface-variant animate-pulse" }) }
+);
+function TripDayMapLazy(props) {
+  return /* @__PURE__ */ jsx(TripDayMapInner, __spreadValues({}, props));
+}
+export {
+  TripDayMapLazy
+};

package/dist/trip-day-map.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface MapActivity {
+    name: string;
+    lat: number;
+    lng: number;
+    time?: string | null;
+}
+interface TripDayMapProps {
+    activities: MapActivity[];
+    height?: string;
+}
+declare function TripDayMap({ activities, height }: TripDayMapProps): react_jsx_runtime.JSX.Element | null;
+
+export { type MapActivity, TripDayMap };

package/dist/trip-day-map.js

@@ -0,0 +1,62 @@
+"use client";
+import "./chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { MapContainer, TileLayer, Marker, Popup, Polyline, useMap } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+function BoundsFitter({ positions }) {
+  const map = useMap();
+  useEffect(() => {
+    if (positions.length === 0) return;
+    if (positions.length === 1) {
+      map.setView(positions[0], 14);
+    } else {
+      map.fitBounds(positions, { padding: [32, 32] });
+    }
+  }, [map, positions]);
+  return null;
+}
+function TripDayMap({ activities, height = "280px" }) {
+  var _a;
+  const positions = activities.map((a) => [a.lat, a.lng]);
+  const center = (_a = positions[0]) != null ? _a : [13.75, 100.52];
+  useEffect(() => {
+    import("leaflet").then((L) => {
+      delete L.Icon.Default.prototype._getIconUrl;
+      L.Icon.Default.mergeOptions({
+        iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+        iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+        shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png"
+      });
+    });
+  }, []);
+  if (activities.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { style: { height }, className: "w-full rounded-2xl overflow-hidden border border-outline-variant/30", children: /* @__PURE__ */ jsxs(
+    MapContainer,
+    {
+      center,
+      zoom: 13,
+      style: { height: "100%", width: "100%" },
+      scrollWheelZoom: false,
+      attributionControl: false,
+      children: [
+        /* @__PURE__ */ jsx(TileLayer, { url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }),
+        /* @__PURE__ */ jsx(BoundsFitter, { positions }),
+        activities.length > 1 && /* @__PURE__ */ jsx(
+          Polyline,
+          {
+            positions,
+            pathOptions: { color: "var(--primary)", weight: 2.5, opacity: 0.7, dashArray: "6 4" }
+          }
+        ),
+        activities.map((act, i) => /* @__PURE__ */ jsx(Marker, { position: [act.lat, act.lng], children: /* @__PURE__ */ jsxs(Popup, { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: act.name }),
+          act.time && /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: act.time })
+        ] }) }, i))
+      ]
+    }
+  ) });
+}
+export {
+  TripDayMap
+};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@pichetch08/trip-ui",
+  "version": "0.1.0",
+  "description": "Trip UI — shared React component library built with Tailwind v4 and Material Design 3 tokens",
+  "author": "pichetch08",
+  "license": "MIT",
+  "keywords": ["react", "tailwind", "material-design", "ui", "components", "trip"],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "clsx": ">=2",
+    "next": ">=15",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "tailwind-merge": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "next": { "optional": true }
+  },
+  "dependencies": {
+    "leaflet": "^1.9.4",
+    "qrcode": "^1.5.4",
+    "react-leaflet": "^5.0.0",
+    "@tiptap/extension-link": "^3.22.5",
+    "@tiptap/pm": "^3.22.5",
+    "@tiptap/react": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.1.2",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-onboarding": "^10.3.6",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@tailwindcss/postcss": "^4.2.4",
+    "@types/leaflet": "^1.9.21",
+    "@types/qrcode": "^1.5.6",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitest/browser-playwright": "^4.1.5",
+    "@vitest/coverage-v8": "^4.1.5",
+    "clsx": "^2.1.1",
+    "next": "^16.2.1",
+    "playwright": "^1.59.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "storybook": "^10.3.6",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.5"
+  }
+}