@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/page/__figma__/PageHeader.figma.js

@@ -0,0 +1,57 @@
+import { figma } from '@figma/code-connect';
+import { Button, IconButton } from '../../buttons';
+import { HStack } from '../../layout';
+import { PageHeader } from '../PageHeader';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(PageHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=17685%3A3171', {
+  imports: ["import { PageHeader } from '@coinbase/cds-web/page/PageHeader';", "import { HStack } from '@coinbase/cds-web/layout/HStack';"],
+  props: {
+    start: figma.boolean('show start', {
+      true: figma.enum('type', {
+        L1: figma.children('Logo*'),
+        L2: /*#__PURE__*/_jsx(IconButton, {
+          compact: true,
+          name: "backArrow",
+          variant: "secondary"
+        })
+      }),
+      false: undefined
+    }),
+    title: figma.boolean('stepper', {
+      true: 'Stepper',
+      false: figma.boolean('show page title', {
+        true: 'Page title',
+        false: undefined
+      })
+    })
+  },
+  example: _ref => {
+    let {
+      title,
+      start
+    } = _ref;
+    return /*#__PURE__*/_jsx(PageHeader, {
+      end: /*#__PURE__*/_jsxs(HStack, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          compact: true,
+          transparent: true,
+          flush: "start",
+          variant: "primary",
+          children: "Button"
+        }), /*#__PURE__*/_jsx(IconButton, {
+          compact: true,
+          transparent: true,
+          name: "externalLink",
+          variant: "secondary"
+        }), /*#__PURE__*/_jsx(IconButton, {
+          compact: true,
+          transparent: true,
+          name: "close",
+          variant: "secondary"
+        })]
+      }),
+      start: start,
+      title: title
+    });
+  }
+});

package/esm/pagination/DefaultPaginationEllipsis.js

@@ -0,0 +1,16 @@
+import { Text } from '../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultPaginationEllipsis = _ref => {
+  let {
+    content = '...',
+    testID
+  } = _ref;
+  return /*#__PURE__*/_jsx(Text, {
+    noWrap: true,
+    "aria-hidden": "true",
+    color: "fgMuted",
+    font: "headline",
+    testID: testID,
+    children: content
+  });
+};

package/esm/pagination/DefaultPaginationNavigationButton.js

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import { IconButton } from '../buttons/IconButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Map direction to icon name
+export const iconMap = {
+  first: 'arrowLeft',
+  last: 'arrowRight',
+  next: 'caretRight',
+  previous: 'caretLeft'
+};
+export const DefaultPaginationNavigationButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    direction,
+    onClick,
+    disabled,
+    accessibilityLabel,
+    testID
+  } = _ref;
+  return /*#__PURE__*/_jsx(IconButton, {
+    ref: ref,
+    compact: true,
+    transparent: true,
+    accessibilityLabel: accessibilityLabel,
+    disabled: disabled,
+    name: iconMap[direction],
+    onClick: onClick,
+    testID: testID,
+    variant: "secondary"
+  });
+});

package/esm/pagination/DefaultPaginationNavigationTextButton.js

@@ -0,0 +1,35 @@
+const _excluded = ["onClick", "disabled", "accessibilityLabel", "testID", "children", "variant", "compact"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import React, { forwardRef } from 'react';
+import { Button } from '../buttons/Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultPaginationNavigationTextButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      onClick,
+      disabled,
+      accessibilityLabel,
+      testID,
+      children,
+      variant = 'secondary',
+      compact = true
+    } = _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,
+    variant: variant
+  }, restProps), {}, {
+    children: children
+  }));
+});
+DefaultPaginationNavigationTextButton.displayName = 'DefaultPaginationNavigationTextButton';

package/esm/pagination/DefaultPaginationPageButton.css

@@ -0,0 +1 @@
+@layer cds{.circularButtonCss-cqwbo48{width:40px;height:40px;aspect-ratio:1/1;}}

package/esm/pagination/DefaultPaginationPageButton.js

@@ -0,0 +1,41 @@
+const _excluded = ["page", "onClick", "isCurrentPage", "disabled", "accessibilityLabel", "testID"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import { forwardRef, useCallback } from 'react';
+import { Button } from '../buttons/Button';
+import { cx } from '../cx';
+import { jsx as _jsx } from "react/jsx-runtime";
+const circularButtonCss = "circularButtonCss-cqwbo48";
+export const DefaultPaginationPageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      page,
+      onClick,
+      isCurrentPage,
+      disabled,
+      accessibilityLabel,
+      testID
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const handleClick = useCallback(() => onClick(page), [onClick, page]);
+  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,
+    testID: testID,
+    transparent: !isCurrentPage,
+    variant: isCurrentPage ? 'primary' : 'secondary'
+  }, props), {}, {
+    children: page
+  }));
+});
+import "./DefaultPaginationPageButton.css";

package/esm/pagination/Pagination.js

@@ -0,0 +1,141 @@
+const _excluded = ["totalPages", "activePage", "onChange", "disabled", "showFirstLastButtons", "siblingCount", "boundaryCount", "accessibilityLabel", "testID", "testIDMap", "accessibilityLabels", "PaginationPageButtonComponent", "PaginationNavigationButtonComponent", "PaginationEllipsisComponent"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import React, { useCallback, useRef } from 'react';
+import { HStack } from '../layout/HStack';
+import { DefaultPaginationEllipsis } from './DefaultPaginationEllipsis';
+import { DefaultPaginationNavigationButton } from './DefaultPaginationNavigationButton';
+import { DefaultPaginationNavigationTextButton } from './DefaultPaginationNavigationTextButton';
+import { DefaultPaginationPageButton } from './DefaultPaginationPageButton';
+import { usePagination } from './usePagination';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Pagination = _ref => {
+  var _accessibilityLabels$, _accessibilityLabels$2, _accessibilityLabels$3, _accessibilityLabels$4, _accessibilityLabels$5, _accessibilityLabels$6;
+  let {
+      totalPages,
+      activePage,
+      onChange,
+      disabled,
+      showFirstLastButtons,
+      siblingCount = 1,
+      boundaryCount = 1,
+      accessibilityLabel = 'Pagination',
+      testID,
+      testIDMap,
+      accessibilityLabels,
+      PaginationPageButtonComponent = DefaultPaginationPageButton,
+      PaginationNavigationButtonComponent = DefaultPaginationNavigationButton,
+      PaginationEllipsisComponent = DefaultPaginationEllipsis
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    items,
+    updateActivePage,
+    goNextPage,
+    goPrevPage,
+    goFirstPage,
+    goLastPage
+  } = usePagination({
+    activePage,
+    onChange,
+    totalPages,
+    siblingCount,
+    boundaryCount
+  });
+
+  // Refs for focus management
+  const paginationContainerRef = useRef(null);
+  const focusPageButton = page => {
+    var _paginationContainerR;
+    (_paginationContainerR = paginationContainerRef.current) === null || _paginationContainerR === void 0 || (_paginationContainerR = _paginationContainerR.querySelector("[data-pagenumber=\"".concat(page, "\"]"))) === null || _paginationContainerR === void 0 || _paginationContainerR.focus();
+  };
+  const handleGoToPage = useCallback(page => {
+    updateActivePage(page);
+    focusPageButton(page);
+  }, [updateActivePage]);
+  const handleGoNextPage = useCallback(() => {
+    const willBecomeDisabled = activePage + 1 === totalPages;
+    goNextPage();
+    if (willBecomeDisabled) focusPageButton(totalPages);
+  }, [activePage, goNextPage, totalPages]);
+  const handleGoPreviousPage = useCallback(() => {
+    const willBecomeDisabled = activePage - 1 === 1;
+    goPrevPage();
+    if (willBecomeDisabled) focusPageButton(1);
+  }, [activePage, goPrevPage]);
+  const handleGoFirstPage = useCallback(() => {
+    goFirstPage();
+    focusPageButton(1);
+  }, [goFirstPage]);
+  const handleGoLastPage = useCallback(() => {
+    goLastPage();
+    focusPageButton(totalPages);
+  }, [goLastPage, totalPages]);
+  return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+    ref: paginationContainerRef,
+    accessibilityLabel: accessibilityLabel,
+    alignItems: "center",
+    as: "nav",
+    gap: 0.5,
+    justifyContent: "center",
+    testID: testID
+  }, props), {}, {
+    children: [showFirstLastButtons && (PaginationNavigationButtonComponent === DefaultPaginationNavigationButton ? /*#__PURE__*/_jsx(DefaultPaginationNavigationTextButton, {
+      accessibilityLabel: (_accessibilityLabels$ = accessibilityLabels === null || accessibilityLabels === void 0 ? void 0 : accessibilityLabels.first) !== null && _accessibilityLabels$ !== void 0 ? _accessibilityLabels$ : 'First page',
+      disabled: activePage === 1 || disabled,
+      onClick: handleGoFirstPage,
+      testID: testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.firstButton,
+      children: "First"
+    }) : /*#__PURE__*/_jsx(PaginationNavigationButtonComponent, {
+      accessibilityLabel: (_accessibilityLabels$2 = accessibilityLabels === null || accessibilityLabels === void 0 ? void 0 : accessibilityLabels.first) !== null && _accessibilityLabels$2 !== void 0 ? _accessibilityLabels$2 : 'First page',
+      direction: "first",
+      disabled: activePage === 1 || disabled,
+      onClick: handleGoFirstPage,
+      testID: testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.firstButton
+    })), /*#__PURE__*/_jsx(PaginationNavigationButtonComponent, {
+      accessibilityLabel: (_accessibilityLabels$3 = accessibilityLabels === null || accessibilityLabels === void 0 ? void 0 : accessibilityLabels.previous) !== null && _accessibilityLabels$3 !== void 0 ? _accessibilityLabels$3 : 'Previous page',
+      direction: "previous",
+      disabled: activePage === 1 || disabled,
+      onClick: handleGoPreviousPage,
+      testID: testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.prevButton
+    }), items.map((item, index) => {
+      if (item.type === 'ellipsis') return /*#__PURE__*/_jsx(PaginationEllipsisComponent, {}, "ellipsis-".concat(index));
+
+      // Check if this is the current page
+      const page = item.page;
+      const isCurrentPage = activePage === page;
+      return /*#__PURE__*/_jsx(PaginationPageButtonComponent, {
+        accessibilityLabel: accessibilityLabels !== null && accessibilityLabels !== void 0 && accessibilityLabels.page ? accessibilityLabels.page(page) : "Page ".concat(page),
+        "data-pagenumber": page,
+        disabled: disabled,
+        isCurrentPage: isCurrentPage,
+        onClick: handleGoToPage,
+        page: page,
+        testID: isCurrentPage ? "".concat(testID, "-current-page") : undefined
+      }, page);
+    }), /*#__PURE__*/_jsx(PaginationNavigationButtonComponent, {
+      accessibilityLabel: (_accessibilityLabels$4 = accessibilityLabels === null || accessibilityLabels === void 0 ? void 0 : accessibilityLabels.next) !== null && _accessibilityLabels$4 !== void 0 ? _accessibilityLabels$4 : 'Next page',
+      direction: "next",
+      disabled: activePage === totalPages || disabled,
+      onClick: handleGoNextPage,
+      testID: testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.nextButton
+    }), showFirstLastButtons && (PaginationNavigationButtonComponent === DefaultPaginationNavigationButton ? /*#__PURE__*/_jsx(DefaultPaginationNavigationTextButton, {
+      accessibilityLabel: (_accessibilityLabels$5 = accessibilityLabels === null || accessibilityLabels === void 0 ? void 0 : accessibilityLabels.last) !== null && _accessibilityLabels$5 !== void 0 ? _accessibilityLabels$5 : 'Last page',
+      disabled: activePage === totalPages || disabled,
+      onClick: handleGoLastPage,
+      testID: testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.lastButton,
+      children: "Last"
+    }) : /*#__PURE__*/_jsx(PaginationNavigationButtonComponent, {
+      accessibilityLabel: (_accessibilityLabels$6 = accessibilityLabels === null || accessibilityLabels === void 0 ? void 0 : accessibilityLabels.last) !== null && _accessibilityLabels$6 !== void 0 ? _accessibilityLabels$6 : 'Last page',
+      direction: "last",
+      disabled: activePage === totalPages || disabled,
+      onClick: handleGoLastPage,
+      testID: testIDMap === null || testIDMap === void 0 ? void 0 : testIDMap.lastButton
+    }))]
+  }));
+};

package/esm/pagination/__figma__/Pagination.figma.js

@@ -0,0 +1,22 @@
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { figma } from '@figma/code-connect';
+import { Pagination } from '../Pagination';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(Pagination, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49607-6651&m=dev', {
+  imports: ["import { Pagination } from '@coinbase/cds-web/pagination/Pagination';"],
+  props: {
+    totalPages: figma.enum('number of pages', {
+      '5< pages': 5,
+      '5+ pages': 8,
+      '50+ pages': 100
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(Pagination, _objectSpread({
+    activePage: 1,
+    onChange: () => {}
+  }, props))
+});

package/esm/pagination/usePagination.js

@@ -0,0 +1,122 @@
+import { useCallback, useMemo } from 'react';
+/** Creates an array of consecutive numbers from `start` to `end`.  */
+const createNumberRange = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({
+    length
+  }, (_, i) => start + i);
+};
+const createPaginationItems = _ref => {
+  let {
+    activePage,
+    validTotalPages,
+    siblingCount,
+    boundaryCount
+  } = _ref;
+  const startPages = createNumberRange(1, Math.min(boundaryCount, validTotalPages));
+  const endPages = createNumberRange(Math.max(validTotalPages - boundaryCount + 1, boundaryCount + 1), validTotalPages);
+  const siblingsStart = Math.max(Math.min(activePage - siblingCount, validTotalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+  const siblingsEnd = Math.min(Math.max(activePage + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : validTotalPages - 1);
+
+  // Initialize items array
+  const items = [];
+
+  // Add start pages
+  startPages.forEach(page => {
+    items.push({
+      type: 'page',
+      page,
+      selected: page === activePage
+    });
+  });
+
+  // Add ellipsis if needed
+  if (siblingsStart > boundaryCount + 2) {
+    items.push({
+      type: 'ellipsis'
+    });
+  } else if (boundaryCount + 1 < validTotalPages - boundaryCount) {
+    items.push({
+      type: 'page',
+      page: boundaryCount + 1,
+      selected: boundaryCount + 1 === activePage
+    });
+  }
+
+  // Add sibling pages
+  const siblingsRange = createNumberRange(siblingsStart, siblingsEnd);
+  siblingsRange.forEach(page => {
+    items.push({
+      type: 'page',
+      page,
+      selected: page === activePage
+    });
+  });
+
+  // Add ellipsis if needed
+  if (siblingsEnd < validTotalPages - boundaryCount - 1) {
+    items.push({
+      type: 'ellipsis'
+    });
+  } else if (validTotalPages - boundaryCount > boundaryCount) {
+    items.push({
+      type: 'page',
+      page: validTotalPages - boundaryCount,
+      selected: validTotalPages - boundaryCount === activePage
+    });
+  }
+
+  // Add end pages
+  endPages.forEach(page => {
+    items.push({
+      type: 'page',
+      page,
+      selected: page === activePage
+    });
+  });
+  return items;
+};
+export function usePagination(_ref2) {
+  let {
+    activePage = 1,
+    onChange,
+    totalPages,
+    siblingCount = 1,
+    boundaryCount = 1
+  } = _ref2;
+  const validTotalPages = Math.max(1, totalPages);
+  if (activePage < 1 || activePage > validTotalPages) {
+    throw new Error('Ensure activePage is within the valid range of 1 and totalPages');
+  }
+  const updateActivePage = useCallback(page => {
+    if (page < 1 || page > validTotalPages || page === activePage) return;
+    onChange(page);
+  }, [activePage, validTotalPages, onChange]);
+  const goNextPage = useCallback(() => updateActivePage(activePage + 1), [activePage, updateActivePage]);
+  const goPrevPage = useCallback(() => updateActivePage(activePage - 1), [activePage, updateActivePage]);
+  const goFirstPage = useCallback(() => updateActivePage(1), [updateActivePage]);
+  const goLastPage = useCallback(() => updateActivePage(validTotalPages), [validTotalPages, updateActivePage]);
+  const isFirstPage = activePage === 1;
+  const isLastPage = activePage === validTotalPages;
+  const items = useMemo(() => createPaginationItems({
+    activePage,
+    validTotalPages,
+    siblingCount,
+    boundaryCount
+  }), [activePage, validTotalPages, siblingCount, boundaryCount]);
+  const api = useMemo(() => ({
+    activePage,
+    updateActivePage,
+    totalPages,
+    siblingCount,
+    boundaryCount,
+    goNextPage,
+    goPrevPage,
+    goFirstPage,
+    goLastPage,
+    isFirstPage,
+    isLastPage,
+    items
+  }), [totalPages, siblingCount, boundaryCount, activePage, updateActivePage, goNextPage, goPrevPage, goFirstPage, goLastPage, isFirstPage, isLastPage, items]);
+  return api;
+}

package/esm/section-header/SectionHeader.js

@@ -0,0 +1,70 @@
+const _excluded = ["title", "start", "icon", "iconActive", "balance", "description", "end", "gap", "justifyContent", "minWidth", "paddingX", "paddingY"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import React, { forwardRef, memo } from 'react';
+import { Icon } from '../icons';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { Text } from '../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SectionHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function SectionHeader(_ref, ref) {
+  let {
+      title,
+      start,
+      icon,
+      iconActive,
+      balance,
+      description,
+      end,
+      gap = 1,
+      justifyContent = 'space-between',
+      minWidth = 256,
+      paddingX = 4,
+      paddingY = 2
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+    ref: ref,
+    gap: gap,
+    justifyContent: justifyContent,
+    minWidth: minWidth,
+    paddingX: paddingX,
+    paddingY: paddingY
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      gap: 0.5,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        gap: 1,
+        children: [!!start && start, typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+          as: "h3",
+          display: "block",
+          font: "title3",
+          children: title
+        }) : title, typeof icon === 'string' ? /*#__PURE__*/_jsx(Icon, {
+          active: iconActive,
+          color: "fg",
+          name: icon,
+          size: "xs"
+        }) : icon]
+      }), typeof balance === 'string' ? /*#__PURE__*/_jsx(Text, {
+        as: "h3",
+        display: "block",
+        font: "title3",
+        children: balance
+      }) : balance, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+        as: "p",
+        color: "fgMuted",
+        display: "block",
+        font: "body",
+        numberOfLines: 2,
+        children: description
+      }) : description]
+    }), !!end && end]
+  }));
+}));

package/esm/section-header/__figma__/SectionHeader.figma.js

@@ -0,0 +1,58 @@
+const _excluded = ["searchNode"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+import { figma } from '@figma/code-connect';
+import { HStack } from '../../layout';
+import { SectionHeader } from '../SectionHeader';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+figma.connect(SectionHeader, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=19270%3A19118', {
+  imports: ["import { SectionHeader } from '@coinbase/cds-web/section-header/SectionHeader';"],
+  props: {
+    title: figma.children('string.section title'),
+    balance: figma.enum('type', {
+      'with balance (bottom)': figma.children(['Balance Header', 'Subdetails'])
+    }),
+    searchNode: figma.boolean('show search', {
+      true: figma.children('Search Input (Desktop)'),
+      false: undefined
+    }),
+    spacingTop: figma.boolean('show bottom spacing', {
+      true: undefined,
+      false: 2
+    }),
+    spacingVertical: figma.boolean('show bottom spacing', {
+      true: undefined,
+      false: 0
+    }),
+    start: figma.boolean('show start', {
+      true: figma.instance('↳ start'),
+      false: undefined
+    }),
+    icon: figma.boolean('show icon', {
+      true: figma.children('icon'),
+      false: undefined
+    }),
+    description: figma.boolean('show description', {
+      true: figma.string('↳ string'),
+      false: undefined
+    }),
+    end: figma.boolean('show start', {
+      true: figma.instance('↳ end'),
+      false: undefined
+    })
+  },
+  example: _ref => {
+    let {
+        searchNode
+      } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+    return /*#__PURE__*/_jsxs(HStack, {
+      children: [/*#__PURE__*/_jsx(SectionHeader, _objectSpread({}, props)), searchNode]
+    });
+  }
+});