@paubox/ui 3.2.1 → 3.4.0

package/index.esm.js

@@ -1994,7 +1994,7 @@ function _templateObject4$e() {
     };
     return data;
 }
-function _templateObject5$7() {
+function _templateObject5$8() {
     var data = _tagged_template_literal$v([
         "\n  ",
         "\n  font-size: ",
@@ -2002,7 +2002,7 @@ function _templateObject5$7() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 400;\n"
     ]);
-    _templateObject5$7 = function _templateObject() {
+    _templateObject5$8 = function _templateObject() {
         return data;
     };
     return data;
@@ -2273,7 +2273,7 @@ var $headline100Regular = css(_templateObject1$l(), commonStyles, headline100Fon
 var $headline100Semibold = css(_templateObject2$l(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
 var $headline200Regular = css(_templateObject3$h(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
 var $headline200Semibold = css(_templateObject4$e(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
-var $headline300Regular = css(_templateObject5$7(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
+var $headline300Regular = css(_templateObject5$8(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 var $headline300Semibold = css(_templateObject6$4(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 // PARAGRAPH
 var $paragraph100Regular = css(_templateObject7$3(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
@@ -2461,13 +2461,13 @@ function _templateObject4$d() {
     };
     return data;
 }
-function _templateObject5$6() {
+function _templateObject5$7() {
     var data = _tagged_template_literal$u([
         "\n  background-color: transparent;\n  border: none;\n  color: ",
         ";\n  cursor: pointer;\n  padding: 0.25rem;\n  font-size: 0.75rem;\n  margin-left: ",
         ";\n"
     ]);
-    _templateObject5$6 = function _templateObject() {
+    _templateObject5$7 = function _templateObject() {
         return data;
     };
     return data;
@@ -2489,7 +2489,7 @@ var StyledIcon = styled.div(_templateObject3$g(), function(param) {
     return type === 'info' ? primary700$1 : type === 'error' ? danger700$1 : type === 'success' ? success700$1 : warning700$1;
 });
 var TextWrapper = styled.div(_templateObject4$d());
-var TruncaterButton = styled.button(_templateObject5$6(), primary700$1, function(param) {
+var TruncaterButton = styled.button(_templateObject5$7(), primary700$1, function(param) {
     var isExpanded = param.isExpanded;
     return !isExpanded ? '0' : '0.25rem';
 });
@@ -22851,6 +22851,10 @@ var DatePicker = function(_param) {
                 style: {
                     width: rangeSelect ? 200 : 107
                 },
+                // Analytics autocapture hooks (@paubox/tracking). The trigger is a native
+                // button; tag it so the captured click is identifiable as a date picker.
+                "data-pb-component": "DatePicker",
+                "data-pb-name": rangeSelect ? 'date_range' : 'date',
                 children: [
                     dateString,
                     /*#__PURE__*/ jsx("div", {
@@ -23024,7 +23028,7 @@ var ArrowIcon = styled(ChevronDown)(_templateObject$m(), spacing(1), function(pa
 var DropdownMenu = function(param) {
     var label = param.label, items = param.items, children = param.children, openProp = param.open, onOpenChange = param.onOpenChange, iconLeft = param.iconLeft, _param_size = param.size, size = _param_size === void 0 ? 'small' : _param_size, align = param.align, _param_buttonProps = param.buttonProps, buttonProps = _param_buttonProps === void 0 ? {
         color: 'primary'
-    } : _param_buttonProps, _param_testId = param.testId, testId = _param_testId === void 0 ? 'dropdown' : _param_testId, childContainerRefs = param.childContainerRefs, disabled = param.disabled;
+    } : _param_buttonProps, _param_testId = param.testId, testId = _param_testId === void 0 ? 'dropdown' : _param_testId, childContainerRefs = param.childContainerRefs, disabled = param.disabled, _param_detectEdges = param.detectEdges, detectEdges = _param_detectEdges === void 0 ? true : _param_detectEdges;
     var _useState = _sliced_to_array$g(useState(false), 2), open = _useState[0], setOpen = _useState[1];
     var buttonRef = useRef(null);
     var isControlled = openProp !== undefined && onOpenChange;
@@ -23070,7 +23074,7 @@ var DropdownMenu = function(param) {
                 anchorRef: buttonRef,
                 align: align === 'center' ? 'middle' : align === 'right' ? 'end' : 'start',
                 offset: 4,
-                detectEdges: false,
+                detectEdges: detectEdges,
                 style: {
                     padding: "".concat(spacing(1), "px 0")
                 },
@@ -23437,11 +23441,11 @@ function _templateObject4$c() {
     };
     return data;
 }
-function _templateObject5$5() {
+function _templateObject5$6() {
     var data = _tagged_template_literal$k([
         "\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n"
     ]);
-    _templateObject5$5 = function _templateObject() {
+    _templateObject5$6 = function _templateObject() {
         return data;
     };
     return data;
@@ -23466,7 +23470,7 @@ var FilterGroup = styled.div(_templateObject1$h(), function(param) {
 var CloseButton$1 = styled.button(_templateObject2$h());
 var FilterRowsContainer = styled.div(_templateObject3$e());
 var OrButton = styled.button(_templateObject4$c(), neutral100$1);
-var ButtonGroup = styled.div(_templateObject5$5());
+var ButtonGroup = styled.div(_templateObject5$6());
 var AndButtonContainer = styled.div(_templateObject6$3());
 var FilterForm = function(param) {
     var values = param.values, fieldOptions = param.fieldOptions, operatorOptions = param.operatorOptions, onSubmit = param.onSubmit, onClear = param.onClear, onChange = param.onChange, errors = param.errors, touched = param.touched;
@@ -24120,11 +24124,11 @@ function _templateObject4$a() {
     };
     return data;
 }
-function _templateObject5$4() {
+function _templateObject5$5() {
     var data = _tagged_template_literal$i([
         '\n  /* role="option" wrapper — visual state is delegated to inner MenuItem */\n'
     ]);
-    _templateObject5$4 = function _templateObject() {
+    _templateObject5$5 = function _templateObject() {
         return data;
     };
     return data;
@@ -24155,7 +24159,7 @@ var BaseInput$2 = styled.input(_templateObject1$f(), textPrimary$1, neutral500$1
 var Chip$2 = styled.button(_templateObject2$f(), neutral100$1, $label200Medium, primary600$1, surfaceRaised, textPrimaryWhite, primary500);
 var RightIconWrapper = styled.div(_templateObject3$c(), neutral600$1, surfaceMuted);
 var EmptyState = styled.div(_templateObject4$a(), neutral500$1, $paragraph200Regular, surfaceMuted);
-var OptionWrapper = styled.div(_templateObject5$4());
+var OptionWrapper = styled.div(_templateObject5$5());
 /**
  * AutoComplete: single-line input that filters a closed list of options as
  * the user types. Selected items render as removable chips. Multi-select.
@@ -24376,6 +24380,10 @@ var OptionWrapper = styled.div(_templateObject5$4());
                 "aria-activedescendant": open ? activeOptionId : undefined,
                 "aria-haspopup": "listbox",
                 "aria-label": ariaLabel,
+                // Analytics autocapture hooks (@paubox/tracking). The input is native, so
+                // field_interaction works out of the box; tag the component for clarity.
+                "data-pb-component": "AutoComplete",
+                "data-pb-name": ariaLabel || inputProps.name || undefined,
                 onChange: handleInputChange,
                 onFocus: function() {
                     return setIsFocused(true);
@@ -24882,12 +24890,12 @@ function _templateObject4$9() {
     };
     return data;
 }
-function _templateObject5$3() {
+function _templateObject5$4() {
     var data = _tagged_template_literal$g([
         "\n  position: absolute;\n  right: 0rem;\n  width: 2rem;\n  background-color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 0;\n  border: none;\n  cursor: pointer;\n  z-index: 0;\n  transition: all 150ms ease-in-out;\n  transform: ",
         ";\n"
     ]);
-    _templateObject5$3 = function _templateObject() {
+    _templateObject5$4 = function _templateObject() {
         return data;
     };
     return data;
@@ -24973,7 +24981,7 @@ var MultiSelectChip = function(option) {
     });
 };
 // Style for the Icons
-var IconWrapper$2 = styled.div(_templateObject5$3(), function(param) {
+var IconWrapper$2 = styled.div(_templateObject5$4(), function(param) {
     var open = param.open;
     return open ? 'rotate(180deg)' : 'rotate(0deg)';
 });
@@ -25017,6 +25025,10 @@ var MultiSelect = function(_param) {
                 return !prev;
             });
         },
+        // Analytics autocapture hooks (@paubox/tracking). The interactive node is
+        // this wrapper div (the inner <select> is inert), so identify it here.
+        "data-pb-component": "MultiSelect",
+        "data-pb-name": props['aria-label'] || props.name || label || undefined,
         children: [
             /*#__PURE__*/ jsxs(InputWrapper$2, {
                 children: [
@@ -25722,6 +25734,10 @@ var Select = function(_param) {
                 return !prev;
             });
         },
+        // Analytics autocapture hooks (@paubox/tracking). The interactive node is
+        // this wrapper div (the inner <select> is inert), so identify it here.
+        "data-pb-component": "Select",
+        "data-pb-name": props['aria-label'] || props.name || undefined,
         children: [
             /*#__PURE__*/ jsxs(InputWrapper, {
                 children: [
@@ -30879,11 +30895,11 @@ function _templateObject4$5() {
     };
     return data;
 }
-function _templateObject5$2() {
+function _templateObject5$3() {
     var data = _tagged_template_literal$6([
         "\n  width: 100%;\n  max-height: 420px;\n  overflow-y: auto;\n"
     ]);
-    _templateObject5$2 = function _templateObject() {
+    _templateObject5$3 = function _templateObject() {
         return data;
     };
     return data;
@@ -30982,7 +30998,7 @@ var ClearButton = styled(IconButton)(_templateObject3$5(), spacing(1));
  * Inner content of the dropdown. Popper provides the outer container
  * (positioning, portal, elevation, dark-mode background). We just lay out
  * the rows full-width inside it, with our own max-height + scroll behavior.
- */ var DropdownContent = styled.div(_templateObject5$2());
+ */ var DropdownContent = styled.div(_templateObject5$3());
 var DropdownRow = styled.button(_templateObject6$1(), spacing(1), spacing(1), spacing(2), function(param) {
     var highlighted = param.highlighted;
     return highlighted ? neutral100$1 : 'transparent';
@@ -32003,6 +32019,17 @@ function _templateObject4$4() {
     };
     return data;
 }
+function _templateObject5$2() {
+    var data = _tagged_template_literal$5([
+        "\n  color: ",
+        ";\n  font-size: 12px;\n  line-height: 1.2;\n  font-family: 'Roboto', sans-serif;\n\n  html.dark & {\n    color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject5$2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
 var variantMap = {
     blue: {
         bg: primary100$1,
@@ -32028,8 +32055,9 @@ var IconBadge = styled.div(_templateObject1$5(), function(param) {
 var TextBlock = styled.div(_templateObject2$5());
 var Label = styled.div(_templateObject3$4(), neutral500$1, neutral400$1);
 var Value = styled.div(_templateObject4$4(), neutral900$1, neutral100$1);
+var Caption = styled.div(_templateObject5$2(), neutral400$1, neutral500$1);
 var StatCard = function(param) {
-    var label = param.label, value = param.value, icon = param.icon, _param_variant = param.variant, variant = _param_variant === void 0 ? 'blue' : _param_variant, className = param.className;
+    var label = param.label, value = param.value, icon = param.icon, _param_variant = param.variant, variant = _param_variant === void 0 ? 'blue' : _param_variant, className = param.className, caption = param.caption;
     var _variantMap_variant = variantMap[variant], bg = _variantMap_variant.bg, color = _variantMap_variant.color;
     return /*#__PURE__*/ jsxs(Card, {
         className: className,
@@ -32046,6 +32074,9 @@ var StatCard = function(param) {
                     }),
                     /*#__PURE__*/ jsx(Value, {
                         children: typeof value === 'number' ? value.toLocaleString() : value
+                    }),
+                    caption && /*#__PURE__*/ jsx(Caption, {
+                        children: caption
                     })
                 ]
             })

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "3.2.1",
+  "version": "3.4.0",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/DropdownMenu/DropdownMenu.d.ts

@@ -13,5 +13,10 @@ export interface DropdownMenuProps {
     size?: 'small' | 'large';
     childContainerRefs?: RefObject<HTMLElement>[];
     disabled?: boolean;
+    /**
+     * Keep the menu within the viewport, shifting it away from the window edge
+     * when it would otherwise be clipped. Defaults to `true`.
+     */
+    detectEdges?: boolean;
 }
-export declare const DropdownMenu: ({ label, items, children, open: openProp, onOpenChange, iconLeft, size, align, buttonProps, testId, childContainerRefs, disabled, }: DropdownMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DropdownMenu: ({ label, items, children, open: openProp, onOpenChange, iconLeft, size, align, buttonProps, testId, childContainerRefs, disabled, detectEdges, }: DropdownMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/StatCard/StatCard.d.ts

@@ -6,5 +6,10 @@ export interface StatCardProps {
     icon: React.ReactNode;
     variant?: StatCardVariant;
     className?: string;
+    /**
+     * Optional third line rendered as a smaller, muted label beneath the value
+     * (e.g. a time window like "Last 24 hours").
+     */
+    caption?: string;
 }
-export declare const StatCard: ({ label, value, icon, variant, className, }: StatCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const StatCard: ({ label, value, icon, variant, className, caption, }: StatCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;