@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

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

@@ -0,0 +1,125 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useContext } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useHaptics } from '../../hooks/useHaptics.js';
+import { setRefs } from '../../utils/position.js';
+import { SheetCore, SheetContext, mergeHandlers, SheetCloseButton, SHEET_PLACEMENTS } from './sheetCore.js';
+
+var _excluded = ["open", "isOpen", "placement", "title", "description", "showCloseButton", "haptics", "onSnapChange"],
+  _excluded2 = ["className"],
+  _excluded3 = ["className"],
+  _excluded4 = ["className"];
+// Phone-native sheet (ADR 0001). Bottom by default; snap points, drag to
+// dismiss, keyboard-aware via visualViewport. The behaviour lives in the
+// internal sheet core (./sheetCore.jsx), shared with Drawer (DTUI-33).
+var PANEL_CLASSES = {
+  bottom: "inset-x-0 bottom-0 w-full rounded-t-sheet border-t pb-safe px-safe max-h-[calc(100dvh-env(safe-area-inset-top)-1rem)]",
+  top: "inset-x-0 top-0 w-full rounded-b-sheet border-b pt-safe px-safe max-h-[calc(100dvh-env(safe-area-inset-top)-1rem)]",
+  right: "inset-y-0 right-0 h-dvh w-[min(88vw,24rem)] border-l py-safe pr-safe",
+  left: "inset-y-0 left-0 h-dvh w-[min(88vw,24rem)] border-r py-safe pl-safe"
+};
+var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var open = _ref.open,
+    isOpen = _ref.isOpen,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$showCloseButton = _ref.showCloseButton,
+    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
+    _ref$haptics = _ref.haptics,
+    haptics = _ref$haptics === void 0 ? false : _ref$haptics,
+    onSnapChange = _ref.onSnapChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Opt-in: a selection tick when a drag or arrow key settles on a new snap point.
+  var _useHaptics = useHaptics({
+      enabled: haptics
+    }),
+    haptic = _useHaptics.trigger;
+  var handleSnapChange = function handleSnapChange(index) {
+    haptic("selection");
+    onSnapChange === null || onSnapChange === void 0 || onSnapChange(index);
+  };
+  var side = SHEET_PLACEMENTS.includes(placement) ? placement : "bottom";
+  var hasHeader = title != null || description != null;
+  var renderHeader = function renderHeader(_ref2) {
+    var titleId = _ref2.titleId,
+      descriptionId = _ref2.descriptionId,
+      requestClose = _ref2.requestClose,
+      showHandle = _ref2.showHandle;
+    return hasHeader ? jsxs(SheetHeader, {
+      className: cn("flex items-start justify-between gap-4", showHandle && side === "bottom" && "pt-1"),
+      children: [jsxs("div", {
+        className: "min-w-0",
+        children: [title != null && jsx("h2", {
+          id: titleId,
+          className: "text-lg font-semibold",
+          children: title
+        }), description != null && jsx("p", {
+          id: descriptionId,
+          className: "mt-1 text-sm text-muted",
+          children: description
+        })]
+      }), showCloseButton && jsx(SheetCloseButton, {
+        label: "Close sheet",
+        onClick: function onClick() {
+          return requestClose("close-button");
+        }
+      })]
+    }) : null;
+  };
+  return jsx(SheetCore, _objectSpread2({
+    ref: ref,
+    open: Boolean(open !== null && open !== void 0 ? open : isOpen),
+    placement: side,
+    hasTitle: title != null,
+    hasDescription: description != null,
+    panelClassName: cn("border-line bg-surface text-foreground", PANEL_CLASSES[side]),
+    renderHeader: renderHeader,
+    onSnapChange: handleSnapChange
+  }, props));
+});
+Sheet.displayName = "Sheet";
+var SheetHeader = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded2);
+  var ctx = useContext(SheetContext);
+  var dragProps = ctx ? mergeHandlers(ctx.headerDragProps, props) : {};
+  return jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: ref
+  }, props), dragProps), {}, {
+    className: cn("shrink-0 border-b border-line px-4 py-3", ctx === null || ctx === void 0 ? void 0 : ctx.grabClass, className)
+  }));
+});
+var SheetBody = /*#__PURE__*/React.forwardRef(function (_ref4, _ref5) {
+  var className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  var ctx = useContext(SheetContext);
+  var dragProps = ctx ? mergeHandlers(ctx.bodyDragProps, props) : {};
+  return jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: function ref(node) {
+      return setRefs(node, _ref5, ctx === null || ctx === void 0 ? void 0 : ctx.setBodyEl);
+    },
+    "data-sheet-body": ""
+  }, props), dragProps), {}, {
+    className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4", className)
+  }));
+});
+var SheetFooter = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var className = _ref6.className,
+    props = _objectWithoutProperties(_ref6, _excluded4);
+  return jsx("div", _objectSpread2({
+    ref: ref,
+    className: cn("sticky bottom-0 flex shrink-0 items-center justify-end gap-3 border-t border-line bg-surface px-4 py-3", className)
+  }, props));
+});
+SheetHeader.displayName = "Sheet.Header";
+SheetBody.displayName = "Sheet.Body";
+SheetFooter.displayName = "Sheet.Footer";
+Sheet.Header = SheetHeader;
+Sheet.Body = SheetBody;
+Sheet.Footer = SheetFooter;
+
+export { Sheet as default };

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

@@ -1,287 +1,16 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useEffect, useContext, createContext, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '../../utils/cn.js';
-import { Bell, Info, AlertTriangle, XCircle, CheckCircle2, X } from 'lucide-react';
-import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, createContext, useState, useCallback, useMemo } from 'react';
+import Toast from './ToastItem.js';
+import ToastStack from './ToastStack.js';
 
-var _excluded = ["id", "title", "message", "description", "type", "duration", "onClose", "position", "statusIcon", "actions", "color", "footerNote", "showFooterNote", "portal", "className"];
-// Errors interrupt (role="alert", assertive); everything else waits for the
-// screen reader to finish (role="status", polite). Consumers can still pass
-// their own role / aria-live, which win because ...props spreads last.
-var liveRegionProps = function liveRegionProps(type) {
-  return type === 'error' ? {
-    role: 'alert',
-    'aria-live': 'assertive',
-    'aria-atomic': 'true'
-  } : {
-    role: 'status',
-    'aria-live': 'polite',
-    'aria-atomic': 'true'
-  };
-};
-var STATUS_CONFIG = {
-  success: {
-    icon: CheckCircle2,
-    iconClass: 'text-emerald-500 dark:text-emerald-400',
-    progressClass: 'bg-emerald-500 dark:bg-emerald-400'
-  },
-  error: {
-    icon: XCircle,
-    iconClass: 'text-rose-500 dark:text-rose-400',
-    progressClass: 'bg-rose-500 dark:bg-rose-400'
-  },
-  warning: {
-    icon: AlertTriangle,
-    iconClass: 'text-amber-500 dark:text-amber-400',
-    progressClass: 'bg-amber-500 dark:bg-amber-400'
-  },
-  info: {
-    icon: Info,
-    iconClass: 'text-sky-500 dark:text-sky-400',
-    progressClass: 'bg-sky-500 dark:bg-sky-400'
-  },
-  "default": {
-    icon: Bell,
-    iconClass: 'text-primary-500 dark:text-primary-400',
-    progressClass: 'bg-primary-500 dark:bg-primary-400'
-  }
-};
-var POSITION_CLASSES = {
-  'top-right': 'top-4 right-4 items-end',
-  'top-left': 'top-4 left-4 items-start',
-  'bottom-right': 'bottom-4 right-4 items-end',
-  'bottom-left': 'bottom-4 left-4 items-start',
-  'top-center': 'top-4 left-1/2 transform -translate-x-1/2 items-center',
-  'bottom-center': 'bottom-4 left-1/2 transform -translate-x-1/2 items-center'
-};
-var STANDALONE_POSITION_CLASSES = {
-  'top-right': 'top-4 right-4',
-  'top-left': 'top-4 left-4',
-  'bottom-right': 'bottom-4 right-4',
-  'bottom-left': 'bottom-4 left-4',
-  'top-center': 'top-4 left-1/2 transform -translate-x-1/2',
-  'bottom-center': 'bottom-4 left-1/2 transform -translate-x-1/2'
-};
-var Toast = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-    title = _ref.title,
-    message = _ref.message,
-    description = _ref.description,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'info' : _ref$type,
-    _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? 5000 : _ref$duration,
-    onClose = _ref.onClose,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'top-right' : _ref$position,
-    statusIcon = _ref.statusIcon,
-    _ref$actions = _ref.actions,
-    actions = _ref$actions === void 0 ? [] : _ref$actions,
-    color = _ref.color,
-    footerNote = _ref.footerNote,
-    _ref$showFooterNote = _ref.showFooterNote,
-    showFooterNote = _ref$showFooterNote === void 0 ? false : _ref$showFooterNote,
-    _ref$portal = _ref.portal,
-    portal = _ref$portal === void 0 ? true : _ref$portal,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isVisible = _useState2[0],
-    setIsVisible = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isLeaving = _useState4[0],
-    setIsLeaving = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isPaused = _useState6[0],
-    setIsPaused = _useState6[1];
-  var progressBarRef = useRef(null);
-  var timerTextRef = useRef(null);
-  var startTimeRef = useRef(null);
-  var remainingRef = useRef(duration);
-  var timerRef = useRef(null);
-  var animFrameRef = useRef(null);
-  var handleClose = useCallback(function () {
-    if (isLeaving) return;
-    setIsLeaving(true);
-    setTimeout(function () {
-      setIsVisible(false);
-      onClose === null || onClose === void 0 || onClose(id);
-    }, 300);
-  }, [id, onClose, isLeaving]);
-  var handleStopTimer = useCallback(function (e) {
-    e === null || e === void 0 || e.stopPropagation();
-    setIsPaused(true);
-    if (timerRef.current) clearTimeout(timerRef.current);
-    if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
-  }, []);
-  // Direct DOM-based progress updates to prevent 60 FPS React re-renders and glitches
-  useEffect(function () {
-    if (duration <= 0) return;
-    if (isPaused) {
-      if (timerRef.current) clearTimeout(timerRef.current);
-      if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
-      return;
-    }
-    startTimeRef.current = Date.now();
-    timerRef.current = setTimeout(function () {
-      handleClose();
-    }, remainingRef.current);
-    var _updateProgress = function updateProgress() {
-      var elapsed = startTimeRef.current ? Date.now() - startTimeRef.current : 0;
-      var currentRemaining = Math.max(0, remainingRef.current - elapsed);
-      var pct = currentRemaining / duration * 100;
-      if (progressBarRef.current) {
-        progressBarRef.current.style.width = "".concat(pct, "%");
-      }
-      if (timerTextRef.current) {
-        var secs = Math.ceil(currentRemaining / 1000);
-        timerTextRef.current.textContent = "This message will close in ".concat(secs, " seconds. ");
-      }
-      if (currentRemaining > 0 && !isPaused) {
-        animFrameRef.current = requestAnimationFrame(_updateProgress);
-      }
-    };
-    animFrameRef.current = requestAnimationFrame(_updateProgress);
-    return function () {
-      if (timerRef.current) clearTimeout(timerRef.current);
-      if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
-      if (!isPaused && startTimeRef.current) {
-        var elapsed = Date.now() - startTimeRef.current;
-        remainingRef.current = Math.max(0, remainingRef.current - elapsed);
-      }
-    };
-  }, [duration, isPaused, handleClose]);
-  if (!isVisible) return null;
-  var statusStyle = STATUS_CONFIG[type] || STATUS_CONFIG.info || STATUS_CONFIG["default"];
-  var StatusIconComponent = statusStyle.icon;
-  var bodyText = description || message;
-  var toastContent = jsxs("div", _objectSpread2(_objectSpread2(_objectSpread2({
-    ref: ref,
-    onMouseEnter: function onMouseEnter() {
-      return setIsPaused(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsPaused(false);
-    },
-    className: cn('relative overflow-hidden rounded-xl border border-slate-200/90 bg-white/95 shadow-xl backdrop-blur-md transition-all duration-300', 'dark:border-slate-800/80 dark:bg-[#18181b] dark:text-slate-100 dark:shadow-2xl', 'max-w-md w-full motion-reduce:transition-none', isLeaving ? 'opacity-0 scale-95 translate-y-1' : 'animate-slide-up motion-reduce:animate-none opacity-100 scale-100', portal ? ['fixed z-50', STANDALONE_POSITION_CLASSES[position] || STANDALONE_POSITION_CLASSES['top-right']] : '', className)
-  }, liveRegionProps(type)), props), {}, {
-    children: [jsx("div", {
-      className: "p-4",
-      children: jsxs("div", {
-        className: "flex items-start gap-3 justify-between",
-        children: [jsx("span", {
-          className: "flex-shrink-0 mt-0.5",
-          "aria-hidden": "true",
-          children: statusIcon ? statusIcon : jsx(StatusIconComponent, {
-            className: cn('h-5 w-5', statusStyle.iconClass)
-          })
-        }), jsxs("div", {
-          className: "flex-1 min-w-0 pr-2",
-          children: [title && jsx("h4", {
-            className: "text-sm font-semibold text-slate-900 dark:text-slate-100 leading-snug",
-            children: title
-          }), bodyText && jsx("p", {
-            className: "mt-1 text-xs text-slate-600 dark:text-slate-400 leading-relaxed whitespace-pre-line",
-            children: bodyText
-          }), actions && actions.length > 0 && jsx("div", {
-            className: "mt-3 flex items-center gap-2 flex-wrap",
-            children: actions.map(function (actItem, idx) {
-              return jsx("button", {
-                type: "button",
-                onClick: function onClick(e) {
-                  var _actItem$onClick;
-                  (_actItem$onClick = actItem.onClick) === null || _actItem$onClick === void 0 || _actItem$onClick.call(actItem, e);
-                  if (actItem.dismiss !== false) {
-                    handleClose();
-                  }
-                },
-                className: cn('px-3 py-1.5 text-xs font-medium rounded-lg transition-colors border shadow-xs', actItem.variant === 'primary' ? 'bg-primary-600 hover:bg-primary-700 text-white border-primary-600' : 'bg-slate-100 dark:bg-zinc-800/80 text-slate-700 dark:text-zinc-200 border-slate-200 dark:border-zinc-700 hover:bg-slate-200 dark:hover:bg-zinc-700', actItem.className),
-                children: actItem.label
-              }, actItem.id || actItem.label || "act-".concat(idx));
-            })
-          })]
-        }), jsx("button", {
-          type: "button",
-          "aria-label": "Close notification",
-          className: cn('inline-flex flex-shrink-0 items-center justify-center rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-zinc-800/70 transition-colors motion-reduce:transition-none outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET),
-          onClick: handleClose,
-          children: jsx(X, {
-            className: "h-4 w-4",
-            "aria-hidden": "true"
-          })
-        })]
-      })
-    }), (showFooterNote || footerNote) && duration > 0 && jsx("div", {
-      className: "px-4 py-2 bg-slate-50 dark:bg-zinc-950/40 border-t border-slate-100 dark:border-zinc-800/50 text-[11px] text-slate-500 dark:text-zinc-400 flex items-center justify-between",
-      children: jsx("span", {
-        children: footerNote ? footerNote : jsxs(Fragment, {
-          children: [jsxs("span", {
-            ref: timerTextRef,
-            children: ["This message will close in ", Math.ceil(duration / 1000), " seconds.", ' ']
-          }), jsx("button", {
-            type: "button",
-            onClick: handleStopTimer,
-            className: "font-medium text-slate-700 dark:text-zinc-200 hover:underline inline",
-            children: "Click to stop."
-          })]
-        })
-      })
-    }), duration > 0 && jsx("div", {
-      className: "absolute bottom-0 left-0 right-0 h-0.5 bg-slate-100 dark:bg-zinc-800/80 overflow-hidden rounded-b-xl",
-      children: jsx("div", {
-        ref: progressBarRef,
-        className: cn('h-full transition-all ease-linear', color ? '' : statusStyle.progressClass),
-        style: {
-          width: '100%',
-          backgroundColor: color || undefined
-        }
-      })
-    })]
-  }));
-  if (portal) {
-    return /*#__PURE__*/createPortal(toastContent, document.body);
-  }
-  return toastContent;
-});
-Toast.displayName = 'Toast';
+var _excluded = ["children", "position", "className"];
+// The toast family: the card (./ToastItem.jsx), the stack (./ToastStack.jsx),
+// and the queue shared by <ToastProvider> / useToast().
 // Shared queue for <ToastProvider>. `null` outside a provider, where useToast
 // falls back to its own component-local queue (the pre-provider behavior).
 var ToastContext = /*#__PURE__*/createContext(null);
-var ToastStack = function ToastStack(_ref2) {
-  var _ref2$toasts = _ref2.toasts,
-    toasts = _ref2$toasts === void 0 ? [] : _ref2$toasts,
-    _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'top-right' : _ref2$position,
-    onRemove = _ref2.onRemove,
-    _ref2$className = _ref2.className,
-    className = _ref2$className === void 0 ? '' : _ref2$className;
-  if (!toasts || toasts.length === 0) {
-    return null;
-  }
-  var posClass = POSITION_CLASSES[position] || POSITION_CLASSES['top-right'];
-  return /*#__PURE__*/createPortal(jsx("div", {
-    role: "region",
-    "aria-label": "Notifications",
-    className: cn('fixed z-50 flex flex-col gap-3 max-h-[calc(100vh-2rem)] overflow-y-auto overflow-x-hidden p-2 pointer-events-none', '[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden', posClass, className),
-    children: toasts.map(function (t) {
-      return jsx("div", {
-        className: "pointer-events-auto w-full max-w-md",
-        children: jsx(Toast, _objectSpread2(_objectSpread2({}, t), {}, {
-          portal: false,
-          position: position,
-          onClose: onRemove
-        }))
-      }, t.id);
-    })
-  }), document.body);
-};
 // Toast Container Component for vertical stacking & scrollable overflow without visible scrollbars
 var ToastContainer = function ToastContainer(props) {
   var shared = useContext(ToastContext);
@@ -292,10 +21,10 @@ var ToastContainer = function ToastContainer(props) {
   return jsx(ToastStack, _objectSpread2({}, props));
 };
 var useToastQueue = function useToastQueue() {
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    toasts = _useState8[0],
-    setToasts = _useState8[1];
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    toasts = _useState2[0],
+    setToasts = _useState2[1];
   var addToast = useCallback(function (toastOptions) {
     var id = toastOptions.id || "".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2, 7));
     var newToast = _objectSpread2(_objectSpread2({}, toastOptions), {}, {
@@ -352,21 +81,22 @@ var useToastQueue = function useToastQueue() {
 };
 // App-level provider: every useToast() below it shares ONE queue, rendered by
 // the provider's own container — no per-screen <ToastContainer> needed.
-var ToastProvider = function ToastProvider(_ref3) {
-  var children = _ref3.children,
-    _ref3$position = _ref3.position,
-    position = _ref3$position === void 0 ? 'top-right' : _ref3$position,
-    _ref3$className = _ref3.className,
-    className = _ref3$className === void 0 ? '' : _ref3$className;
+var ToastProvider = function ToastProvider(_ref) {
+  var children = _ref.children,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top-right' : _ref$position,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    stackProps = _objectWithoutProperties(_ref, _excluded);
   var queue = useToastQueue();
   return jsxs(ToastContext.Provider, {
     value: queue,
-    children: [children, jsx(ToastStack, {
+    children: [children, jsx(ToastStack, _objectSpread2({
       toasts: queue.toasts,
       position: position,
       onRemove: queue.removeToast,
       className: className
-    })]
+    }, stackProps))]
   });
 };
 ToastProvider.displayName = 'ToastProvider';