@dnanpm/ui-components 0.9.0 → 0.10.0

package/dist/components/Notification/Notification.css

@@ -9,35 +9,36 @@
  * These variables come from @dnanpm/design-tokens package.
  */
 
-._notification_m746g_8 {
+._notification_1m544_8 {
     display: flex;
     align-items: center;
     gap: var(--spacing-space-16);
     padding-right: var(--spacing-space-20);
     border: 2px solid var(--notification-color);
     border-radius: var(--radius-semantic-sm);
+    background-color: var(--color-semantic-surface-base);
     overflow: clip;
 }
 
 /* Variant colors */
-._notification--info_m746g_19 {
+._notification--info_1m544_20 {
     --notification-color: var(--color-semantic-status-info);
 }
 
-._notification--success_m746g_23 {
+._notification--success_1m544_24 {
     --notification-color: var(--color-semantic-status-success);
 }
 
-._notification--warning_m746g_27 {
+._notification--warning_1m544_28 {
     --notification-color: var(--color-semantic-status-warning);
 }
 
-._notification--error_m746g_31 {
+._notification--error_1m544_32 {
     --notification-color: var(--color-semantic-status-error);
 }
 
 /* Icon container */
-._notification__icon-container_m746g_36 {
+._notification__icon-container_1m544_37 {
     /* The colored area size should be 48x48px on one line content, so we adjust padding based on whether the border is present or not */
     --_icon-padding-with-border: 10px;
     --_icon-padding-without-border: 12px;
@@ -53,14 +54,14 @@
     color: var(--color-semantic-foreground-inverse);
 }
 
-._notification__icon_m746g_36 {
+._notification__icon_1m544_37 {
     width: 24px;
     height: 24px;
     flex: 0 0 auto;
 }
 
 /* Content */
-._notification__content_m746g_59 {
+._notification__content_1m544_60 {
     flex: 1 1 auto;
     min-width: 0;
     padding: var(--spacing-space-8) 0;
@@ -70,7 +71,7 @@
 }
 
 /* Close button */
-._notification__close_m746g_69 {
+._notification__close_1m544_70 {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
@@ -87,7 +88,11 @@
     cursor: pointer;
 }
 
-._notification__close_m746g_69 svg {
+._notification__close_1m544_70 svg {
     width: 24px;
     height: 24px;
-} }
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/Notification/Notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAuB,MAAM,sBAAsB,CAAC;AAgBnF,eAAO,MAAM,YAAY,GAAI,gFAS1B,iBAAiB,4CA2BnB,CAAC"}
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/Notification.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAuB,MAAM,sBAAsB,CAAC;AAgBnF,eAAO,MAAM,YAAY,GAAI,gFAS1B,iBAAiB,4CA4BnB,CAAC"}

package/dist/components/Notification/Notification.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Error, Warning, Check, Info, Close } from "@dnanpm/icons";
-import focusStyles from "../../styles/utils/focus.module.css.js";
+import { focusStyles } from "../../styles/utils/index.js";
 import styles from "./Notification.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 const variantIcons = {
@@ -31,6 +31,7 @@ const Notification = ({
     "div",
     {
       ...props,
+      "data-color-scheme": "light",
       ref,
       role,
       className: cn(styles.notification, styles[`notification--${variant}`], className),

package/dist/components/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import type { ComponentType, SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n    info: Info,\n    success: Check,\n    warning: Warning,\n    error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' | 'alert'> = {\n    info: 'status',\n    success: 'status',\n    warning: 'alert',\n    error: 'alert',\n};\n\nexport const Notification = ({\n    variant,\n    children,\n    closable = false,\n    onClose,\n    closeLabel = 'Sulje ilmoitus',\n    className,\n    ref,\n    ...props\n}: NotificationProps) => {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            {...props}\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\n        >\n            <div className={styles['notification__icon-container']}>\n                <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n            </div>\n            <div className={styles.notification__content}>{children}</div>\n            {closable && (\n                <button\n                    type=\"button\"\n                    className={cn(styles.notification__close, focusStyles.focusable)}\n                    onClick={onClose}\n                    aria-label={closeLabel}\n                >\n                    <Close aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":["ErrorIcon"],"mappings":";;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAOA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAe,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyB;AACrB,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,cAAc,OAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAEhF,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,8BAA8B,GACjD,UAAA,oBAAC,MAAA,EAAK,WAAW,OAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACA,oBAAC,OAAA,EAAI,WAAW,OAAO,uBAAwB,UAAS;AAAA,QACvD,YACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAW,GAAG,OAAO,qBAAqB,YAAY,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAA,oBAAC,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB;"}
+{"version":3,"file":"Notification.js","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import type { ComponentType, SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { focusStyles } from '../../styles/utils';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n    info: Info,\n    success: Check,\n    warning: Warning,\n    error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' | 'alert'> = {\n    info: 'status',\n    success: 'status',\n    warning: 'alert',\n    error: 'alert',\n};\n\nexport const Notification = ({\n    variant,\n    children,\n    closable = false,\n    onClose,\n    closeLabel = 'Sulje ilmoitus',\n    className,\n    ref,\n    ...props\n}: NotificationProps) => {\n    const Icon = variantIcons[variant];\n    const role = variantRoles[variant];\n\n    return (\n        <div\n            {...props}\n            data-color-scheme=\"light\"\n            ref={ref}\n            role={role}\n            className={cn(styles.notification, styles[`notification--${variant}`], className)}\n        >\n            <div className={styles['notification__icon-container']}>\n                <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n            </div>\n            <div className={styles.notification__content}>{children}</div>\n            {closable && (\n                <button\n                    type=\"button\"\n                    className={cn(styles.notification__close, focusStyles.focusable)}\n                    onClick={onClose}\n                    aria-label={closeLabel}\n                >\n                    <Close aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n};\n"],"names":["ErrorIcon"],"mappings":";;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAOA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAe,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyB;AACrB,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,qBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,WAAW,GAAG,OAAO,cAAc,OAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAEhF,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,8BAA8B,GACjD,UAAA,oBAAC,MAAA,EAAK,WAAW,OAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACA,oBAAC,OAAA,EAAI,WAAW,OAAO,uBAAwB,UAAS;AAAA,QACvD,YACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAW,GAAG,OAAO,qBAAqB,YAAY,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAA,oBAAC,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB;"}

package/dist/components/Notification/Notification.module.css.cjs

@@ -1,17 +1,17 @@
 require('./Notification.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const notification = "_notification_m746g_8";
-const notification__icon = "_notification__icon_m746g_36";
-const notification__content = "_notification__content_m746g_59";
-const notification__close = "_notification__close_m746g_69";
+const notification = "_notification_1m544_8";
+const notification__icon = "_notification__icon_1m544_37";
+const notification__content = "_notification__content_1m544_60";
+const notification__close = "_notification__close_1m544_70";
 const styles = {
   notification,
-  "notification--info": "_notification--info_m746g_19",
-  "notification--success": "_notification--success_m746g_23",
-  "notification--warning": "_notification--warning_m746g_27",
-  "notification--error": "_notification--error_m746g_31",
-  "notification__icon-container": "_notification__icon-container_m746g_36",
+  "notification--info": "_notification--info_1m544_20",
+  "notification--success": "_notification--success_1m544_24",
+  "notification--warning": "_notification--warning_1m544_28",
+  "notification--error": "_notification--error_1m544_32",
+  "notification__icon-container": "_notification__icon-container_1m544_37",
   notification__icon,
   notification__content,
   notification__close

package/dist/components/Notification/Notification.module.css.js

@@ -1,15 +1,15 @@
 import './Notification.css';
-const notification = "_notification_m746g_8";
-const notification__icon = "_notification__icon_m746g_36";
-const notification__content = "_notification__content_m746g_59";
-const notification__close = "_notification__close_m746g_69";
+const notification = "_notification_1m544_8";
+const notification__icon = "_notification__icon_1m544_37";
+const notification__content = "_notification__content_1m544_60";
+const notification__close = "_notification__close_1m544_70";
 const styles = {
   notification,
-  "notification--info": "_notification--info_m746g_19",
-  "notification--success": "_notification--success_m746g_23",
-  "notification--warning": "_notification--warning_m746g_27",
-  "notification--error": "_notification--error_m746g_31",
-  "notification__icon-container": "_notification__icon-container_m746g_36",
+  "notification--info": "_notification--info_1m544_20",
+  "notification--success": "_notification--success_1m544_24",
+  "notification--warning": "_notification--warning_1m544_28",
+  "notification--error": "_notification--error_1m544_32",
+  "notification__icon-container": "_notification__icon-container_1m544_37",
   notification__icon,
   notification__content,
   notification__close

package/dist/components/Pagination/Pagination.cjs

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const icons = require("@dnanpm/icons");
+const react = require("react");
+const index = require("../../styles/utils/index.cjs");
+const Pagination_utils = require("./Pagination.utils.cjs");
+const Pagination_module = require("./Pagination.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const defaultPageLabel = (page) => `Sivu ${page}`;
+const defaultAnnouncement = (page, total) => `Sivu ${page} / ${total}`;
+const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  showPreviousNext = true,
+  previousPageLabel = "Edellinen sivu",
+  nextPageLabel = "Seuraava sivu",
+  formatPageLabel = defaultPageLabel,
+  formatPageAnnouncement = defaultAnnouncement,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  onFocusCapture,
+  onBlurCapture,
+  ref,
+  ...props
+}) => {
+  Pagination_utils.validatePages(currentPage, totalPages);
+  const currentButton = react.useRef(null);
+  const focusedButton = react.useRef(null);
+  const [announcement, setAnnouncement] = react.useState({
+    page: currentPage,
+    empty: totalPages === 0,
+    text: ""
+  });
+  if (announcement.page !== currentPage || announcement.empty !== (totalPages === 0)) {
+    setAnnouncement({
+      page: currentPage,
+      empty: totalPages === 0,
+      text: totalPages > 0 && !announcement.empty && announcement.page !== currentPage ? formatPageAnnouncement(currentPage, totalPages) : ""
+    });
+  }
+  react.useLayoutEffect(() => {
+    const focused = focusedButton.current;
+    if (focused && (!focused.isConnected || focused.disabled) && (document.activeElement === document.body || document.activeElement === focused)) {
+      currentButton.current?.focus();
+    }
+  }, [currentPage, totalPages, showPreviousNext]);
+  if (totalPages === 0) return null;
+  const requestPage = (page) => {
+    if (page !== currentPage) onPageChange(page);
+  };
+  const buttonClass = cn.cn(Pagination_module.default.pagination__button, index.focusStyles.focusable);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      ref,
+      className: cn.cn(Pagination_module.default.pagination, className),
+      "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : "Sivutus"),
+      "aria-labelledby": ariaLabelledBy,
+      onFocusCapture: (event) => {
+        if (event.target instanceof HTMLButtonElement) focusedButton.current = event.target;
+        onFocusCapture?.(event);
+      },
+      onBlurCapture: (event) => {
+        const button = focusedButton.current;
+        const focusLeftPagination = event.relatedTarget ? !event.currentTarget.contains(event.relatedTarget) : button?.isConnected && !button.disabled;
+        if (focusLeftPagination) {
+          focusedButton.current = null;
+        }
+        onBlurCapture?.(event);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "ul",
+          {
+            className: cn.cn(
+              Pagination_module.default.pagination__list,
+              Pagination_module.default[`pagination__list--${Pagination_utils.getPageWidth(totalPages)}`],
+              { [Pagination_module.default["pagination__list--arrows"]]: showPreviousNext }
+            ),
+            children: [
+              showPreviousNext && /* @__PURE__ */ jsxRuntime.jsx("li", { className: Pagination_module.default.pagination__arrow, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: buttonClass,
+                  "aria-label": previousPageLabel,
+                  disabled: currentPage === 1,
+                  onClick: () => requestPage(currentPage - 1),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftFilled, { "aria-hidden": "true", size: "16" })
+                }
+              ) }),
+              Pagination_utils.getPageCandidates(currentPage, totalPages).map(({ item, budgets }) => /* @__PURE__ */ jsxRuntime.jsx(
+                "li",
+                {
+                  className: cn.cn(
+                    Pagination_module.default.pagination__item,
+                    {
+                      [Pagination_module.default["pagination__item--current"]]: item.kind === "page" && item.page === currentPage
+                    },
+                    budgets.map((budget) => Pagination_module.default[`pagination__item--${budget}`])
+                  ),
+                  "aria-hidden": item.kind === "gap" ? true : void 0,
+                  children: item.kind === "page" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      ref: item.page === currentPage ? currentButton : void 0,
+                      className: buttonClass,
+                      "aria-label": formatPageLabel(item.page),
+                      "aria-current": item.page === currentPage ? "page" : void 0,
+                      onClick: () => requestPage(item.page),
+                      children: item.page
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: Pagination_module.default.pagination__gap, children: /* @__PURE__ */ jsxRuntime.jsx(icons.MoreFilled, { "aria-hidden": "true", size: "16" }) })
+                },
+                item.key
+              )),
+              showPreviousNext && /* @__PURE__ */ jsxRuntime.jsx("li", { className: Pagination_module.default.pagination__arrow, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: buttonClass,
+                  "aria-label": nextPageLabel,
+                  disabled: currentPage === totalPages,
+                  onClick: () => requestPage(currentPage + 1),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightFilled, { "aria-hidden": "true", size: "16" })
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: Pagination_module.default["pagination__sr-only"], "aria-live": "polite", "aria-atomic": "true", children: announcement.text })
+      ]
+    }
+  );
+};
+exports.Pagination = Pagination;
+//# sourceMappingURL=Pagination.cjs.map

package/dist/components/Pagination/Pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeftFilled, ChevronRightFilled, MoreFilled } from '@dnanpm/icons';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { focusStyles } from '../../styles/utils';\nimport type { PaginationProps } from './Pagination.types';\nimport { getPageCandidates, getPageWidth, validatePages } from './Pagination.utils';\nimport styles from './Pagination.module.css';\n\nconst defaultPageLabel = (page: number) => `Sivu ${page}`;\nconst defaultAnnouncement = (page: number, total: number) => `Sivu ${page} / ${total}`;\n\nexport const Pagination = ({\n    currentPage,\n    totalPages,\n    onPageChange,\n    showPreviousNext = true,\n    previousPageLabel = 'Edellinen sivu',\n    nextPageLabel = 'Seuraava sivu',\n    formatPageLabel = defaultPageLabel,\n    formatPageAnnouncement = defaultAnnouncement,\n    className,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    onFocusCapture,\n    onBlurCapture,\n    ref,\n    ...props\n}: PaginationProps) => {\n    validatePages(currentPage, totalPages);\n    const currentButton = useRef<HTMLButtonElement>(null);\n    const focusedButton = useRef<HTMLButtonElement | null>(null);\n    const [announcement, setAnnouncement] = useState({\n        page: currentPage,\n        empty: totalPages === 0,\n        text: '',\n    });\n\n    if (announcement.page !== currentPage || announcement.empty !== (totalPages === 0)) {\n        setAnnouncement({\n            page: currentPage,\n            empty: totalPages === 0,\n            text:\n                totalPages > 0 && !announcement.empty && announcement.page !== currentPage\n                    ? formatPageAnnouncement(currentPage, totalPages)\n                    : '',\n        });\n    }\n\n    useLayoutEffect(() => {\n        const focused = focusedButton.current;\n        if (\n            focused &&\n            (!focused.isConnected || focused.disabled) &&\n            (document.activeElement === document.body || document.activeElement === focused)\n        ) {\n            currentButton.current?.focus();\n        }\n    }, [currentPage, totalPages, showPreviousNext]);\n\n    if (totalPages === 0) return null;\n\n    const requestPage = (page: number) => {\n        if (page !== currentPage) onPageChange(page);\n    };\n    const buttonClass = cn(styles.pagination__button, focusStyles.focusable);\n\n    return (\n        <nav\n            ref={ref}\n            className={cn(styles.pagination, className)}\n            aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : 'Sivutus')}\n            aria-labelledby={ariaLabelledBy}\n            onFocusCapture={(event) => {\n                if (event.target instanceof HTMLButtonElement) focusedButton.current = event.target;\n                onFocusCapture?.(event);\n            }}\n            onBlurCapture={(event) => {\n                const button = focusedButton.current;\n                const focusLeftPagination = event.relatedTarget\n                    ? !event.currentTarget.contains(event.relatedTarget)\n                    : button?.isConnected && !button.disabled;\n\n                if (focusLeftPagination) {\n                    focusedButton.current = null;\n                }\n                onBlurCapture?.(event);\n            }}\n            {...props}\n        >\n            <ul\n                className={cn(\n                    styles.pagination__list,\n                    styles[`pagination__list--${getPageWidth(totalPages)}`],\n                    { [styles['pagination__list--arrows']]: showPreviousNext },\n                )}\n            >\n                {showPreviousNext && (\n                    <li className={styles.pagination__arrow}>\n                        <button\n                            type=\"button\"\n                            className={buttonClass}\n                            aria-label={previousPageLabel}\n                            disabled={currentPage === 1}\n                            onClick={() => requestPage(currentPage - 1)}\n                        >\n                            <ChevronLeftFilled aria-hidden=\"true\" size=\"16\" />\n                        </button>\n                    </li>\n                )}\n                {getPageCandidates(currentPage, totalPages).map(({ item, budgets }) => (\n                    <li\n                        key={item.key}\n                        className={cn(\n                            styles.pagination__item,\n                            {\n                                [styles['pagination__item--current']]:\n                                    item.kind === 'page' && item.page === currentPage,\n                            },\n                            budgets.map((budget) => styles[`pagination__item--${budget}`]),\n                        )}\n                        aria-hidden={item.kind === 'gap' ? true : undefined}\n                    >\n                        {item.kind === 'page' ? (\n                            <button\n                                type=\"button\"\n                                ref={item.page === currentPage ? currentButton : undefined}\n                                className={buttonClass}\n                                aria-label={formatPageLabel(item.page)}\n                                aria-current={item.page === currentPage ? 'page' : undefined}\n                                onClick={() => requestPage(item.page)}\n                            >\n                                {item.page}\n                            </button>\n                        ) : (\n                            <span className={styles.pagination__gap}>\n                                <MoreFilled aria-hidden=\"true\" size=\"16\" />\n                            </span>\n                        )}\n                    </li>\n                ))}\n                {showPreviousNext && (\n                    <li className={styles.pagination__arrow}>\n                        <button\n                            type=\"button\"\n                            className={buttonClass}\n                            aria-label={nextPageLabel}\n                            disabled={currentPage === totalPages}\n                            onClick={() => requestPage(currentPage + 1)}\n                        >\n                            <ChevronRightFilled aria-hidden=\"true\" size=\"16\" />\n                        </button>\n                    </li>\n                )}\n            </ul>\n            <span className={styles['pagination__sr-only']} aria-live=\"polite\" aria-atomic=\"true\">\n                {announcement.text}\n            </span>\n        </nav>\n    );\n};\n"],"names":["validatePages","useRef","useState","useLayoutEffect","cn","styles","focusStyles","jsxs","getPageWidth","jsx","ChevronLeftFilled","getPageCandidates","MoreFilled","ChevronRightFilled"],"mappings":"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"}

package/dist/components/Pagination/Pagination.css

@@ -0,0 +1,256 @@
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._pagination_1w4hz_1 {
+    container: pagination / inline-size;
+    width: 100%;
+    min-width: 0;
+    font: var(--typography-label-lg);
+}
+
+._pagination__list_1w4hz_8 {
+    --_pagination-3: flex;
+    --_pagination-cell: var(--spacing-space-40);
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-space-8);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+._pagination__list--wide_1w4hz_21 {
+    --_pagination-cell: var(--spacing-space-64);
+}
+
+._pagination__list--arrows_1w4hz_25 {
+    --_pagination-3: initial;
+
+    flex-wrap: nowrap;
+}
+
+._pagination__item_1w4hz_31,
+._pagination__arrow_1w4hz_32 {
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 0;
+}
+
+._pagination__item_1w4hz_31 {
+    display: var(
+        --_pagination-member-3,
+        var(--_pagination-member-5, var(--_pagination-member-7, var(--_pagination-member-9, none)))
+    );
+}
+
+._pagination__item--3_1w4hz_45 {
+    --_pagination-member-3: var(--_pagination-3);
+}
+
+._pagination__item--5_1w4hz_49 {
+    --_pagination-member-5: var(--_pagination-5);
+}
+
+._pagination__item--7_1w4hz_53 {
+    --_pagination-member-7: var(--_pagination-7);
+}
+
+._pagination__item--9_1w4hz_57 {
+    --_pagination-member-9: var(--_pagination-9);
+}
+
+/* Each query budget reserves one extra cell for a number focused before a resize. */
+._pagination__item_1w4hz_31:focus-within,
+._pagination__item--current_1w4hz_63 {
+    display: flex;
+}
+
+._pagination__button_1w4hz_67,
+._pagination__gap_1w4hz_68 {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--_pagination-cell);
+    min-height: var(--spacing-space-40);
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+._pagination__button_1w4hz_67 {
+    appearance: none;
+    padding: var(--spacing-space-8);
+    border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-mid);
+    border-radius: var(--radius-semantic-sm);
+    background: var(--color-semantic-surface-base);
+    color: var(--color-semantic-foreground-default);
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+        background: var(--color-semantic-surface-neutral-mid);
+    }
+
+    &[aria-current='page'] {
+        border-color: transparent;
+        background: var(--color-semantic-interactive-primary-default);
+        color: var(--color-semantic-foreground-inverse);
+
+        &:hover,
+        &:focus-visible,
+        &:active {
+            background: var(--color-semantic-interactive-primary-hover);
+        }
+    }
+
+    &:disabled {
+        background: var(--color-semantic-interactive-neutral-disabled);
+        color: var(--color-semantic-foreground-muted);
+        cursor: default;
+    }
+
+    & > svg {
+        width: var(--spacing-space-16);
+        height: var(--spacing-space-16);
+    }
+}
+
+._pagination__arrow_1w4hz_32 ._pagination__button_1w4hz_67 {
+    min-width: var(--spacing-space-40);
+}
+
+._pagination__gap_1w4hz_68 {
+    color: var(--color-semantic-foreground-default);
+
+    & > svg {
+        width: var(--spacing-space-16);
+        height: var(--spacing-space-16);
+    }
+}
+
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._pagination__gap_1w4hz_68 {
+        color: var(--color-semantic-foreground-inverse);
+    }
+}
+
+/* Thresholds include 8px gaps, 8px focus clearance, arrows, and one spare page cell. */
+@container pagination (width >= 17.5em) {
+    ._pagination__list--normal_1w4hz_140._pagination__list--arrows_1w4hz_25 {
+        --_pagination-3: flex;
+    }
+}
+
+@container pagination (width >= 18em) {
+    ._pagination__list--normal_1w4hz_140:not(._pagination__list--arrows_1w4hz_25) {
+        --_pagination-3: initial;
+        --_pagination-5: flex;
+    }
+}
+
+@container pagination (width >= 23.5em) {
+    ._pagination__list--wide_1w4hz_21._pagination__list--arrows_1w4hz_25 {
+        --_pagination-3: flex;
+    }
+}
+
+@container pagination (width >= 24em) {
+    ._pagination__list--normal_1w4hz_140._pagination__list--arrows_1w4hz_25 {
+        --_pagination-3: initial;
+        --_pagination-5: flex;
+    }
+
+    ._pagination__list--normal_1w4hz_140:not(._pagination__list--arrows_1w4hz_25) {
+        --_pagination-5: initial;
+        --_pagination-7: flex;
+    }
+}
+
+@container pagination (width >= 27em) {
+    ._pagination__list--wide_1w4hz_21:not(._pagination__list--arrows_1w4hz_25) {
+        --_pagination-3: initial;
+        --_pagination-5: flex;
+    }
+}
+
+@container pagination (width >= 30em) {
+    ._pagination__list--normal_1w4hz_140._pagination__list--arrows_1w4hz_25 {
+        --_pagination-5: initial;
+        --_pagination-7: flex;
+    }
+
+    ._pagination__list--normal_1w4hz_140:not(._pagination__list--arrows_1w4hz_25) {
+        --_pagination-7: initial;
+        --_pagination-9: flex;
+    }
+}
+
+@container pagination (width >= 33em) {
+    ._pagination__list--wide_1w4hz_21._pagination__list--arrows_1w4hz_25 {
+        --_pagination-3: initial;
+        --_pagination-5: flex;
+    }
+}
+
+@container pagination (width >= 36em) {
+    ._pagination__list--normal_1w4hz_140._pagination__list--arrows_1w4hz_25 {
+        --_pagination-7: initial;
+        --_pagination-9: flex;
+    }
+
+    ._pagination__list--wide_1w4hz_21:not(._pagination__list--arrows_1w4hz_25) {
+        --_pagination-5: initial;
+        --_pagination-7: flex;
+    }
+}
+
+@container pagination (width >= 42em) {
+    ._pagination__list--wide_1w4hz_21._pagination__list--arrows_1w4hz_25 {
+        --_pagination-5: initial;
+        --_pagination-7: flex;
+    }
+}
+
+@container pagination (width >= 45em) {
+    ._pagination__list--wide_1w4hz_21:not(._pagination__list--arrows_1w4hz_25) {
+        --_pagination-7: initial;
+        --_pagination-9: flex;
+    }
+}
+
+@container pagination (width >= 51em) {
+    ._pagination__list--wide_1w4hz_21._pagination__list--arrows_1w4hz_25 {
+        --_pagination-7: initial;
+        --_pagination-9: flex;
+    }
+}
+
+._pagination__sr-only_1w4hz_229 {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+}
+
+@media (forced-colors: active) {
+    ._pagination__button_1w4hz_67[aria-current='page'] {
+        border-color: Highlight;
+        background: Highlight;
+        color: HighlightText;
+    }
+
+    ._pagination__button_1w4hz_67:disabled {
+        border-color: GrayText;
+        color: GrayText;
+    }
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps } from './Pagination.types';
+export declare const Pagination: ({ currentPage, totalPages, onPageChange, showPreviousNext, previousPageLabel, nextPageLabel, formatPageLabel, formatPageAnnouncement, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onFocusCapture, onBlurCapture, ref, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Pagination.d.ts.map

package/dist/components/Pagination/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAO1D,eAAO,MAAM,UAAU,GAAI,6PAgBxB,eAAe,mDAoIjB,CAAC"}