@ktnpm_devops/react-component 0.10.0 → 0.12.0

package/dist/index32.js

@@ -1,38 +1,60 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "./index52.js";
-import styles from "./index62.js";
-const NavItem = forwardRef(
-  ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {
-    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }),
-      !collapsed && /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
-      !collapsed && badge !== void 0 && /* @__PURE__ */ jsx("span", { className: styles.badge, children: badge })
-    ] });
-    const sharedProps = {
-      className: clsx(styles.root, { [styles.active]: active, [styles.collapsed]: collapsed, [styles.disabled]: disabled }, className),
-      "aria-current": active ? "page" : void 0,
-      "aria-disabled": disabled || void 0,
-      title: collapsed ? label : void 0
-    };
-    if (href && !disabled) {
-      return /* @__PURE__ */ jsx("a", { ref, href, ...sharedProps, children: content });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useEffect, useImperativeHandle } from "react";
+import { Check } from "lucide-react";
+import { clsx } from "./index55.js";
+import { ICON_SIZE } from "./index62.js";
+import styles from "./index67.js";
+import { Modal } from "./index33.js";
+const noop = () => {
+};
+const LoadingBase = forwardRef(
+  ({ open = true, onlyThrobber = false, title, labels = [], closable = false, onClose }, ref) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    useEffect(() => {
+      if (open) setActiveIndex(0);
+    }, [open]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        activate: (labelOrIndex) => {
+          const index = typeof labelOrIndex === "number" ? labelOrIndex : labels.indexOf(labelOrIndex);
+          if (index >= 0) setActiveIndex(index);
+        },
+        complete: () => setActiveIndex(labels.length)
+      }),
+      [labels]
+    );
+    if (!open) return null;
+    if (onlyThrobber) {
+      return /* @__PURE__ */ jsx("div", { className: styles.throbber, role: "status", "aria-label": title, children: /* @__PURE__ */ jsx("span", { className: styles.spinner, "aria-hidden": "true" }) });
     }
     return /* @__PURE__ */ jsx(
-      "button",
+      Modal,
       {
-        ref,
-        type: "button",
-        onClick: disabled ? void 0 : onClick,
-        disabled,
-        ...sharedProps,
-        children: content
+        open,
+        onClose: closable ? onClose ?? noop : noop,
+        className: closable ? void 0 : styles.nonClosable,
+        title: /* @__PURE__ */ jsxs("span", { className: styles.titleRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.titleSpinner, "aria-hidden": "true" }),
+          title
+        ] }),
+        children: /* @__PURE__ */ jsx("ul", { className: styles.steps, children: labels.map((label, index) => {
+          const status = index < activeIndex ? "done" : index === activeIndex ? "active" : "pending";
+          return /* @__PURE__ */ jsxs("li", { className: clsx(styles.step, styles[status]), children: [
+            /* @__PURE__ */ jsxs("span", { className: styles.iconSlot, "aria-hidden": "true", children: [
+              status === "done" && /* @__PURE__ */ jsx(Check, { size: ICON_SIZE.MD, className: styles.checkIcon }),
+              status === "active" && /* @__PURE__ */ jsx("span", { className: styles.stepSpinner })
+            ] }),
+            /* @__PURE__ */ jsx("span", { children: label })
+          ] }, label);
+        }) })
       }
     );
   }
 );
-NavItem.displayName = "NavItem";
+LoadingBase.displayName = "Loading";
+const Loading = memo(LoadingBase);
 export {
-  NavItem
+  Loading
 };
 //# sourceMappingURL=index32.js.map

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/primitives/NavItem/NavItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { NavItemProps } from './NavItem.types';\nimport styles from './NavItem.module.css';\n\nexport const NavItem = forwardRef<HTMLElement, NavItemProps>(\n  ({ icon, label, active = false, badge, collapsed = false, disabled = false, href, onClick, className }, ref) => {\n    const content = (\n      <>\n        {icon && <span className={styles.icon}>{icon}</span>}\n        {!collapsed && <span className={styles.label}>{label}</span>}\n        {!collapsed && badge !== undefined && (\n          <span className={styles.badge}>{badge}</span>\n        )}\n      </>\n    );\n\n    const sharedProps = {\n      className: clsx(styles.root, { [styles.active]: active, [styles.collapsed]: collapsed, [styles.disabled]: disabled }, className),\n      'aria-current': active ? ('page' as const) : undefined,\n      'aria-disabled': disabled || undefined,\n      title: collapsed ? label : undefined,\n    };\n\n    if (href && !disabled) {\n      return (\n        <a ref={ref as React.Ref<HTMLAnchorElement>} href={href} {...sharedProps}>\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        onClick={disabled ? undefined : onClick}\n        disabled={disabled}\n        {...sharedProps}\n      >\n        {content}\n      </button>\n    );\n  },\n);\n\nNavItem.displayName = 'NavItem';\n"],"names":[],"mappings":";;;;AAKO,MAAM,UAAU;AAAA,EACrB,CAAC,EAAE,MAAM,OAAO,SAAS,OAAO,OAAO,YAAY,OAAO,WAAW,OAAO,MAAM,SAAS,UAAA,GAAa,QAAQ;AAC9G,UAAM,UACJ,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,QAAQ,oBAAC,QAAA,EAAK,WAAW,OAAO,MAAO,UAAA,MAAK;AAAA,MAC5C,CAAC,aAAa,oBAAC,UAAK,WAAW,OAAO,OAAQ,UAAA,OAAM;AAAA,MACpD,CAAC,aAAa,UAAU,8BACtB,QAAA,EAAK,WAAW,OAAO,OAAQ,UAAA,MAAA,CAAM;AAAA,IAAA,GAE1C;AAGF,UAAM,cAAc;AAAA,MAClB,WAAW,KAAK,OAAO,MAAM,EAAE,CAAC,OAAO,MAAM,GAAG,QAAQ,CAAC,OAAO,SAAS,GAAG,WAAW,CAAC,OAAO,QAAQ,GAAG,SAAA,GAAY,SAAS;AAAA,MAC/H,gBAAgB,SAAU,SAAmB;AAAA,MAC7C,iBAAiB,YAAY;AAAA,MAC7B,OAAO,YAAY,QAAQ;AAAA,IAAA;AAG7B,QAAI,QAAQ,CAAC,UAAU;AACrB,iCACG,KAAA,EAAE,KAA0C,MAAa,GAAG,aAC1D,UAAA,SACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,SAAS,WAAW,SAAY;AAAA,QAChC;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,QAAQ,cAAc;"}
+{"version":3,"file":"index32.js","sources":["../src/composites/Loading/Loading.tsx"],"sourcesContent":["import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';\nimport { Check } from 'lucide-react';\nimport clsx from 'clsx';\nimport { Modal } from '../../primitives/Modal';\nimport { ICON_SIZE } from '../../constants';\nimport type { LoadingHandle, LoadingProps, LoadingStepStatus } from './Loading.types';\nimport styles from './Loading.module.css';\n\nconst noop = (): void => {};\n\nconst LoadingBase = forwardRef<LoadingHandle, LoadingProps>(\n  ({ open = true, onlyThrobber = false, title, labels = [], closable = false, onClose }, ref) => {\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    useEffect(() => {\n      if (open) setActiveIndex(0);\n    }, [open]);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        activate: (labelOrIndex) => {\n          const index = typeof labelOrIndex === 'number' ? labelOrIndex : labels.indexOf(labelOrIndex);\n          if (index >= 0) setActiveIndex(index);\n        },\n        complete: () => setActiveIndex(labels.length),\n      }),\n      [labels],\n    );\n\n    if (!open) return null;\n\n    if (onlyThrobber) {\n      return (\n        <div className={styles.throbber} role=\"status\" aria-label={title}>\n          <span className={styles.spinner} aria-hidden=\"true\" />\n        </div>\n      );\n    }\n\n    return (\n      <Modal\n        open={open}\n        onClose={closable ? (onClose ?? noop) : noop}\n        className={closable ? undefined : styles.nonClosable}\n        title={\n          <span className={styles.titleRow}>\n            <span className={styles.titleSpinner} aria-hidden=\"true\" />\n            {title}\n          </span>\n        }\n      >\n        <ul className={styles.steps}>\n          {labels.map((label, index) => {\n            const status: LoadingStepStatus =\n              index < activeIndex ? 'done' : index === activeIndex ? 'active' : 'pending';\n            return (\n              <li key={label} className={clsx(styles.step, styles[status])}>\n                <span className={styles.iconSlot} aria-hidden=\"true\">\n                  {status === 'done' && <Check size={ICON_SIZE.MD} className={styles.checkIcon} />}\n                  {status === 'active' && <span className={styles.stepSpinner} />}\n                </span>\n                <span>{label}</span>\n              </li>\n            );\n          })}\n        </ul>\n      </Modal>\n    );\n  },\n);\n\nLoadingBase.displayName = 'Loading';\n\nexport const Loading = memo(LoadingBase);\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,OAAO,MAAY;AAAC;AAE1B,MAAM,cAAc;AAAA,EAClB,CAAC,EAAE,OAAO,MAAM,eAAe,OAAO,OAAO,SAAS,CAAA,GAAI,WAAW,OAAO,QAAA,GAAW,QAAQ;AAC7F,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAEhD,cAAU,MAAM;AACd,UAAI,qBAAqB,CAAC;AAAA,IAC5B,GAAG,CAAC,IAAI,CAAC;AAET;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,UAAU,CAAC,iBAAiB;AAC1B,gBAAM,QAAQ,OAAO,iBAAiB,WAAW,eAAe,OAAO,QAAQ,YAAY;AAC3F,cAAI,SAAS,EAAG,gBAAe,KAAK;AAAA,QACtC;AAAA,QACA,UAAU,MAAM,eAAe,OAAO,MAAM;AAAA,MAAA;AAAA,MAE9C,CAAC,MAAM;AAAA,IAAA;AAGT,QAAI,CAAC,KAAM,QAAO;AAElB,QAAI,cAAc;AAChB,iCACG,OAAA,EAAI,WAAW,OAAO,UAAU,MAAK,UAAS,cAAY,OACzD,UAAA,oBAAC,UAAK,WAAW,OAAO,SAAS,eAAY,QAAO,GACtD;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS,WAAY,WAAW,OAAQ;AAAA,QACxC,WAAW,WAAW,SAAY,OAAO;AAAA,QACzC,OACE,qBAAC,QAAA,EAAK,WAAW,OAAO,UACtB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,cAAc,eAAY,QAAO;AAAA,UACxD;AAAA,QAAA,GACH;AAAA,QAGF,UAAA,oBAAC,QAAG,WAAW,OAAO,OACnB,UAAA,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,gBAAM,SACJ,QAAQ,cAAc,SAAS,UAAU,cAAc,WAAW;AACpE,iBACE,qBAAC,QAAe,WAAW,KAAK,OAAO,MAAM,OAAO,MAAM,CAAC,GACzD,UAAA;AAAA,YAAA,qBAAC,QAAA,EAAK,WAAW,OAAO,UAAU,eAAY,QAC3C,UAAA;AAAA,cAAA,WAAW,8BAAW,OAAA,EAAM,MAAM,UAAU,IAAI,WAAW,OAAO,UAAA,CAAW;AAAA,cAC7E,WAAW,YAAY,oBAAC,QAAA,EAAK,WAAW,OAAO,YAAA,CAAa;AAAA,YAAA,GAC/D;AAAA,YACA,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,UAAA,EAAA,GALN,KAMT;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;AAEnB,MAAM,UAAU,KAAK,WAAW;"}

package/dist/index33.cjs

@@ -1,114 +1,42 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const clsx = require("./index52.cjs");
-const constants = require("./index59.cjs");
-const Pagination_module = require("./index93.cjs");
-function range(start, end) {
-  const out = [];
-  for (let page = start; page <= end; page += 1) out.push(page);
-  return out;
-}
-function getPaginationItems(currentPage, totalPages, siblingCount, boundaryCount) {
-  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;
-  if (totalPages <= totalNumbers) return range(1, totalPages);
-  const startPages = range(1, boundaryCount);
-  const endPages = range(totalPages - boundaryCount + 1, totalPages);
-  const siblingsStart = Math.max(
-    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
-    boundaryCount + 2
-  );
-  const siblingsEnd = Math.min(
-    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),
-    endPages[0] - 2
-  );
-  const items = [...startPages];
-  items.push(siblingsStart > boundaryCount + 2 ? "ellipsis" : boundaryCount + 1);
-  items.push(...range(siblingsStart, siblingsEnd));
-  items.push(siblingsEnd < totalPages - boundaryCount - 1 ? "ellipsis" : totalPages - boundaryCount);
-  items.push(...endPages);
-  return items;
-}
-function Chevron({ direction }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: constants.ICON_SIZE.MD,
-      height: constants.ICON_SIZE.MD,
-      viewBox: constants.SVG_VIEWBOX,
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: constants.SVG_STROKE_WIDTH,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: direction === "left" ? "15 18 9 12 15 6" : "9 18 15 12 9 6" })
-    }
-  );
-}
-const Pagination = react.forwardRef(
-  ({
-    currentPage,
-    totalItems,
-    pageSize,
-    onPageChange,
-    siblingCount = constants.PAGINATION.SIBLING_COUNT,
-    boundaryCount = constants.PAGINATION.BOUNDARY_COUNT,
-    showPrevNext = true,
-    className,
-    "aria-label": ariaLabel = "Pagination",
-    ...props
-  }, ref) => {
-    const totalPages = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));
-    const page = Math.min(Math.max(currentPage, 1), totalPages);
-    const items = getPaginationItems(page, totalPages, siblingCount, boundaryCount);
-    const goTo = (target) => {
-      const next = Math.min(Math.max(target, 1), totalPages);
-      if (next !== page) onPageChange(next);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": ariaLabel, className: clsx.clsx(Pagination_module.default.root, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: Pagination_module.default.list, children: [
-      showPrevNext && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+const reactDom = require("react-dom");
+const clsx = require("./index55.cjs");
+const useEscapeKey = require("./index5.cjs");
+const Modal_module = require("./index75.cjs");
+const Modal = ({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  portalTarget,
+  className,
+  bodyClassName,
+  style,
+  closeLabel = "×"
+}) => {
+  useEscapeKey.useEscapeKey(onClose, open);
+  if (!open) return null;
+  const modalContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(Modal_module.default.root, className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Modal_module.default.header, children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: Modal_module.default.title, children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
-          className: Pagination_module.default.arrow,
-          onClick: () => goTo(page - 1),
-          disabled: page <= 1,
-          "aria-label": "Go to previous page",
-          children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { direction: "left" })
+          onClick: onClose,
+          className: Modal_module.default.closeBtn,
+          "aria-label": "Close modal",
+          children: closeLabel
         }
-      ) }),
-      items.map(
-        (item, index) => item === "ellipsis" ? (
-          // eslint-disable-next-line react/no-array-index-key
-          /* @__PURE__ */ jsxRuntime.jsx("li", { className: Pagination_module.default.ellipsis, "aria-hidden": "true", children: "…" }, `ellipsis-${index}`)
-        ) : /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: clsx.clsx(Pagination_module.default.page, item === page && Pagination_module.default.isActive),
-            onClick: () => goTo(item),
-            "aria-current": item === page ? "page" : void 0,
-            "aria-label": `Go to page ${item}`,
-            children: item
-          }
-        ) }, item)
-      ),
-      showPrevNext && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: Pagination_module.default.arrow,
-          onClick: () => goTo(page + 1),
-          disabled: page >= totalPages,
-          "aria-label": "Go to next page",
-          children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { direction: "right" })
-        }
-      ) })
-    ] }) });
-  }
-);
-Pagination.displayName = "Pagination";
-exports.Pagination = Pagination;
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Modal_module.default.body, bodyClassName), children }),
+    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.footer, children: footer })
+  ] }) });
+  return reactDom.createPortal(modalContent, portalTarget ?? document.body);
+};
+exports.Modal = Modal;
 //# sourceMappingURL=index33.cjs.map

package/dist/index33.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index33.cjs","sources":["../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { ICON_SIZE, PAGINATION, SVG_STROKE_WIDTH, SVG_VIEWBOX } from '../../constants';\nimport type { PaginationItem, PaginationProps } from './Pagination.types';\nimport styles from './Pagination.module.css';\n\nfunction range(start: number, end: number): number[] {\n  const out: number[] = [];\n  for (let page = start; page <= end; page += 1) out.push(page);\n  return out;\n}\n\n/**\n * Builds the sequence of page numbers and ellipsis gaps to render, keeping the\n * first/last boundaries and a window of siblings around the current page.\n */\nfunction getPaginationItems(\n  currentPage: number,\n  totalPages: number,\n  siblingCount: number,\n  boundaryCount: number,\n): PaginationItem[] {\n  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;\n  if (totalPages <= totalNumbers) return range(1, totalPages);\n\n  const startPages = range(1, boundaryCount);\n  const endPages = range(totalPages - boundaryCount + 1, totalPages);\n\n  const siblingsStart = Math.max(\n    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  );\n  const siblingsEnd = Math.min(\n    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages[0] - 2,\n  );\n\n  const items: PaginationItem[] = [...startPages];\n  items.push(siblingsStart > boundaryCount + 2 ? 'ellipsis' : boundaryCount + 1);\n  items.push(...range(siblingsStart, siblingsEnd));\n  items.push(siblingsEnd < totalPages - boundaryCount - 1 ? 'ellipsis' : totalPages - boundaryCount);\n  items.push(...endPages);\n\n  return items;\n}\n\nfunction Chevron({ direction }: { direction: 'left' | 'right' }) {\n  return (\n    <svg\n      width={ICON_SIZE.MD}\n      height={ICON_SIZE.MD}\n      viewBox={SVG_VIEWBOX}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={SVG_STROKE_WIDTH}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points={direction === 'left' ? '15 18 9 12 15 6' : '9 18 15 12 9 6'} />\n    </svg>\n  );\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      currentPage,\n      totalItems,\n      pageSize,\n      onPageChange,\n      siblingCount = PAGINATION.SIBLING_COUNT,\n      boundaryCount = PAGINATION.BOUNDARY_COUNT,\n      showPrevNext = true,\n      className,\n      'aria-label': ariaLabel = 'Pagination',\n      ...props\n    },\n    ref,\n  ) => {\n    const totalPages = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));\n    const page = Math.min(Math.max(currentPage, 1), totalPages);\n    const items = getPaginationItems(page, totalPages, siblingCount, boundaryCount);\n\n    const goTo = (target: number) => {\n      const next = Math.min(Math.max(target, 1), totalPages);\n      if (next !== page) onPageChange(next);\n    };\n\n    return (\n      <nav ref={ref} aria-label={ariaLabel} className={clsx(styles.root, className)} {...props}>\n        <ul className={styles.list}>\n          {showPrevNext && (\n            <li>\n              <button\n                type=\"button\"\n                className={styles.arrow}\n                onClick={() => goTo(page - 1)}\n                disabled={page <= 1}\n                aria-label=\"Go to previous page\"\n              >\n                <Chevron direction=\"left\" />\n              </button>\n            </li>\n          )}\n\n          {items.map((item, index) =>\n            item === 'ellipsis' ? (\n              // eslint-disable-next-line react/no-array-index-key\n              <li key={`ellipsis-${index}`} className={styles.ellipsis} aria-hidden=\"true\">\n                &hellip;\n              </li>\n            ) : (\n              <li key={item}>\n                <button\n                  type=\"button\"\n                  className={clsx(styles.page, item === page && styles.isActive)}\n                  onClick={() => goTo(item)}\n                  aria-current={item === page ? 'page' : undefined}\n                  aria-label={`Go to page ${item}`}\n                >\n                  {item}\n                </button>\n              </li>\n            ),\n          )}\n\n          {showPrevNext && (\n            <li>\n              <button\n                type=\"button\"\n                className={styles.arrow}\n                onClick={() => goTo(page + 1)}\n                disabled={page >= totalPages}\n                aria-label=\"Go to next page\"\n              >\n                <Chevron direction=\"right\" />\n              </button>\n            </li>\n          )}\n        </ul>\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n"],"names":["jsx","ICON_SIZE","SVG_VIEWBOX","SVG_STROKE_WIDTH","forwardRef","PAGINATION","clsx","styles"],"mappings":"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"}
+{"version":3,"file":"index33.cjs","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n  open: boolean;\n  title?: ReactNode;\n  onClose: () => void;\n  children: ReactNode;\n  footer?: ReactNode;\n  portalTarget?: HTMLElement;\n  className?: string;\n  bodyClassName?: string;\n  style?: CSSProperties;\n  closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n  open,\n  title,\n  onClose,\n  children,\n  footer,\n  portalTarget,\n  className,\n  bodyClassName,\n  style,\n  closeLabel = '\\u00D7',\n}: ModalProps) => {\n  useEscapeKey(onClose, open);\n\n  if (!open) return null;\n\n  const modalContent = (\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.root, className)} style={style}>\n        <div className={styles.header}>\n          {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={styles.closeBtn}\n            aria-label=\"Close modal\"\n          >\n            {closeLabel}\n          </button>\n        </div>\n        <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </div>\n  );\n\n  return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":["useEscapeKey","jsx","styles","jsxs","clsx","createPortal"],"mappings":";;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChBA,eAAAA,aAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJC,+BAAC,OAAA,EAAI,WAAWC,aAAAA,QAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAAC,gCAAC,SAAI,WAAWC,KAAAA,KAAKF,qBAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAWD,aAAAA,QAAO,QACpB,UAAA;AAAA,MAAA,QAAQD,2BAAAA,IAAC,QAAG,WAAWC,aAAAA,QAAO,OAAQ,UAAA,MAAA,CAAM,mCAAS,QAAA,CAAA,CAAK;AAAA,MAC3DD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAWC,aAAAA,QAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACAD,+BAAC,SAAI,WAAWG,KAAAA,KAAKF,aAAAA,QAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAUD,2BAAAA,IAAC,OAAA,EAAI,WAAWC,aAAAA,QAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAOG,SAAAA,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;;"}

package/dist/index33.js

@@ -1,114 +1,42 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "./index52.js";
-import { PAGINATION, SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index59.js";
-import styles from "./index93.js";
-function range(start, end) {
-  const out = [];
-  for (let page = start; page <= end; page += 1) out.push(page);
-  return out;
-}
-function getPaginationItems(currentPage, totalPages, siblingCount, boundaryCount) {
-  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;
-  if (totalPages <= totalNumbers) return range(1, totalPages);
-  const startPages = range(1, boundaryCount);
-  const endPages = range(totalPages - boundaryCount + 1, totalPages);
-  const siblingsStart = Math.max(
-    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
-    boundaryCount + 2
-  );
-  const siblingsEnd = Math.min(
-    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),
-    endPages[0] - 2
-  );
-  const items = [...startPages];
-  items.push(siblingsStart > boundaryCount + 2 ? "ellipsis" : boundaryCount + 1);
-  items.push(...range(siblingsStart, siblingsEnd));
-  items.push(siblingsEnd < totalPages - boundaryCount - 1 ? "ellipsis" : totalPages - boundaryCount);
-  items.push(...endPages);
-  return items;
-}
-function Chevron({ direction }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: ICON_SIZE.MD,
-      height: ICON_SIZE.MD,
-      viewBox: SVG_VIEWBOX,
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: SVG_STROKE_WIDTH,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("polyline", { points: direction === "left" ? "15 18 9 12 15 6" : "9 18 15 12 9 6" })
-    }
-  );
-}
-const Pagination = forwardRef(
-  ({
-    currentPage,
-    totalItems,
-    pageSize,
-    onPageChange,
-    siblingCount = PAGINATION.SIBLING_COUNT,
-    boundaryCount = PAGINATION.BOUNDARY_COUNT,
-    showPrevNext = true,
-    className,
-    "aria-label": ariaLabel = "Pagination",
-    ...props
-  }, ref) => {
-    const totalPages = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));
-    const page = Math.min(Math.max(currentPage, 1), totalPages);
-    const items = getPaginationItems(page, totalPages, siblingCount, boundaryCount);
-    const goTo = (target) => {
-      const next = Math.min(Math.max(target, 1), totalPages);
-      if (next !== page) onPageChange(next);
-    };
-    return /* @__PURE__ */ jsx("nav", { ref, "aria-label": ariaLabel, className: clsx(styles.root, className), ...props, children: /* @__PURE__ */ jsxs("ul", { className: styles.list, children: [
-      showPrevNext && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+import { createPortal } from "react-dom";
+import { clsx } from "./index55.js";
+import { useEscapeKey } from "./index5.js";
+import styles from "./index75.js";
+const Modal = ({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  portalTarget,
+  className,
+  bodyClassName,
+  style,
+  closeLabel = "×"
+}) => {
+  useEscapeKey(onClose, open);
+  if (!open) return null;
+  const modalContent = /* @__PURE__ */ jsx("div", { className: styles.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      title ? /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }) : /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: styles.arrow,
-          onClick: () => goTo(page - 1),
-          disabled: page <= 1,
-          "aria-label": "Go to previous page",
-          children: /* @__PURE__ */ jsx(Chevron, { direction: "left" })
+          onClick: onClose,
+          className: styles.closeBtn,
+          "aria-label": "Close modal",
+          children: closeLabel
         }
-      ) }),
-      items.map(
-        (item, index) => item === "ellipsis" ? (
-          // eslint-disable-next-line react/no-array-index-key
-          /* @__PURE__ */ jsx("li", { className: styles.ellipsis, "aria-hidden": "true", children: "…" }, `ellipsis-${index}`)
-        ) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: clsx(styles.page, item === page && styles.isActive),
-            onClick: () => goTo(item),
-            "aria-current": item === page ? "page" : void 0,
-            "aria-label": `Go to page ${item}`,
-            children: item
-          }
-        ) }, item)
-      ),
-      showPrevNext && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: styles.arrow,
-          onClick: () => goTo(page + 1),
-          disabled: page >= totalPages,
-          "aria-label": "Go to next page",
-          children: /* @__PURE__ */ jsx(Chevron, { direction: "right" })
-        }
-      ) })
-    ] }) });
-  }
-);
-Pagination.displayName = "Pagination";
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: clsx(styles.body, bodyClassName), children }),
+    footer && /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer })
+  ] }) });
+  return createPortal(modalContent, portalTarget ?? document.body);
+};
 export {
-  Pagination
+  Modal
 };
 //# sourceMappingURL=index33.js.map

package/dist/index33.js.map

@@ -1 +1 @@
-{"version":3,"file":"index33.js","sources":["../src/primitives/Pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { ICON_SIZE, PAGINATION, SVG_STROKE_WIDTH, SVG_VIEWBOX } from '../../constants';\nimport type { PaginationItem, PaginationProps } from './Pagination.types';\nimport styles from './Pagination.module.css';\n\nfunction range(start: number, end: number): number[] {\n  const out: number[] = [];\n  for (let page = start; page <= end; page += 1) out.push(page);\n  return out;\n}\n\n/**\n * Builds the sequence of page numbers and ellipsis gaps to render, keeping the\n * first/last boundaries and a window of siblings around the current page.\n */\nfunction getPaginationItems(\n  currentPage: number,\n  totalPages: number,\n  siblingCount: number,\n  boundaryCount: number,\n): PaginationItem[] {\n  const totalNumbers = boundaryCount * 2 + siblingCount * 2 + 3;\n  if (totalPages <= totalNumbers) return range(1, totalPages);\n\n  const startPages = range(1, boundaryCount);\n  const endPages = range(totalPages - boundaryCount + 1, totalPages);\n\n  const siblingsStart = Math.max(\n    Math.min(currentPage - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  );\n  const siblingsEnd = Math.min(\n    Math.max(currentPage + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages[0] - 2,\n  );\n\n  const items: PaginationItem[] = [...startPages];\n  items.push(siblingsStart > boundaryCount + 2 ? 'ellipsis' : boundaryCount + 1);\n  items.push(...range(siblingsStart, siblingsEnd));\n  items.push(siblingsEnd < totalPages - boundaryCount - 1 ? 'ellipsis' : totalPages - boundaryCount);\n  items.push(...endPages);\n\n  return items;\n}\n\nfunction Chevron({ direction }: { direction: 'left' | 'right' }) {\n  return (\n    <svg\n      width={ICON_SIZE.MD}\n      height={ICON_SIZE.MD}\n      viewBox={SVG_VIEWBOX}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={SVG_STROKE_WIDTH}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points={direction === 'left' ? '15 18 9 12 15 6' : '9 18 15 12 9 6'} />\n    </svg>\n  );\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      currentPage,\n      totalItems,\n      pageSize,\n      onPageChange,\n      siblingCount = PAGINATION.SIBLING_COUNT,\n      boundaryCount = PAGINATION.BOUNDARY_COUNT,\n      showPrevNext = true,\n      className,\n      'aria-label': ariaLabel = 'Pagination',\n      ...props\n    },\n    ref,\n  ) => {\n    const totalPages = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)));\n    const page = Math.min(Math.max(currentPage, 1), totalPages);\n    const items = getPaginationItems(page, totalPages, siblingCount, boundaryCount);\n\n    const goTo = (target: number) => {\n      const next = Math.min(Math.max(target, 1), totalPages);\n      if (next !== page) onPageChange(next);\n    };\n\n    return (\n      <nav ref={ref} aria-label={ariaLabel} className={clsx(styles.root, className)} {...props}>\n        <ul className={styles.list}>\n          {showPrevNext && (\n            <li>\n              <button\n                type=\"button\"\n                className={styles.arrow}\n                onClick={() => goTo(page - 1)}\n                disabled={page <= 1}\n                aria-label=\"Go to previous page\"\n              >\n                <Chevron direction=\"left\" />\n              </button>\n            </li>\n          )}\n\n          {items.map((item, index) =>\n            item === 'ellipsis' ? (\n              // eslint-disable-next-line react/no-array-index-key\n              <li key={`ellipsis-${index}`} className={styles.ellipsis} aria-hidden=\"true\">\n                &hellip;\n              </li>\n            ) : (\n              <li key={item}>\n                <button\n                  type=\"button\"\n                  className={clsx(styles.page, item === page && styles.isActive)}\n                  onClick={() => goTo(item)}\n                  aria-current={item === page ? 'page' : undefined}\n                  aria-label={`Go to page ${item}`}\n                >\n                  {item}\n                </button>\n              </li>\n            ),\n          )}\n\n          {showPrevNext && (\n            <li>\n              <button\n                type=\"button\"\n                className={styles.arrow}\n                onClick={() => goTo(page + 1)}\n                disabled={page >= totalPages}\n                aria-label=\"Go to next page\"\n              >\n                <Chevron direction=\"right\" />\n              </button>\n            </li>\n          )}\n        </ul>\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index33.js","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n  open: boolean;\n  title?: ReactNode;\n  onClose: () => void;\n  children: ReactNode;\n  footer?: ReactNode;\n  portalTarget?: HTMLElement;\n  className?: string;\n  bodyClassName?: string;\n  style?: CSSProperties;\n  closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n  open,\n  title,\n  onClose,\n  children,\n  footer,\n  portalTarget,\n  className,\n  bodyClassName,\n  style,\n  closeLabel = '\\u00D7',\n}: ModalProps) => {\n  useEscapeKey(onClose, open);\n\n  if (!open) return null;\n\n  const modalContent = (\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.root, className)} style={style}>\n        <div className={styles.header}>\n          {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={styles.closeBtn}\n            aria-label=\"Close modal\"\n          >\n            {closeLabel}\n          </button>\n        </div>\n        <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </div>\n  );\n\n  return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChB,eAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJ,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAA,qBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,QACpB,UAAA;AAAA,MAAA,QAAQ,oBAAC,QAAG,WAAW,OAAO,OAAQ,UAAA,MAAA,CAAM,wBAAS,QAAA,CAAA,CAAK;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW,OAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACA,oBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAU,oBAAC,OAAA,EAAI,WAAW,OAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAO,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;"}