@dreamtree-org/twreact-ui 1.2.1 → 1.3.1

package/dist/esm/components/feedback/Tour.js

@@ -0,0 +1,214 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useId, useState, useLayoutEffect, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import Button from '../core/Button.js';
+import { cn } from '../../utils/cn.js';
+import { computePosition, setRefs } from '../../utils/position.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+import { useScrollLock } from '../../hooks/useScrollLock.js';
+import { useTourTarget } from '../../hooks/useTourTarget.js';
+import TourSpotlight from './TourSpotlight.js';
+
+var _excluded = ["open", "steps", "onClose", "onFinish", "step", "defaultStep", "onStepChange", "labels", "targetTimeout", "spotlightPadding", "className"];
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var DEFAULT_LABELS = {
+  next: "Next",
+  back: "Back",
+  skip: "Skip",
+  finish: "Finish",
+  close: "Close tour",
+  progress: function progress(current, total) {
+    return "Step ".concat(current, " of ").concat(total);
+  }
+};
+var Tour = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
+  var _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
+    _ref$steps = _ref.steps,
+    steps = _ref$steps === void 0 ? [] : _ref$steps,
+    onClose = _ref.onClose,
+    onFinish = _ref.onFinish,
+    stepProp = _ref.step,
+    _ref$defaultStep = _ref.defaultStep,
+    defaultStep = _ref$defaultStep === void 0 ? 0 : _ref$defaultStep,
+    onStepChange = _ref.onStepChange,
+    labels = _ref.labels,
+    _ref$targetTimeout = _ref.targetTimeout,
+    targetTimeout = _ref$targetTimeout === void 0 ? 3000 : _ref$targetTimeout,
+    _ref$spotlightPadding = _ref.spotlightPadding,
+    spotlightPadding = _ref$spotlightPadding === void 0 ? 6 : _ref$spotlightPadding,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cardRef = useRef(null);
+  var baseId = useId();
+  var text = _objectSpread2(_objectSpread2({}, DEFAULT_LABELS), labels);
+  // Each opening is a new session: the uncontrolled step restarts and stale
+  // target measurements from the previous run are ignored.
+  var _useState = useState({
+      open: open,
+      count: 0,
+      step: defaultStep
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    session = _useState2[0],
+    setSession = _useState2[1];
+  if (session.open !== open) setSession({
+    open: open,
+    count: session.count + (open ? 1 : 0),
+    step: defaultStep
+  });
+  var total = steps.length;
+  var rawIndex = stepProp !== null && stepProp !== void 0 ? stepProp : session.step;
+  var index = Math.max(0, Math.min(rawIndex, total - 1));
+  var current = steps[index];
+  var active = open && total > 0;
+  var stepKey = "".concat(session.count, ":").concat(index);
+  var _useTourTarget = useTourTarget({
+      active: active,
+      stepKey: stepKey,
+      target: (current === null || current === void 0 ? void 0 : current.placement) === "center" ? null : current === null || current === void 0 ? void 0 : current.target,
+      timeout: targetTimeout
+    }),
+    rect = _useTourTarget.rect,
+    ready = _useTourTarget.ready;
+  var goTo = function goTo(next) {
+    if (next < 0 || next >= total || next === index) return;
+    if (stepProp === undefined) setSession(function (s) {
+      return _objectSpread2(_objectSpread2({}, s), {}, {
+        step: next
+      });
+    });
+    onStepChange === null || onStepChange === void 0 || onStepChange(next, steps[next]);
+  };
+  var close = function close(reason) {
+    return onClose === null || onClose === void 0 ? void 0 : onClose(reason);
+  };
+  var finish = function finish() {
+    onFinish === null || onFinish === void 0 || onFinish();
+    close("finish");
+  };
+  useScrollLock(active);
+  useFocusTrap(cardRef, {
+    active: active,
+    focusKey: stepKey,
+    initialFocusRef: cardRef,
+    onEscape: function onEscape() {
+      return close("escape");
+    }
+  });
+  useIsomorphicLayoutEffect(function () {
+    var card = cardRef.current;
+    if (!card) return;
+    if (!rect) {
+      card.style.top = "";
+      card.style.left = "";
+      return;
+    }
+    var size = {
+      width: card.offsetWidth,
+      height: card.offsetHeight
+    };
+    var pos = computePosition(rect, size, {
+      placement: (current === null || current === void 0 ? void 0 : current.placement) || "bottom",
+      offset: spotlightPadding + 10
+    });
+    card.style.top = "".concat(pos.top, "px");
+    card.style.left = "".concat(pos.left, "px");
+  }, [rect, ready, index, current === null || current === void 0 ? void 0 : current.placement, spotlightPadding]);
+  if (!active || typeof document === "undefined") return null;
+  var isFirst = index === 0;
+  var isLast = index === total - 1;
+  var titleId = "tour-title-".concat(baseId);
+  var bodyId = "tour-body-".concat(baseId);
+  var handleKeyDown = function handleKeyDown(e) {
+    var _e$target$closest, _e$target;
+    if ((_e$target$closest = (_e$target = e.target).closest) !== null && _e$target$closest !== void 0 && _e$target$closest.call(_e$target, "input, textarea, select, [contenteditable='true']")) return;
+    if (e.key === "ArrowRight") goTo(index + 1);else if (e.key === "ArrowLeft") goTo(index - 1);
+  };
+  return /*#__PURE__*/createPortal(jsxs("div", {
+    className: "fixed inset-0 z-50",
+    "data-testid": "tour-overlay",
+    children: [jsx(TourSpotlight, {
+      rect: ready ? rect : null,
+      padding: spotlightPadding
+    }), jsxs("div", _objectSpread2(_objectSpread2({
+      ref: function ref(node) {
+        return setRefs(node, cardRef, _ref2);
+      },
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": current.title ? titleId : undefined,
+      "aria-describedby": current.content ? bodyId : undefined,
+      tabIndex: -1,
+      onKeyDown: handleKeyDown,
+      "data-placement": rect ? current.placement || "bottom" : "center",
+      className: cn("fixed w-[min(22rem,calc(100vw-2rem))] max-h-[calc(100vh-2rem)] overflow-y-auto rounded-lg border border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "transition-opacity duration-200 motion-reduce:transition-none", !rect && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", ready ? "opacity-100" : "pointer-events-none opacity-0", className)
+    }, rest), {}, {
+      children: [jsxs("div", {
+        className: "flex items-start justify-between gap-3 px-4 pt-4",
+        children: [jsxs("div", {
+          className: "min-w-0",
+          children: [jsx("p", {
+            className: "text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400",
+            children: text.progress(index + 1, total)
+          }), current.title && jsx("h2", {
+            id: titleId,
+            className: "mt-1 text-base font-semibold",
+            children: current.title
+          })]
+        }), jsx("button", {
+          type: "button",
+          onClick: function onClick() {
+            return close("close");
+          },
+          "aria-label": text.close,
+          className: "rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:text-gray-400 dark:hover:bg-gray-800",
+          children: jsx(X, {
+            className: "h-4 w-4",
+            "aria-hidden": "true"
+          })
+        })]
+      }), current.content && jsx("div", {
+        id: bodyId,
+        className: "px-4 pt-2 text-sm text-gray-600 dark:text-gray-300",
+        children: current.content
+      }), jsxs("div", {
+        className: "flex items-center justify-between gap-2 px-4 py-4",
+        children: [isLast ? jsx("span", {}) : jsx(Button, {
+          variant: "ghost",
+          size: "sm",
+          onClick: function onClick() {
+            return close("skip");
+          },
+          children: text.skip
+        }), jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [!isFirst && jsx(Button, {
+            variant: "outline",
+            size: "sm",
+            onClick: function onClick() {
+              return goTo(index - 1);
+            },
+            children: text.back
+          }), isLast ? jsx(Button, {
+            size: "sm",
+            onClick: finish,
+            children: text.finish
+          }) : jsx(Button, {
+            size: "sm",
+            onClick: function onClick() {
+              return goTo(index + 1);
+            },
+            children: text.next
+          })]
+        })]
+      })]
+    }))]
+  }), document.body);
+});
+Tour.displayName = "Tour";
+
+export { Tour as default };

package/dist/esm/components/feedback/TourSpotlight.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+
+// Internal to Tour (not exported). Four dim panels around the target plus a
+// ring, instead of one overlay with a hole: no SVG mask or clip-path support
+// needed, and the panels' geometry can animate with plain transitions.
+var DIM = "absolute bg-black/60 transition-[top,left,width,height] duration-200 motion-reduce:transition-none";
+var TourSpotlight = function TourSpotlight(_ref) {
+  var rect = _ref.rect,
+    padding = _ref.padding;
+  if (!rect) return jsx("div", {
+    "aria-hidden": "true",
+    className: "absolute inset-0 bg-black/60",
+    "data-testid": "tour-backdrop"
+  });
+  var top = Math.max(0, rect.top - padding);
+  var left = Math.max(0, rect.left - padding);
+  var bottom = rect.bottom + padding;
+  var right = rect.right + padding;
+  var height = bottom - top;
+  return jsxs("div", {
+    "aria-hidden": "true",
+    "data-testid": "tour-spotlight",
+    children: [jsx("div", {
+      className: DIM,
+      style: {
+        top: 0,
+        left: 0,
+        right: 0,
+        height: top
+      }
+    }), jsx("div", {
+      className: DIM,
+      style: {
+        top: bottom,
+        left: 0,
+        right: 0,
+        bottom: 0
+      }
+    }), jsx("div", {
+      className: DIM,
+      style: {
+        top: top,
+        left: 0,
+        width: left,
+        height: height
+      }
+    }), jsx("div", {
+      className: DIM,
+      style: {
+        top: top,
+        left: right,
+        right: 0,
+        height: height
+      }
+    }), jsx("div", {
+      "data-testid": "tour-ring",
+      className: "pointer-events-none absolute rounded-lg ring-2 ring-white ring-offset-0 transition-[top,left,width,height] duration-200 motion-reduce:transition-none dark:ring-primary-400",
+      style: {
+        top: top,
+        left: left,
+        width: right - left,
+        height: height
+      }
+    })]
+  });
+};
+TourSpotlight.displayName = "TourSpotlight";
+
+export { TourSpotlight as default };

package/dist/esm/components/navigation/Breadcrumbs.js

@@ -0,0 +1,75 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import { ChevronRight, Home } from 'lucide-react';
+
+var _excluded = ["items", "separator", "showHome", "homeIcon", "onHomeClick", "className"];
+// Items without an `id` still need a stable, unique React key.
+var itemKey = function itemKey(item, index) {
+  var _ref, _item$href;
+  return item.id != null ? "id:".concat(item.id) : "idx:".concat(index, ":").concat((_ref = (_item$href = item.href) !== null && _item$href !== void 0 ? _item$href : item.label) !== null && _ref !== void 0 ? _ref : '');
+};
+var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$separator = _ref2.separator,
+    separator = _ref2$separator === void 0 ? jsx(ChevronRight, {
+      className: "h-4 w-4"
+    }) : _ref2$separator,
+    _ref2$showHome = _ref2.showHome,
+    showHome = _ref2$showHome === void 0 ? true : _ref2$showHome,
+    _ref2$homeIcon = _ref2.homeIcon,
+    homeIcon = _ref2$homeIcon === void 0 ? jsx(Home, {
+      className: "h-4 w-4"
+    }) : _ref2$homeIcon,
+    onHomeClick = _ref2.onHomeClick,
+    className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var allItems = showHome ? [{
+    id: 'home',
+    label: 'Home',
+    href: '/',
+    icon: homeIcon,
+    onClick: onHomeClick
+  }].concat(_toConsumableArray(items)) : items;
+  return jsx("nav", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('flex items-center space-x-1 text-sm', className),
+    "aria-label": "Breadcrumb"
+  }, props), {}, {
+    children: allItems.map(function (item, index) {
+      return jsxs(React.Fragment, {
+        children: [index > 0 && jsx("span", {
+          className: "text-primary-400",
+          "aria-hidden": "true",
+          children: separator
+        }), index === allItems.length - 1 ? jsxs("span", {
+          className: "font-medium text-primary-900",
+          "aria-current": "page",
+          children: [item.icon && jsx("span", {
+            className: "mr-1",
+            children: item.icon
+          }), item.label]
+        }) : jsxs("a", {
+          href: item.href,
+          className: "flex items-center text-primary-500 transition-colors",
+          onClick: function onClick(e) {
+            if (item.onClick) {
+              e.preventDefault();
+              item.onClick(item);
+            }
+          },
+          children: [item.icon && jsx("span", {
+            className: "mr-1",
+            children: item.icon
+          }), item.label]
+        })]
+      }, itemKey(item, index));
+    })
+  }));
+});
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+export { Breadcrumbs as default };

package/dist/esm/components/navigation/Dropdown.js

@@ -0,0 +1,53 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+
+var _excluded = ["trigger", "children", "placement", "className"];
+var Dropdown = function Dropdown(_ref) {
+  var trigger = _ref.trigger,
+    children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var dropdownRef = useRef(null);
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var placementClasses = {
+    'bottom-start': 'top-full left-0 mt-1',
+    'bottom-end': 'top-full right-0 mt-1',
+    'top-start': 'bottom-full left-0 mb-1',
+    'top-end': 'bottom-full right-0 mb-1'
+  };
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    className: "relative inline-block ".concat(className),
+    ref: dropdownRef
+  }, props), {}, {
+    children: [jsx("div", {
+      onClick: function onClick() {
+        return setIsOpen(!isOpen);
+      },
+      children: trigger
+    }), isOpen && jsx("div", {
+      className: "absolute z-50 bg-white border border-gray-200 rounded-md shadow-lg ".concat(placementClasses[placement], " min-w-48"),
+      children: children
+    })]
+  }));
+};
+
+export { Dropdown };

package/dist/esm/components/navigation/FootNav.js

@@ -0,0 +1,51 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["items", "className"];
+var hasBadge = function hasBadge(badge) {
+  return badge === 0 || Boolean(badge);
+};
+var FootNav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsx("nav", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('fixed bottom-0 left-0 right-0 bg-surface border-t border-line px-2 py-2 md:hidden', className)
+  }, props), {}, {
+    children: jsx("div", {
+      className: "flex items-stretch justify-around gap-1",
+      children: items.map(function (item, index) {
+        var _item$id;
+        return jsxs("button", {
+          type: "button",
+          "aria-current": item.active ? 'page' : undefined,
+          className: cn('relative flex min-w-0 flex-1 flex-col items-center gap-1 rounded-md px-1 py-2 text-xs transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 motion-reduce:transition-none', item.active ? 'bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300' : 'font-medium text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800'),
+          onClick: function onClick() {
+            var _item$onClick;
+            return (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, item);
+          },
+          children: [jsxs("span", {
+            className: "relative inline-flex text-lg",
+            "data-slot": "icon",
+            children: [item.icon, hasBadge(item.badge) && jsx("span", {
+              className: "absolute -top-1.5 left-full -ml-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-600 px-1 text-micro font-semibold text-white",
+              "data-slot": "badge",
+              children: item.badge
+            })]
+          }), jsx("span", {
+            className: "block max-w-full truncate",
+            children: item.label
+          })]
+        }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
+      })
+    })
+  }));
+});
+FootNav.displayName = 'FootNav';
+
+export { FootNav as default };