@coinbase/cds-web 9.8.0 → 9.10.0

package/esm/controls/TextInput.js

@@ -1,4 +1,4 @@
-const _excluded = ["label", "labelFont", "labelColor", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "focusedBorderWidth", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant", "labelNode", "inputBackground"];
+const _excluded = ["label", "labelFont", "labelColor", "accessibilityLabel", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "size", "suffix", "onFocus", "onBlur", "borderRadius", "height", "inputNode", "bordered", "focusedBorderWidth", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "labelVariant", "labelNode", "inputBackground"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -22,17 +22,19 @@ import { InputStack } from './InputStack';
 import { NativeInput } from './NativeInput';
 
 /**
- * In normal circumstances, padding horizontal should be 2 (16px).
- * If compact is true, the padding top should be 1.
- * If labelVariant is 'inside', the padding top should be 3.5 (28px).
- * This gives the absolute positioning of the label space.
- * The bottom will be 1 (8px) in this case to equal padding of inside label.
- * If start exist, the padding between input area and icon should be 0.5 (4px).
+ * Horizontal padding is size-invariant: 2 (16px) at every size. Only vertical padding
+ * varies with size — 2 (16px) at `l`, 1.5 (12px) at `m`, 1 (8px) at `s`.
+ * If labelVariant is 'inside' and stacked, the input yields its top padding to the label
+ * and keeps 0.75 (6px) at the bottom to match the label's top padding.
+ * When an inline label precedes the input, the gap between them is 1 (8px).
+ * When a start node precedes the input, the gap contributed here is 0.5 (4px); the start
+ * node supplies the rest of the spacing (e.g. InputIcon's own paddingX).
  */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const nativeInputContainerCss = "nativeInputContainerCss-nvfk24";
 const insideLabelCss = "insideLabelCss-i1dqgbcz";
 const insideLabelCssStartCss = "insideLabelCssStartCss-i1scwjk";
+const defaultTextInputSize = 'l';
 const variantColorMap = {
   primary: 'fgPrimary',
   positive: 'fgPositive',
@@ -60,6 +62,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       align = 'start',
       font = 'body',
       compact = false,
+      size,
       suffix = '',
       onFocus,
       onBlur,
@@ -117,6 +120,20 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
     return undefined;
   }, [disabled, nativeInputRestProps.readOnly]);
   const hasLabel = useMemo(() => !!label || !!labelNode, [label, labelNode]);
+
+  // Geometry is driven entirely by the resolved size. An explicit `size` always wins;
+  // the deprecated `compact` only maps to `s` as a fallback so legacy callers keep dense spacing.
+  const resolvedSize = size !== null && size !== void 0 ? size : compact ? 's' : defaultTextInputSize;
+  // compact only forces label placement (inline start slot) when the caller did NOT set an
+  // explicit size. Once `size` is provided, label placement follows normal `labelVariant` rules.
+  const isCompactLabel = Boolean(compact) && size === undefined;
+
+  // Label placement is independent of size. `compact` (set alone) forces an inside label;
+  // otherwise placement follows `labelVariant`. An inside label sits horizontally in the start
+  // slot at every size EXCEPT `l`, where it stacks vertically above the input.
+  const wantsInsideLabel = hasLabel && (isCompactLabel || labelVariant === 'inside');
+  const insideVerticalLabel = wantsInsideLabel && !isCompactLabel && resolvedSize === 'l';
+  const insideHorizontalLabel = wantsInsideLabel && !insideVerticalLabel;
   const inputElement = useMemo(() => {
     /** Ensures that the renderedInput has the blurring, focusing, disabled features */
     if (inputNode) {
@@ -140,11 +157,13 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       align: align,
       "aria-invalid": variant === 'negative',
       caretColor: variantColorMap[focusedVariant],
-      compact: compact,
+      compact: resolvedSize === 's',
       containerSpacing: nativeInputContainerCss,
       "data-compact": compact,
-      "data-labelvariant": compact || !hasLabel ? 'outside' : labelVariant,
-      "data-start": !!start || compact,
+      "data-inlinelabel": insideHorizontalLabel,
+      "data-labelvariant": insideVerticalLabel ? 'inside' : 'outside',
+      "data-size": resolvedSize,
+      "data-start": !!start,
       disabled: disabled,
       font: font,
       id: shouldSetLabelId ? labelId : undefined,
@@ -152,7 +171,7 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       onFocus: handleOnFocus,
       testID: testID
     }, nativeInputRestProps));
-  }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, align, variant, focusedVariant, compact, hasLabel, labelVariant, start, disabled, font, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, nativeInputRestProps]);
+  }, [inputNode, refs, shouldSetHelperTextId, helperTextId, accessibilityLabel, label, align, variant, focusedVariant, compact, resolvedSize, insideVerticalLabel, insideHorizontalLabel, start, disabled, font, shouldSetLabelId, labelId, handleOnBlur, handleOnFocus, testID, nativeInputRestProps]);
   return /*#__PURE__*/_jsx(TextInputFocusVariantContext.Provider, {
     value: focused ? focusedVariant : undefined,
     children: /*#__PURE__*/_jsx(InputStack, {
@@ -194,31 +213,31 @@ export const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Text
       }) : helperText),
       inputBackground: readOnlyInputBackground !== null && readOnlyInputBackground !== void 0 ? readOnlyInputBackground : inputBackground,
       inputNode: inputElement,
-      labelNode: !compact && (labelNode ? labelVariant === 'inside' ? /*#__PURE__*/_jsx(Box, {
+      labelNode: !insideHorizontalLabel && (labelNode ? insideVerticalLabel ? /*#__PURE__*/_jsx(Box, {
         background: readOnlyInputBackground,
         paddingEnd: 2,
         paddingStart: start ? 0.5 : 2,
         paddingTop: 1,
         children: labelNode
       }) : labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
-        background: labelVariant === 'inside' ? readOnlyInputBackground : undefined,
-        className: cx(labelVariant === 'inside' && insideLabelCss, labelVariant === 'inside' && !!start && insideLabelCssStartCss),
+        background: insideVerticalLabel ? readOnlyInputBackground : undefined,
+        className: cx(insideVerticalLabel && insideLabelCss, insideVerticalLabel && !!start && insideLabelCssStartCss),
         color: labelColor,
         font: labelFont,
         htmlFor: shouldSetLabelId ? labelId : undefined,
         testID: (_testIDMap$label = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.label) !== null && _testIDMap$label !== void 0 ? _testIDMap$label : '',
         children: label
       })),
-      labelVariant: labelVariant,
-      startNode: (compact || !!start) && /*#__PURE__*/_jsxs(HStack, {
+      labelVariant: insideVerticalLabel ? 'inside' : 'outside',
+      startNode: (insideHorizontalLabel || !!start) && /*#__PURE__*/_jsxs(HStack, {
         alignItems: "center",
         background: readOnlyInputBackground,
         gap: 2,
         justifyContent: "center",
         onClick: handleNodePress,
-        paddingStart: compact && hasLabel ? 2 : undefined,
+        paddingStart: insideHorizontalLabel && hasLabel ? 2 : undefined,
         testID: (_testIDMap$start = testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.start) !== null && _testIDMap$start !== void 0 ? _testIDMap$start : '',
-        children: [compact && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
+        children: [insideHorizontalLabel && (labelNode ? labelNode : !!label && /*#__PURE__*/_jsx(InputLabel, {
           color: labelColor,
           font: labelFont,
           htmlFor: shouldSetLabelId ? labelId : undefined,

package/esm/dates/DateInput.js

@@ -15,6 +15,7 @@ import { useComponentConfig } from '../hooks/useComponentConfig';
 import { VStack } from '../layout/VStack';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  var _ref;
   const mergedProps = useComponentConfig('DateInput', _props);
   const {
       date,
@@ -95,7 +96,7 @@ export const DateInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref)
     children: /*#__PURE__*/_jsx(TextInput, _objectSpread({
       ref: ref,
       end: end,
-      helperText: helperText || (error === null || error === void 0 ? void 0 : error.message) || intlDateFormat.dateStringFormat,
+      helperText: (_ref = helperText !== null && helperText !== void 0 ? helperText : error === null || error === void 0 ? void 0 : error.message) !== null && _ref !== void 0 ? _ref : intlDateFormat.dateStringFormat,
       onBlur: handleBlur,
       onChange: handleChange,
       onClick: onClick,

package/esm/dates/DatePicker.js

@@ -1,4 +1,4 @@
-const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "disabledDates", "highlightedDates", "highlightedDateAccessibilityHint", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "restoreFocusOnUnmount", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "openCalendarAccessibilityLabel", "closeCalendarAccessibilityLabel", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "compact", "variant", "helperText", "showOverlay", "defaultOpen", "calendarStyle", "calendarClassName", "dateInputStyle", "dateInputClassName", "classNames", "styles", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
+const _excluded = ["date", "onChangeDate", "error", "onErrorDate", "required", "disabled", "seedDate", "disabledDates", "highlightedDates", "highlightedDateAccessibilityHint", "minDate", "maxDate", "requiredError", "invalidDateError", "disabledDateError", "label", "restoreFocusOnUnmount", "accessibilityLabel", "accessibilityLabelledBy", "calendarIconButtonAccessibilityLabel", "openCalendarAccessibilityLabel", "closeCalendarAccessibilityLabel", "nextArrowAccessibilityLabel", "previousArrowAccessibilityLabel", "compact", "size", "variant", "helperText", "showOverlay", "defaultOpen", "calendarStyle", "calendarClassName", "dateInputStyle", "dateInputClassName", "classNames", "styles", "width", "onOpen", "onClose", "onConfirm", "onCancel", "onChange"];
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -63,6 +63,7 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
       nextArrowAccessibilityLabel,
       previousArrowAccessibilityLabel,
       compact,
+      size,
       variant,
       helperText,
       showOverlay,
@@ -153,9 +154,10 @@ export const DatePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref
     onErrorDate: onErrorDate,
     required: required,
     requiredError: requiredError,
+    size: size,
     style: _objectSpread(_objectSpread({}, dateInputStyle), styles === null || styles === void 0 ? void 0 : styles.dateInput),
     variant: variant
-  }, props)), [date, onChangeDate, error, onErrorDate, required, compact, disabled, dateInputCalendarButton, requiredError, invalidDateError, disabledDates, minDate, maxDate, disabledDateError, onChange, label, accessibilityLabel, accessibilityLabelledBy, helperText, variant, dateInputClassName, dateInputStyle, classNames, styles, props]);
+  }, props)), [date, onChangeDate, error, onErrorDate, required, compact, size, disabled, dateInputCalendarButton, requiredError, invalidDateError, disabledDates, minDate, maxDate, disabledDateError, onChange, label, accessibilityLabel, accessibilityLabelledBy, helperText, variant, dateInputClassName, dateInputStyle, classNames, styles, props]);
   const calendar = useMemo(() => /*#__PURE__*/_jsx(MotionVStack, _objectSpread(_objectSpread({
     background: true,
     borderRadius: 400,

package/esm/overlays/Toast.js

@@ -125,9 +125,9 @@ export const Toast = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) =>
             background: variant
           }), /*#__PURE__*/_jsxs(HStack, {
             children: [!!action && /*#__PURE__*/_jsx(Button, {
-              compact: true,
               transparent: true,
               onClick: handleActionPress,
+              size: "s",
               testID: (_action$testID = action.testID) !== null && _action$testID !== void 0 ? _action$testID : 'toast-action',
               children: action.label
             }), !hideCloseButton && /*#__PURE__*/_jsx(IconButton, _objectSpread({

package/esm/pagination/DefaultPaginationNavigationButton.js

@@ -18,12 +18,12 @@ export const DefaultPaginationNavigationButton = /*#__PURE__*/forwardRef((_ref,
   } = _ref;
   return /*#__PURE__*/_jsx(IconButton, {
     ref: ref,
-    compact: true,
     transparent: true,
     accessibilityLabel: accessibilityLabel,
     disabled: disabled,
     name: iconMap[direction],
     onClick: onClick,
+    size: "s",
     testID: testID,
     variant: "secondary"
   });

package/esm/pagination/DefaultPaginationNavigationTextButton.js

@@ -1,4 +1,4 @@
-const _excluded = ["onClick", "disabled", "accessibilityLabel", "testID", "children", "variant", "compact"];
+const _excluded = ["onClick", "disabled", "accessibilityLabel", "testID", "children", "variant", "size"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -17,16 +17,16 @@ export const DefaultPaginationNavigationTextButton = /*#__PURE__*/forwardRef((_r
       testID,
       children,
       variant = 'secondary',
-      compact = true
+      size = 's'
     } = _ref,
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
     ref: ref,
     "aria-label": accessibilityLabel,
-    compact: compact,
     "data-testid": testID,
     disabled: disabled,
     onClick: onClick,
+    size: size,
     variant: variant
   }, restProps), {}, {
     children: children

package/esm/pagination/DefaultPaginationPageButton.js

@@ -25,12 +25,12 @@ export const DefaultPaginationPageButton = /*#__PURE__*/forwardRef((_ref, ref) =
   const isSingleDigit = page < 10;
   return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
     ref: ref,
-    compact: true,
     accessibilityLabel: accessibilityLabel,
     "aria-current": isCurrentPage ? 'page' : undefined,
     className: cx(isSingleDigit && circularButtonCss),
     disabled: disabled,
     onClick: handleClick,
+    size: "s",
     testID: testID,
     transparent: !isCurrentPage,
     variant: isCurrentPage ? 'primary' : 'secondary'

package/esm/tabs/Paddle.js

@@ -35,7 +35,8 @@ export const Paddle = _ref => {
     onClick,
     testID = "cds-paddle--".concat(direction),
     accessibilityLabel,
-    paddleStyle
+    paddleStyle,
+    size
   } = _ref;
   const buttonMotionProps = useMotionProps({
     enterConfigs: [_objectSpread(_objectSpread({}, animatePaddleOpacityConfig), {}, {
@@ -73,6 +74,7 @@ export const Paddle = _ref => {
           accessibilityLabel: accessibilityLabel,
           name: direction === 'left' ? 'caretLeft' : 'caretRight',
           onClick: onClick,
+          size: size,
           style: paddleStyle,
           testID: testID,
           variant: "secondary"

package/esm/visualizations/ProgressContainerWithButtons.js

@@ -27,12 +27,12 @@ export const ProgressContainerWithButtons = _ref => {
     children: [children({
       calculateProgress
     }), /*#__PURE__*/_jsx(Button, {
-      compact: true,
       onClick: reRender,
+      size: "s",
       children: "Re-render"
     }), !hideIncrease && /*#__PURE__*/_jsx(Button, {
-      compact: true,
       onClick: increase,
+      size: "s",
       children: "Increase 20%"
     })]
   }, num);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.8.0",
+  "version": "9.10.0",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -227,9 +227,9 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.8.0",
+    "@coinbase/cds-common": "^9.10.0",
     "@coinbase/cds-icons": "^5.21.0",
-    "@coinbase/cds-illustrations": "^4.44.0",
+    "@coinbase/cds-illustrations": "^4.45.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-dom": "^2.1.1",