@dreamtree-org/twreact-ui 1.3.11 → 2.0.1

package/dist/esm/components/blocks/BottomActionBar.js

@@ -0,0 +1,132 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useCallback, useSyncExternalStore, useEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { setRefs } from '../../utils/position.js';
+
+var _excluded = ["children", "position", "align", "fullWidth", "stackOnMobile", "keyboardAware", "className", "style"],
+  _excluded2 = ["className"];
+// Sticky bar at the bottom of the screen for the primary action on forms and
+// checkout pages (DTUI-57). Pads the home indicator (pb-safe), sits on the
+// z-sticky layer and rides above the on-screen keyboard via visualViewport.
+/** CSS variable the bar publishes with its height, read by BottomActionBar.Spacer. */
+var BAR_HEIGHT_VAR = '--dt-bottom-action-bar-height';
+// Part of the layout viewport the on-screen keyboard covers (0 without visualViewport).
+function readKeyboardOffset() {
+  if (typeof window === 'undefined') return 0;
+  var vv = window.visualViewport;
+  if (!vv) return 0;
+  var inner = window.innerHeight || 0;
+  return Math.max(0, Math.round(inner - (vv.height || inner) - (vv.offsetTop || 0)));
+}
+var getServerOffset = function getServerOffset() {
+  return 0;
+};
+/** Keyboard offset in px while `active`; 0 on the server and without visualViewport. */
+function useKeyboardOffset(active) {
+  var subscribe = useCallback(function (onChange) {
+    var _vv$addEventListener, _vv$addEventListener2;
+    if (!active || typeof window === 'undefined') return function () {};
+    var vv = window.visualViewport;
+    vv === null || vv === void 0 || (_vv$addEventListener = vv.addEventListener) === null || _vv$addEventListener === void 0 || _vv$addEventListener.call(vv, 'resize', onChange);
+    vv === null || vv === void 0 || (_vv$addEventListener2 = vv.addEventListener) === null || _vv$addEventListener2 === void 0 || _vv$addEventListener2.call(vv, 'scroll', onChange);
+    window.addEventListener('resize', onChange);
+    return function () {
+      var _vv$removeEventListen, _vv$removeEventListen2;
+      vv === null || vv === void 0 || (_vv$removeEventListen = vv.removeEventListener) === null || _vv$removeEventListen === void 0 || _vv$removeEventListen.call(vv, 'resize', onChange);
+      vv === null || vv === void 0 || (_vv$removeEventListen2 = vv.removeEventListener) === null || _vv$removeEventListen2 === void 0 || _vv$removeEventListen2.call(vv, 'scroll', onChange);
+      window.removeEventListener('resize', onChange);
+    };
+  }, [active]);
+  var getSnapshot = function getSnapshot() {
+    return active ? readKeyboardOffset() : 0;
+  };
+  return useSyncExternalStore(subscribe, getSnapshot, getServerOffset);
+}
+/** Publishes the fixed bar's height as a CSS variable on <html> so the Spacer can match it. */
+function usePublishedHeight(nodeRef, enabled) {
+  useEffect(function () {
+    var node = nodeRef.current;
+    if (!enabled || !node || typeof document === 'undefined') return undefined;
+    var root = document.documentElement;
+    var publish = function publish() {
+      var _node$getBoundingClie;
+      var h = ((_node$getBoundingClie = node.getBoundingClientRect) === null || _node$getBoundingClie === void 0 ? void 0 : _node$getBoundingClie.call(node).height) || 0;
+      if (h > 0) root.style.setProperty(BAR_HEIGHT_VAR, "".concat(Math.round(h), "px"));
+    };
+    publish();
+    var observer;
+    if (typeof window.ResizeObserver === 'function') {
+      observer = new window.ResizeObserver(publish);
+      observer.observe(node);
+    }
+    return function () {
+      var _observer;
+      (_observer = observer) === null || _observer === void 0 || _observer.disconnect();
+      root.style.removeProperty(BAR_HEIGHT_VAR);
+    };
+  }, [nodeRef, enabled]);
+}
+var ALIGN = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  between: 'justify-between'
+};
+var BottomActionBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'fixed' : _ref$position,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'end' : _ref$align,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$stackOnMobile = _ref.stackOnMobile,
+    stackOnMobile = _ref$stackOnMobile === void 0 ? false : _ref$stackOnMobile,
+    _ref$keyboardAware = _ref.keyboardAware,
+    keyboardAware = _ref$keyboardAware === void 0 ? true : _ref$keyboardAware,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var localRef = useRef(null);
+  var setRef = useCallback(function (node) {
+    return setRefs(node, localRef, ref);
+  }, [ref]);
+  var fixed = position !== 'sticky';
+  var offset = useKeyboardOffset(keyboardAware);
+  usePublishedHeight(localRef, fixed);
+  // Above the keyboard the home indicator is covered, so the safe-area pad goes.
+  var lifted = offset > 0;
+  var barStyle = lifted ? _objectSpread2(_objectSpread2({}, style), {}, {
+    bottom: "".concat(offset, "px")
+  }) : style;
+  return jsx("div", _objectSpread2(_objectSpread2({
+    ref: setRef,
+    "data-position": fixed ? 'fixed' : 'sticky',
+    "data-keyboard": lifted ? 'open' : undefined,
+    className: cn(fixed ? 'fixed inset-x-0 bottom-0' : 'sticky bottom-0', 'z-sticky border-t border-line bg-surface text-foreground px-safe', 'shadow-[0_-4px_12px_-4px_rgb(0_0_0/calc(0.12*var(--dt-shadow-strength,1)))]', 'transition-[bottom] duration-fast ease-standard motion-reduce:transition-none', !lifted && 'pb-safe', className),
+    style: barStyle
+  }, props), {}, {
+    children: jsx("div", {
+      className: cn('mx-auto flex w-full max-w-7xl items-center gap-3 px-4 py-3 md:px-8', ALIGN[align] || ALIGN.end, fullWidth && 'max-sm:[&>*]:flex-1', stackOnMobile && 'max-sm:flex-col-reverse max-sm:items-stretch max-sm:[&>*]:w-full'),
+      children: children
+    })
+  }));
+});
+BottomActionBar.displayName = 'BottomActionBar';
+// Reserves the fixed bar's height (published by the bar, 4.5rem + safe area
+// before it measures) so the last rows of the page aren't hidden behind it.
+var BottomActionBarSpacer = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return jsx("div", _objectSpread2({
+    ref: ref,
+    "aria-hidden": "true",
+    className: cn('h-[var(--dt-bottom-action-bar-height,calc(4.5rem+env(safe-area-inset-bottom,0px)))] shrink-0', className)
+  }, props));
+});
+BottomActionBarSpacer.displayName = 'BottomActionBar.Spacer';
+BottomActionBar.Spacer = BottomActionBarSpacer;
+
+export { BAR_HEIGHT_VAR, BottomActionBar as default };

package/dist/esm/components/blocks/ConfirmDialog.js

@@ -1,13 +1,20 @@
 '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 React, { useEffect } from 'react';
 import Dialog from '../feedback/Dialog.js';
 import Button from '../core/Button.js';
+import { usePresentation } from '../../hooks/usePresentation.js';
+import { useHaptics } from '../../hooks/useHaptics.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
 
-var _excluded = ["isOpen", "title", "description", "confirmLabel", "cancelLabel", "destructive", "loading", "onConfirm", "onCancel", "className"];
+var _excluded = ["isOpen", "title", "description", "confirmLabel", "cancelLabel", "destructive", "loading", "onConfirm", "onCancel", "className", "presentation", "haptics"];
 // Extracted from firepro/components/ui/confirm-dialog.tsx. Replaces native confirm():
 // the title asks the question, one line says what happens, the button is named with the verb.
+//
+// Actions keep the DOM (and Tab) order [cancel, confirm]. `flex-col-reverse`
+// shows the confirm button on top when they stack: below `sm` in the centred
+// modal, and always in sheet mode, where both buttons are full width.
 var ConfirmDialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var isOpen = _ref.isOpen,
     title = _ref.title,
@@ -22,7 +29,33 @@ var ConfirmDialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onConfirm = _ref.onConfirm,
     onCancel = _ref.onCancel,
     className = _ref.className,
+    _ref$presentation = _ref.presentation,
+    presentation = _ref$presentation === void 0 ? 'auto' : _ref$presentation,
+    _ref$haptics = _ref.haptics,
+    haptics = _ref$haptics === void 0 ? false : _ref$haptics,
     props = _objectWithoutProperties(_ref, _excluded);
+  // Resolve once here so the footer layout and the Dialog agree on the mode.
+  var resolved = usePresentation(presentation);
+  var sheet = resolved === 'sheet';
+  // Opt-in haptics: a warning buzz when a destructive confirm opens, a success
+  // tick on confirm. Only the open transition fires the warning.
+  var _useHaptics = useHaptics({
+      enabled: haptics
+    }),
+    haptic = _useHaptics.trigger;
+  var openCue = useLatestRef(function () {
+    if (destructive) haptic('warning');
+  });
+  useEffect(function () {
+    if (isOpen) openCue.current();
+  }, [isOpen, openCue]);
+  var handleConfirm = function handleConfirm() {
+    haptic('success');
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm.apply(void 0, args);
+  };
   return jsx(Dialog, _objectSpread2(_objectSpread2({
     ref: ref,
     isOpen: isOpen,
@@ -31,17 +64,20 @@ var ConfirmDialog = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: "sm",
     dismissible: !loading,
     className: className,
+    presentation: resolved,
     footer: jsxs("div", {
-      className: "flex flex-col-reverse gap-3 sm:flex-row sm:justify-end",
+      className: sheet ? 'flex flex-col-reverse gap-3' : 'flex flex-col-reverse gap-3 sm:flex-row sm:justify-end',
       children: [jsx(Button, {
         variant: "outline",
         onClick: onCancel,
         disabled: loading,
+        fullWidth: sheet,
         children: cancelLabel
       }), jsx(Button, {
         variant: destructive ? 'destructive' : 'primary',
-        onClick: onConfirm,
+        onClick: handleConfirm,
         loading: loading,
+        fullWidth: sheet,
         children: confirmLabel
       })]
     })

package/dist/esm/components/blocks/PageHeader.js

@@ -4,26 +4,35 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { ArrowLeft } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import { usePresentation } from '../../hooks/usePresentation.js';
+import BottomActionBar from './BottomActionBar.js';
 
-var _excluded = ["title", "subtitle", "actions", "back", "linkAs", "className"];
+var _excluded = ["title", "subtitle", "actions", "actionsPlacement", "back", "linkAs", "className"];
 // Extracted from taskpro/client/src/features/shared/PageHeader.jsx (31 imports) and the
 // CampaignPro UX guide's page anatomy: one h1, a muted subtitle, actions top right.
+// `actionsPlacement="bottom"` pins the actions in a BottomActionBar on phones (DTUI-52).
 var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var title = _ref.title,
     subtitle = _ref.subtitle,
     actions = _ref.actions,
+    _ref$actionsPlacement = _ref.actionsPlacement,
+    actionsPlacement = _ref$actionsPlacement === void 0 ? 'inline' : _ref$actionsPlacement,
     back = _ref.back,
     _ref$linkAs = _ref.linkAs,
     Link = _ref$linkAs === void 0 ? 'a' : _ref$linkAs,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
+  // 'sheet' = coarse pointer at phone width; 'popover' on the server and on desktop.
+  var isPhone = usePresentation() === 'sheet';
+  var pinned = Boolean(actions) && actionsPlacement === 'bottom' && isPhone;
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('flex flex-col gap-3', className)
   }, props), {}, {
     children: [back && jsxs(Link, {
       href: back.href,
-      className: "inline-flex w-fit items-center gap-1.5 rounded-control text-sm text-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+      className: cn('inline-flex w-fit items-center gap-1.5 rounded-control text-sm text-muted hover:text-foreground', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2', TOUCH_TARGET),
       children: [jsx(ArrowLeft, {
         className: "h-4 w-4",
         "aria-hidden": "true"
@@ -39,10 +48,14 @@ var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           className: "mt-1 max-w-2xl text-sm text-muted",
           children: subtitle
         })]
-      }), actions && jsx("div", {
+      }), actions && !pinned && jsx("div", {
         className: "flex flex-wrap items-center gap-3",
         children: actions
       })]
+    }), pinned && jsx(BottomActionBar, {
+      fullWidth: true,
+      "data-page-header-actions": "",
+      children: actions
     })]
   }));
 });

package/dist/esm/components/core/Checkbox.js

@@ -4,8 +4,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useRef, useState, useEffect, useCallback } from 'react';
 import { Check, Minus } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { useHaptics } from '../../hooks/useHaptics.js';
 
-var _excluded = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass", "wrapperProps"];
+var _excluded = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "color", "iconClass", "checkedClass", "wrapperProps", "haptics"];
 var SIZE_CLASSES = {
   sm: {
     box: "h-4 w-4",
@@ -25,8 +26,8 @@ var SIZE_CLASSES = {
 };
 // `checked` paints the box from the native :checked state; `fill` is the same
 // paint applied from React state for the indeterminate (mixed) state.
-// blue / indigo / purple are raw-palette presets kept for compatibility
-// (deprecated; removed in 2.0 — use the token names).
+// Token presets only: the raw-palette presets (blue / indigo / purple) were
+// removed in 2.0.0 (DTUI-65).
 var COLOR_PRESETS = {
   primary: {
     checked: "peer-checked:bg-primary-600 peer-checked:border-primary-600 peer-checked:text-white dark:peer-checked:bg-primary-500 dark:peer-checked:border-primary-500",
@@ -67,21 +68,6 @@ var COLOR_PRESETS = {
     checked: "peer-checked:bg-warning-600 peer-checked:border-warning-600 peer-checked:text-white dark:peer-checked:bg-warning-500 dark:peer-checked:border-warning-500",
     fill: "bg-warning-600 border-warning-600 text-white dark:bg-warning-500 dark:border-warning-500",
     ring: "peer-focus-visible:ring-warning-500"
-  },
-  blue: {
-    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-600 peer-checked:text-white dark:peer-checked:bg-blue-500 dark:peer-checked:border-blue-500",
-    fill: "bg-blue-600 border-blue-600 text-white dark:bg-blue-500 dark:border-blue-500",
-    ring: "peer-focus-visible:ring-blue-500"
-  },
-  indigo: {
-    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-600 peer-checked:text-white dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-500",
-    fill: "bg-indigo-600 border-indigo-600 text-white dark:bg-indigo-500 dark:border-indigo-500",
-    ring: "peer-focus-visible:ring-indigo-500"
-  },
-  purple: {
-    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-600 peer-checked:text-white dark:peer-checked:bg-purple-500 dark:peer-checked:border-purple-500",
-    fill: "bg-purple-600 border-purple-600 text-white dark:bg-purple-500 dark:border-purple-500",
-    ring: "peer-focus-visible:ring-purple-500"
   }
 };
 // The invisible native input is the hit area: the box size with a mouse,
@@ -110,12 +96,13 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref.variant;
     var _ref$indeterminate = _ref.indeterminate,
     indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
-    borderColor = _ref.borderColor,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "primary" : _ref$color,
     iconClass = _ref.iconClass,
     checkedClass = _ref.checkedClass,
     wrapperProps = _ref.wrapperProps,
+    _ref$haptics = _ref.haptics,
+    haptics = _ref$haptics === void 0 ? false : _ref$haptics,
     props = _objectWithoutProperties(_ref, _excluded);
   var autoId = useId();
   var inputId = id || "".concat(autoId, "-checkbox");
@@ -136,10 +123,15 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
+  var _useHaptics = useHaptics({
+      enabled: haptics
+    }),
+    haptic = _useHaptics.trigger;
   var handleChange = useCallback(function (e) {
     if (!isControlled) setInternalChecked(e.target.checked);
+    haptic("selection");
     if (typeof onChange === "function") onChange(e);
-  }, [isControlled, onChange]);
+  }, [isControlled, onChange, haptic]);
   var sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.md;
   var isPreset = COLOR_PRESETS[color];
   var isMixed = Boolean(indeterminate);
@@ -162,10 +154,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: cn(sizeClass.label, "select-none mr-2 text-foreground"),
       children: label
     }), jsxs("div", {
-      className: cn("relative inline-flex shrink-0 items-center justify-center rounded-sm border transition-shadow duration-fast motion-reduce:transition-none", sizeClass.box, disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:shadow-sm", !disabled && showBoxBorder && !borderColor && "border-gray-300 dark:border-gray-600"),
-      style: disabled || !showBoxBorder || !borderColor ? {} : {
-        borderColor: borderColor
-      },
+      className: cn("relative inline-flex shrink-0 items-center justify-center rounded-sm border transition-shadow duration-fast motion-reduce:transition-none", sizeClass.box, disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:shadow-sm", !disabled && showBoxBorder && "border-gray-300 dark:border-gray-600"),
       "aria-disabled": disabled,
       children: [jsx("input", _objectSpread2({
         id: inputId,