fictoan-react 2.0.0-beta.17 → 2.0.0-beta.18

package/dist/components/OptionCard/OptionCard.js

@@ -0,0 +1,150 @@
+"use client";
+import { jsxs as S, Fragment as j, jsx as g } from "react/jsx-runtime";
+import E, { useContext as b, createContext as z, useState as R, useRef as B, useCallback as f } from "react";
+import { Div as K } from "../Element/Tags.js";
+import { Card as _ } from "../Card/Card.js";
+/* empty css                */
+import { Element as F } from "../Element/Element.js";
+const x = z({
+  isSelected: () => !1,
+  toggleSelection: () => {
+  },
+  showTickIcon: !1,
+  tickPosition: "top-right",
+  selectAll: () => {
+  },
+  selectNone: () => {
+  },
+  selectInverse: () => {
+  },
+  registerOption: () => {
+  },
+  unregisterOption: () => {
+  }
+}), V = E.forwardRef(
+  ({
+    children: s,
+    allowMultipleSelections: r = !1,
+    showTickIcon: o,
+    onSelectionChange: a,
+    tickPosition: p = "top-right",
+    selectionLimit: n,
+    defaultSelectedIds: m,
+    selectedIds: I,
+    ...k
+  }, C) => {
+    const u = I !== void 0, [y, O] = R(
+      m ? new Set(m) : /* @__PURE__ */ new Set()
+    ), l = B(/* @__PURE__ */ new Map()), i = u ? I : y, c = f((e) => {
+      u || O(e), a == null || a(e);
+    }, [u, a]), N = f((e, t) => {
+      l.current.set(e, t);
+    }, []), D = f((e) => {
+      l.current.delete(e);
+    }, []), d = f((e) => {
+      const t = new Set(i);
+      if (r)
+        if (t.has(e))
+          t.delete(e);
+        else {
+          if (n && t.size >= n)
+            return;
+          t.add(e);
+        }
+      else
+        t.has(e) && i.size === 1 ? t.clear() : (t.clear(), t.add(e));
+      c(t);
+    }, [i, r, n, c]), h = f(() => {
+      if (!r) return;
+      const e = Array.from(l.current.entries()).filter(([w, v]) => !v).map(([w]) => w), t = n ? e.slice(0, n) : e;
+      c(new Set(t));
+    }, [r, n, c]), T = f(() => {
+      c(/* @__PURE__ */ new Set());
+    }, [c]), A = f(() => {
+      if (!r) return;
+      const t = Array.from(l.current.entries()).filter(([v, M]) => !M).map(([v]) => v).filter((v) => !i.has(v)), w = n ? t.slice(0, n) : t;
+      c(new Set(w));
+    }, [i, r, n, c]), G = f((e) => i.has(e), [i]);
+    E.useImperativeHandle(C, () => ({
+      selectAll: h,
+      selectNone: T,
+      selectInverse: A
+    }), [h, T, A]);
+    const H = {
+      isSelected: G,
+      toggleSelection: d,
+      showTickIcon: o,
+      tickPosition: p,
+      selectAll: h,
+      selectNone: T,
+      selectInverse: A,
+      registerOption: N,
+      unregisterOption: D
+    };
+    return /* @__PURE__ */ g(x.Provider, { value: H, children: /* @__PURE__ */ g(K, { "data-option-cards-group": !0, className: `tick-${p}`, children: s }) });
+  }
+);
+V.displayName = "OptionCardsGroup";
+const W = (s) => {
+  const r = b(x);
+  return {
+    isSelected: r.isSelected(s),
+    toggleSelection: () => r.toggleSelection(s),
+    showTickIcon: r.showTickIcon
+  };
+}, X = () => {
+  const { selectAll: s, selectNone: r, selectInverse: o } = b(x);
+  return { selectAll: s, selectNone: r, selectInverse: o };
+}, Y = ({ id: s, children: r, disabled: o = !1, ...a }) => {
+  const { isSelected: p, toggleSelection: n, showTickIcon: m, registerOption: I, unregisterOption: k } = b(x), [C, u] = R(!1), [y, O] = R(!0);
+  E.useEffect(() => (I(s, o), () => k(s)), [s, o, I, k]);
+  let l = [];
+  p(s) && l.push("selected"), o && l.push("disabled"), C && l.push("show-deselect");
+  const i = () => {
+    p(s) && !y && u(!0);
+  }, c = () => {
+    u(!1), O(!1);
+  }, N = (d) => {
+    var h;
+    o || (O(!0), u(!1), n(s), (h = a.onClick) == null || h.call(a, d));
+  }, D = (d) => {
+    (d.key === "Enter" || d.key === " ") && !o && (d.preventDefault(), O(!0), u(!1), n(s));
+  };
+  return /* @__PURE__ */ S(
+    F,
+    {
+      as: _,
+      "data-option-card": !0,
+      role: "button",
+      tabIndex: o ? -1 : 0,
+      "aria-disabled": o,
+      "aria-pressed": p(s),
+      classNames: l,
+      onClick: N,
+      onKeyDown: D,
+      onMouseEnter: i,
+      onMouseLeave: c,
+      ...a,
+      children: [
+        m && /* @__PURE__ */ S(j, { children: [
+          /* @__PURE__ */ S("svg", { viewBox: "0 0 24 24", className: "tick-icon", children: [
+            /* @__PURE__ */ g("circle", { cx: "12", cy: "12", r: "11" }),
+            /* @__PURE__ */ g("path", { d: "M8 13 L11 15 L16 9" })
+          ] }),
+          /* @__PURE__ */ S("svg", { viewBox: "0 0 24 24", className: "deselect-icon", children: [
+            /* @__PURE__ */ g("circle", { cx: "12", cy: "12", r: "11" }),
+            /* @__PURE__ */ g("path", { d: "M8 8 L16 16 M16 8 L8 16" })
+          ] })
+        ] }),
+        r
+      ]
+    }
+  );
+};
+export {
+  Y as OptionCard,
+  V as OptionCardsGroup,
+  W as useOptionCard,
+  X as useOptionCardsGroup
+};
+//# sourceMappingURL=OptionCard.js.map

package/dist/components/OptionCard/OptionCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionCard.js","sources":["../../../src/components/OptionCard/OptionCard.tsx"],"sourcesContent":["// FRAMEWORK ===========================================================================================================\nimport React, { createContext, useContext, useState, ReactNode, useCallback, useRef, useEffect } from \"react\";\n\n// FICTOAN =============================================================================================================\nimport { Element } from \"$element\";\nimport { Div } from \"$tags\";\nimport { Card, CardElementType, CardProps } from \"../Card/Card\";\n\n// STYLES ==============================================================================================================\nimport \"./option-card.css\";\n\n// TYPES ===============================================================================================================\nexport type TickPosition =\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"centre-left\"\n    | \"center-left\"\n    | \"centre-right\"\n    | \"center-right\"\n    | \"centre-top\"\n    | \"center-top\"\n    | \"center-bottom\"\n    | \"centre-bottom\"\n    | \"centre\"\n    | \"center\";\n\nexport interface OptionCardsProviderProps {\n    children                  : ReactNode;\n    allowMultipleSelections ? : boolean;\n    showTickIcon            ? : boolean;\n    tickPosition            ? : TickPosition;\n    onSelectionChange       ? : (selectedIds: Set<string>) => void;\n    selectionLimit          ? : number;\n    defaultSelectedIds      ? : Set<string>;  // Uncontrolled mode - initial selection\n    selectedIds             ? : Set<string>;  // Controlled mode - external state\n}\n\nexport interface OptionCardProps extends CardProps {\n    id         : string;\n    children   : ReactNode;\n    disabled ? : boolean;\n}\n\nexport interface OptionCardsGroupRef {\n    selectAll     : () => void;\n    selectNone    : () => void;\n    selectInverse : () => void;\n}\n\ninterface OptionCardsContextType {\n    isSelected       : (id: string) => boolean;\n    toggleSelection  : (id: string) => void;\n    showTickIcon   ? : boolean;\n    tickPosition   ? : TickPosition;\n    selectAll      ? : () => void;\n    selectNone     ? : () => void;\n    selectInverse  ? : () => void;\n    registerOption   : (id: string, disabled: boolean) => void;\n    unregisterOption : (id: string) => void;\n}\n\nconst OptionCardsContext = createContext<OptionCardsContextType>({\n    isSelected       : () => false,\n    toggleSelection  : () => {},\n    showTickIcon     : false,\n    tickPosition     : \"top-right\",\n    selectAll        : () => {},\n    selectNone       : () => {},\n    selectInverse    : () => {},\n    registerOption   : () => {},\n    unregisterOption : () => {},\n});\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const OptionCardsGroup = React.forwardRef<OptionCardsGroupRef, OptionCardsProviderProps>(\n    (\n        {\n            children,\n            allowMultipleSelections = false,\n            showTickIcon,\n            onSelectionChange,\n            tickPosition = \"top-right\",\n            selectionLimit,\n            defaultSelectedIds,\n            selectedIds: selectedIdsProp,\n            ...props\n        },\n        ref\n    ) => {\n        // Determine if controlled or uncontrolled mode\n        const isControlled = selectedIdsProp !== undefined;\n\n        // Internal state for uncontrolled mode only\n        const [internalSelectedIds, setInternalSelectedIds] = useState<Set<string>>(\n            defaultSelectedIds ? new Set(defaultSelectedIds) : new Set()\n        );\n        const availableOptionsRef = useRef<Map<string, boolean>>(new Map()); // id -> disabled\n\n        // Use controlled value if provided, otherwise use internal state\n        const selectedIds = isControlled ? selectedIdsProp : internalSelectedIds;\n\n        // Wrapper to update selection - in controlled mode, just call onSelectionChange\n        const updateSelectedIds = useCallback((newIds: Set<string>) => {\n            if (!isControlled) {\n                setInternalSelectedIds(newIds);\n            }\n            onSelectionChange?.(newIds);\n        }, [isControlled, onSelectionChange]);\n\n        const registerOption = useCallback((id: string, disabled: boolean) => {\n            availableOptionsRef.current.set(id, disabled);\n        }, []);\n\n        const unregisterOption = useCallback((id: string) => {\n            availableOptionsRef.current.delete(id);\n        }, []);\n\n        // Click to toggle an option ===================================================================================\n        const toggleSelection = useCallback((id: string) => {\n            const newSelectedIds = new Set(selectedIds);\n            if (allowMultipleSelections) {\n                if (newSelectedIds.has(id)) {\n                    newSelectedIds.delete(id);\n                } else {\n                    if (selectionLimit && newSelectedIds.size >= selectionLimit) {\n                        return;\n                    }\n                    newSelectedIds.add(id);\n                }\n            } else {\n                if (newSelectedIds.has(id) && selectedIds.size === 1) {\n                    newSelectedIds.clear();\n                } else {\n                    newSelectedIds.clear();\n                    newSelectedIds.add(id);\n                }\n            }\n            updateSelectedIds(newSelectedIds);\n        }, [selectedIds, allowMultipleSelections, selectionLimit, updateSelectedIds]);\n\n        // Select all available options ================================================================================\n        const selectAll = useCallback(() => {\n            if (!allowMultipleSelections) return;\n\n            // Get all enabled options\n            const enabledOptions = Array.from(availableOptionsRef.current.entries())\n                .filter(([_, disabled]) => !disabled)\n                .map(([id]) => id);\n\n            // Respect selection limit if set\n            const optionsToSelect = selectionLimit\n                ? enabledOptions.slice(0, selectionLimit)\n                : enabledOptions;\n\n            updateSelectedIds(new Set(optionsToSelect));\n        }, [allowMultipleSelections, selectionLimit, updateSelectedIds]);\n\n        // De-select all options =======================================================================================\n        const selectNone = useCallback(() => {\n            updateSelectedIds(new Set());\n        }, [updateSelectedIds]);\n\n        // Invert selection ============================================================================================\n        const selectInverse = useCallback(() => {\n            if (!allowMultipleSelections) return;\n\n            // Get all enabled options\n            const enabledOptions = Array.from(availableOptionsRef.current.entries())\n                .filter(([_, disabled]) => !disabled)\n                .map(([id]) => id);\n\n            // Select options that are not currently selected\n            const invertedSelection = enabledOptions.filter(id => !selectedIds.has(id));\n\n            // Respect selection limit if set\n            const optionsToSelect = selectionLimit\n                ? invertedSelection.slice(0, selectionLimit)\n                : invertedSelection;\n\n            updateSelectedIds(new Set(optionsToSelect));\n        }, [selectedIds, allowMultipleSelections, selectionLimit, updateSelectedIds]);\n\n        const isSelected = useCallback((id: string) => {\n            return selectedIds.has(id);\n        }, [selectedIds]);\n\n        // Expose methods via ref\n        React.useImperativeHandle(ref, () => ({\n            selectAll,\n            selectNone,\n            selectInverse,\n        }), [selectAll, selectNone, selectInverse]);\n\n        const contextValue = {\n            isSelected,\n            toggleSelection,\n            showTickIcon,\n            tickPosition,\n            selectAll,\n            selectNone,\n            selectInverse,\n            registerOption,\n            unregisterOption,\n        };\n\n        return (\n            <OptionCardsContext.Provider value={contextValue}>\n                <Div data-option-cards-group className={`tick-${tickPosition}`}>\n                    {children}\n                </Div>\n            </OptionCardsContext.Provider>\n        );\n    }\n);\nOptionCardsGroup.displayName = \"OptionCardsGroup\";\n\nexport const useOptionCard = (id: string) => {\n    const context = useContext(OptionCardsContext);\n    return {\n        isSelected      : context.isSelected(id),\n        toggleSelection : () => context.toggleSelection(id),\n        showTickIcon    : context.showTickIcon,\n    };\n};\n\nexport const useOptionCardsGroup = () => {\n    const { selectAll, selectNone, selectInverse } = useContext(OptionCardsContext);\n    return { selectAll, selectNone, selectInverse };\n};\n\nexport const OptionCard: React.FC<OptionCardProps> = ({ id, children, disabled = false, ...props }) => {\n    const { isSelected, toggleSelection, showTickIcon, registerOption, unregisterOption } = useContext(OptionCardsContext);\n    const [showDeselect, setShowDeselect] = useState(false);\n    const [isInitialHover, setIsInitialHover] = useState(true);\n\n    // Register/unregister this option\n    React.useEffect(() => {\n        registerOption(id, disabled);\n        return () => unregisterOption(id);\n    }, [id, disabled, registerOption, unregisterOption]);\n\n    let classNames = [];\n\n    if (isSelected(id)) {\n        classNames.push(\"selected\");\n    }\n\n    if (disabled) {\n        classNames.push(\"disabled\");\n    }\n\n    if (showDeselect) {\n        classNames.push(\"show-deselect\");\n    }\n\n    const handleMouseEnter = () => {\n        if (isSelected(id) && !isInitialHover) {\n            setShowDeselect(true);\n        }\n    };\n\n    const handleMouseLeave = () => {\n        setShowDeselect(false);\n        setIsInitialHover(false);\n    };\n\n    const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n        if (!disabled) {\n            setIsInitialHover(true);\n            setShowDeselect(false);\n            toggleSelection(id);\n            props.onClick?.(e);\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n        if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n            e.preventDefault();\n            setIsInitialHover(true);\n            setShowDeselect(false);\n            toggleSelection(id);\n        }\n    };\n\n    return (\n        <Element<CardElementType>\n            as={Card}\n            data-option-card\n            role=\"button\"\n            tabIndex={disabled ? -1 : 0}\n            aria-disabled={disabled}\n            aria-pressed={isSelected(id)}\n            classNames={classNames}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            {...props}\n        >\n            {showTickIcon && (\n                <>\n                    <svg viewBox=\"0 0 24 24\" className=\"tick-icon\">\n                        <circle cx=\"12\" cy=\"12\" r=\"11\" />\n                        <path d=\"M8 13 L11 15 L16 9\" />\n                    </svg>\n\n                    <svg viewBox=\"0 0 24 24\" className=\"deselect-icon\">\n                        <circle cx=\"12\" cy=\"12\" r=\"11\" />\n                        <path d=\"M8 8 L16 16 M16 8 L8 16\" />\n                    </svg>\n                </>\n            )}\n            {children}\n        </Element>\n    );\n};\n"],"names":["OptionCardsContext","createContext","OptionCardsGroup","React","children","allowMultipleSelections","showTickIcon","onSelectionChange","tickPosition","selectionLimit","defaultSelectedIds","selectedIdsProp","props","ref","isControlled","internalSelectedIds","setInternalSelectedIds","useState","availableOptionsRef","useRef","selectedIds","updateSelectedIds","useCallback","newIds","registerOption","id","disabled","unregisterOption","toggleSelection","newSelectedIds","selectAll","enabledOptions","_","optionsToSelect","selectNone","selectInverse","invertedSelection","isSelected","contextValue","jsx","Div","useOptionCard","context","useContext","useOptionCardsGroup","OptionCard","showDeselect","setShowDeselect","isInitialHover","setIsInitialHover","classNames","handleMouseEnter","handleMouseLeave","handleClick","e","_a","handleKeyDown","jsxs","Element","Card","Fragment"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,kBAAkB,CAAC;AAoF1B,eAAO,MAAM,UAAU,2OAsKtB,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,kBAAkB,CAAC;AA4F1B,eAAO,MAAM,UAAU,2OAsKtB,CAAC"}

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,206 @@
+"use client";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import B from "react";
+import { Div as x } from "../Element/Tags.js";
+/* empty css               */
+import { Button as F } from "../Button/Button.js";
+import { Spinner as H } from "../Spinner/Spinner.js";
+import { Text as h } from "../Typography/Text.js";
+import { usePagination as J } from "./usePagination.js";
+import { Element as L } from "../Element/Element.js";
+const M = ({
+  type: n,
+  page: s,
+  selected: o,
+  disabled: c,
+  onClick: f,
+  key: w,
+  ...v
+}) => {
+  if (n === "ellipsis")
+    return /* @__PURE__ */ e(h, { className: "pagination-ellipsis", children: "..." });
+  const d = {
+    first: "Go to first page",
+    previous: "Go to previous page",
+    next: "Go to next page",
+    last: "Go to last page"
+  }, k = {
+    type: "button",
+    className: `pagination-item ${o ? "selected" : ""} ${c ? "disabled" : ""}`,
+    onClick: f,
+    disabled: c,
+    ...d[n] ? { "aria-label": d[n] } : {},
+    ...v
+  };
+  let i;
+  switch (n) {
+    case "first":
+      i = i = /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ e("line", { x1: "5", y1: "18", x2: "5", y2: "6" }),
+        /* @__PURE__ */ e("polyline", { points: "14 18 9 12 14 6" }),
+        /* @__PURE__ */ e("line", { x1: "10", y1: "12", x2: "19", y2: "12" })
+      ] });
+      break;
+    case "previous":
+      i = /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ e("polyline", { points: "12 18 7 12 12 6" }),
+        /* @__PURE__ */ e("line", { x1: "8", y1: "12", x2: "17", y2: "12" })
+      ] });
+      break;
+    case "next":
+      i = i = /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ e("polyline", { points: "12 6 17 12 12 18" }),
+        /* @__PURE__ */ e("line", { x1: "16", y1: "12", x2: "7", y2: "12" })
+      ] });
+      break;
+    case "last":
+      i = i = /* @__PURE__ */ t("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ e("polyline", { points: "10 6 15 12 10 18" }),
+        /* @__PURE__ */ e("line", { x1: "19", y1: "6", x2: "19", y2: "18" }),
+        /* @__PURE__ */ e("line", { x1: "14", y1: "12", x2: "5", y2: "12" })
+      ] });
+      break;
+    default:
+      i = s;
+  }
+  return /* @__PURE__ */ e(
+    F,
+    {
+      kind: "custom",
+      ...k,
+      children: i
+    }
+  );
+}, O = B.forwardRef(
+  ({
+    totalItems: n,
+    currentPage: s,
+    onPageChange: o,
+    itemsToShowEachSide: c = 1,
+    kind: f = "plain",
+    showGoToFirstItemButton: w = !0,
+    showGoToLastItemButton: v = !0,
+    showPreviousButton: d = !0,
+    showNextButton: k = !0,
+    showGoToInput: i = !1,
+    disabled: l = !1,
+    hideDisabledButtons: u = !1,
+    renderItem: p = M,
+    isLoading: G = !1,
+    loadingText: P,
+    emptyText: R,
+    itemDisplayText: N = "Page",
+    ...j
+  }, z) => {
+    const {
+      items: C,
+      totalPages: b,
+      rangeStart: E,
+      hasPrevPage: y,
+      hasNextPage: g
+    } = J({
+      totalItems: n,
+      currentPage: s,
+      itemsToShowEachSide: c
+    }), [$, S] = B.useState(""), K = (a) => {
+      S(a.target.value);
+    }, q = (a) => {
+      if (a.key === "Enter") {
+        const r = parseInt($);
+        !isNaN(r) && r >= 1 && r <= b && (o(r), S(""));
+      }
+    };
+    if (n === 0)
+      return /* @__PURE__ */ e(h, { className: "pagination-empty", children: R || "No items to display" });
+    let m = ["pagination"];
+    return f && m.push(f), l && m.push("disabled"), G && m.push("loading"), /* @__PURE__ */ t(
+      L,
+      {
+        as: "nav",
+        "data-pagination": !0,
+        ref: z,
+        classNames: m,
+        role: "navigation",
+        "aria-label": "pagination",
+        ...j,
+        children: [
+          /* @__PURE__ */ t(x, { className: "pagination-controls", children: [
+            w && (!u || y) && p({
+              type: "first",
+              disabled: !y || l,
+              selected: !1,
+              onClick: () => o(1)
+            }),
+            d && (!u || y) && p({
+              type: "previous",
+              disabled: !y || l,
+              selected: !1,
+              onClick: () => o(s - 1)
+            }),
+            C.map((a, r) => {
+              const A = a === "..." ? {
+                key: `ellipsis-${r}`,
+                type: "ellipsis",
+                selected: !1,
+                disabled: !0
+              } : {
+                key: a.toString(),
+                type: "page",
+                page: a,
+                selected: a === s,
+                disabled: l,
+                "aria-current": a === s ? "page" : void 0,
+                onClick: () => o(a)
+              };
+              return p(A);
+            }),
+            k && (!u || g) && p({
+              type: "next",
+              disabled: !g || l,
+              selected: !1,
+              onClick: () => o(s + 1)
+            }),
+            v && (!u || g) && p({
+              type: "last",
+              disabled: !g || l,
+              selected: !1,
+              onClick: () => o(b)
+            }),
+            G && /* @__PURE__ */ t(x, { className: "pagination-loading", children: [
+              /* @__PURE__ */ e(H, {}),
+              P && /* @__PURE__ */ e(h, { size: "small", children: P })
+            ] })
+          ] }),
+          /* @__PURE__ */ t(x, { className: "pagination-info", children: [
+            /* @__PURE__ */ t(h, { size: "tiny", children: [
+              N,
+              " ",
+              E,
+              " of ",
+              n
+            ] }),
+            i && /* @__PURE__ */ e(x, { className: "pagination-go-to", children: /* @__PURE__ */ e(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: b,
+                value: $,
+                onChange: K,
+                onKeyDown: q,
+                placeholder: `Go to ${N}`,
+                "aria-label": `Go to ${N}`,
+                disabled: l
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+O.displayName = "Pagination";
+export {
+  O as Pagination
+};
+//# sourceMappingURL=Pagination.js.map

package/dist/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Div } from \"../Element/Tags\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./pagination.css\";\n\n// OTHER ===============================================================================================================\nimport { Button } from \"../Button/Button\";\nimport { PaginationProps, PaginationElementType, RenderItemProps } from \"./constants\";\nimport { Spinner } from \"../Spinner/Spinner\";\nimport { Text } from \"../Typography/Text\";\nimport { usePagination } from \"./usePagination\";\n\nconst defaultRenderItem = (\n    {\n        type,\n        page,\n        selected,\n        disabled,\n        onClick,\n        key,\n        ...props\n    }: RenderItemProps) => {\n    if (type === \"ellipsis\") {\n        return (\n            <Text className=\"pagination-ellipsis\">...</Text>\n        );\n    }\n\n    const iconButtonLabels: Record<string, string> = {\n        first    : \"Go to first page\",\n        previous : \"Go to previous page\",\n        next     : \"Go to next page\",\n        last     : \"Go to last page\",\n    };\n\n    const paginationItemProps = {\n        type      : \"button\",\n        className : `pagination-item ${selected ? \"selected\" : \"\"} ${disabled ? \"disabled\" : \"\"}`,\n        onClick,\n        disabled,\n        ...(iconButtonLabels[type] ? { \"aria-label\" : iconButtonLabels[type] } : {}),\n        ...props,\n    };\n\n    let content;\n    switch (type) {\n        case \"first\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <line x1=\"5\" y1=\"18\" x2=\"5\" y2=\"6\" />\n                    <polyline points=\"14 18 9 12 14 6\" />\n                    <line x1=\"10\" y1=\"12\" x2=\"19\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"previous\":\n            content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"12 18 7 12 12 6\" />\n                    <line x1=\"8\" y1=\"12\" x2=\"17\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"next\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"12 6 17 12 12 18\" />\n                    <line x1=\"16\" y1=\"12\" x2=\"7\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"last\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"10 6 15 12 10 18\" />\n                    <line x1=\"19\" y1=\"6\" x2=\"19\" y2=\"18\" />\n                    <line x1=\"14\" y1=\"12\" x2=\"5\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        default:\n            content = page;\n    }\n\n    return (\n        <Button\n            kind=\"custom\"\n            {...paginationItemProps}\n        >\n            {content}\n        </Button>\n    );\n};\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Pagination = React.forwardRef(\n    (\n        {\n            totalItems,\n            currentPage,\n            onPageChange,\n            itemsToShowEachSide = 1,\n            kind = \"plain\",\n            showGoToFirstItemButton = true,\n            showGoToLastItemButton = true,\n            showPreviousButton = true,\n            showNextButton = true,\n            showGoToInput = false,\n            disabled = false,\n            hideDisabledButtons = false,\n            renderItem = defaultRenderItem,\n            isLoading = false,\n            loadingText,\n            emptyText,\n            itemDisplayText = \"Page\",\n            ...props\n        }: PaginationProps, ref: React.Ref<PaginationElementType>) => {\n        const {\n                  items,\n                  totalPages,\n                  rangeStart,\n                  rangeEnd,\n                  hasPrevPage,\n                  hasNextPage,\n              } = usePagination({\n            totalItems,\n            currentPage,\n            itemsToShowEachSide,\n        });\n\n        const [ goToPage, setGoToPage ] = React.useState(\"\");\n\n        const handlePageInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n            setGoToPage(e.target.value);\n        };\n\n        const handlePageInputKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n            if (e.key === \"Enter\") {\n                const page = parseInt(goToPage);\n                if (!isNaN(page) && page >= 1 && page <= totalPages) {\n                    onPageChange(page);\n                    setGoToPage(\"\");\n                }\n            }\n        };\n\n        if (totalItems === 0) {\n            return <Text className=\"pagination-empty\">{emptyText || \"No items to display\"}</Text>;\n        }\n\n        let classNames = [ \"pagination\" ];\n\n        if (kind) {\n            classNames.push(kind);\n        }\n\n        if (disabled) {\n            classNames.push(\"disabled\");\n        }\n\n        if (isLoading) {\n            classNames.push(\"loading\");\n        }\n\n        return (\n            <Element<PaginationElementType>\n                as=\"nav\"\n                data-pagination\n                ref={ref}\n                classNames={classNames}\n                role=\"navigation\"\n                aria-label=\"pagination\"\n                {...props}\n            >\n                <Div className=\"pagination-controls\">\n                    {/* GO TO FIRST ITEM */}\n                    {showGoToFirstItemButton && (!hideDisabledButtons || hasPrevPage) && renderItem({\n                        type     : \"first\",\n                        disabled : !hasPrevPage || disabled,\n                        selected : false,\n                        onClick  : () => onPageChange(1),\n                    })}\n\n                    {/* GO TO PREVIOUS ITEM */}\n                    {showPreviousButton && (!hideDisabledButtons || hasPrevPage) && renderItem({\n                        type     : \"previous\",\n                        disabled : !hasPrevPage || disabled,\n                        selected : false,\n                        onClick  : () => onPageChange(currentPage - 1),\n                    })}\n\n                    {/* SHOW PAGE ITEM OR ELLIPSIS */}\n                    {items.map((item, index) => {\n                        const itemProps: RenderItemProps = item === \"...\"\n                            ? {\n                                key      : `ellipsis-${index}`,\n                                type     : \"ellipsis\",\n                                selected : false,\n                                disabled : true,\n                            }\n                            : {\n                                key            : item.toString(),\n                                type           : \"page\",\n                                page           : item as number,\n                                selected       : item === currentPage,\n                                disabled       : disabled,\n                                \"aria-current\" : item === currentPage ? \"page\" : undefined,\n                                onClick        : () => onPageChange(item as number),\n                            };\n\n                        return renderItem(itemProps);\n                    })}\n\n                    {/* GO TO NEXT ITEM */}\n                    {showNextButton && (!hideDisabledButtons || hasNextPage) && renderItem({\n                        type     : \"next\",\n                        disabled : !hasNextPage || disabled,\n                        selected : false,\n                        onClick  : () => onPageChange(currentPage + 1),\n                    })}\n\n                    {/* GO TO LAST ITEM */}\n                    {showGoToLastItemButton && (!hideDisabledButtons || hasNextPage) && renderItem({\n                        type     : \"last\",\n                        disabled : !hasNextPage || disabled,\n                        selected : false,\n                        onClick  : () => onPageChange(totalPages),\n                    })}\n\n                    {isLoading && (\n                        <Div className=\"pagination-loading\">\n                            <Spinner />\n                            {loadingText && <Text size=\"small\">{loadingText}</Text>}\n                        </Div>\n                    )}\n                </Div>\n\n                <Div className=\"pagination-info\">\n                    <Text size=\"tiny\">\n                        {itemDisplayText} {rangeStart} of {totalItems}\n                    </Text>\n\n                    {showGoToInput && (\n                        <Div className=\"pagination-go-to\">\n                            <input\n                                type=\"number\"\n                                min={1}\n                                max={totalPages}\n                                value={goToPage}\n                                onChange={handlePageInputChange}\n                                onKeyDown={handlePageInputKeyPress}\n                                placeholder={`Go to ${itemDisplayText}`}\n                                aria-label={`Go to ${itemDisplayText}`}\n                                disabled={disabled}\n                            />\n                        </Div>\n                    )}\n                </Div>\n            </Element>\n        );\n    },\n);\nPagination.displayName = \"Pagination\";\n"],"names":["defaultRenderItem","type","page","selected","disabled","onClick","key","props","jsx","Text","iconButtonLabels","paginationItemProps","content","jsxs","Button","Pagination","React","totalItems","currentPage","onPageChange","itemsToShowEachSide","kind","showGoToFirstItemButton","showGoToLastItemButton","showPreviousButton","showNextButton","showGoToInput","hideDisabledButtons","renderItem","isLoading","loadingText","emptyText","itemDisplayText","ref","items","totalPages","rangeStart","hasPrevPage","hasNextPage","usePagination","goToPage","setGoToPage","handlePageInputChange","e","handlePageInputKeyPress","classNames","Element","Div","item","index","itemProps","Spinner"],"mappings":";;;;;;;;;AAiBA,MAAMA,IAAoB,CACtB;AAAA,EACI,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAuB;AACvB,MAAIN,MAAS;AACT,WACI,gBAAAO,EAACC,GAAA,EAAK,WAAU,uBAAsB,UAAA,OAAG;AAIjD,QAAMC,IAA2C;AAAA,IAC7C,OAAW;AAAA,IACX,UAAW;AAAA,IACX,MAAW;AAAA,IACX,MAAW;AAAA,EAAA,GAGTC,IAAsB;AAAA,IACxB,MAAY;AAAA,IACZ,WAAY,mBAAmBR,IAAW,aAAa,EAAE,IAAIC,IAAW,aAAa,EAAE;AAAA,IACvF,SAAAC;AAAA,IACA,UAAAD;AAAA,IACA,GAAIM,EAAiBT,CAAI,IAAI,EAAE,cAAeS,EAAiBT,CAAI,EAAA,IAAM,CAAA;AAAA,IACzE,GAAGM;AAAA,EAAA;AAGP,MAAIK;AACJ,UAAQX,GAAA;AAAA,IACJ,KAAK;AACD,MAAAW,IAAUA,IACN,gBAAAC,EAAC,OAAA,EAAI,SAAQ,aAAY,eAAY,QACjC,UAAA;AAAA,QAAA,gBAAAL,EAAC,QAAA,EAAK,IAAG,KAAI,IAAG,MAAK,IAAG,KAAI,IAAG,IAAA,CAAI;AAAA,QACnC,gBAAAA,EAAC,YAAA,EAAS,QAAO,kBAAA,CAAkB;AAAA,QACnC,gBAAAA,EAAC,UAAK,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,MAAA,GAC1C;AAEJ;AAAA,IACJ,KAAK;AACD,MAAAI,IACI,gBAAAC,EAAC,OAAA,EAAI,SAAQ,aAAY,eAAY,QACjC,UAAA;AAAA,QAAA,gBAAAL,EAAC,YAAA,EAAS,QAAO,kBAAA,CAAkB;AAAA,QACnC,gBAAAA,EAAC,UAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,MAAA,GACzC;AAEJ;AAAA,IACJ,KAAK;AACD,MAAAI,IAAUA,IACN,gBAAAC,EAAC,OAAA,EAAI,SAAQ,aAAY,eAAY,QACjC,UAAA;AAAA,QAAA,gBAAAL,EAAC,YAAA,EAAS,QAAO,mBAAA,CAAmB;AAAA,QACpC,gBAAAA,EAAC,UAAK,IAAG,MAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAA,CAAK;AAAA,MAAA,GACzC;AAEJ;AAAA,IACJ,KAAK;AACD,MAAAI,IAAUA,IACN,gBAAAC,EAAC,OAAA,EAAI,SAAQ,aAAY,eAAY,QACjC,UAAA;AAAA,QAAA,gBAAAL,EAAC,YAAA,EAAS,QAAO,mBAAA,CAAmB;AAAA,QACpC,gBAAAA,EAAC,UAAK,IAAG,MAAK,IAAG,KAAI,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,QACrC,gBAAAA,EAAC,UAAK,IAAG,MAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAA,CAAK;AAAA,MAAA,GACzC;AAEJ;AAAA,IACJ;AACI,MAAAI,IAAUV;AAAA,EAAA;AAGlB,SACI,gBAAAM;AAAA,IAACM;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACJ,GAAGH;AAAA,MAEH,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGb,GAGaG,IAAaC,EAAM;AAAA,EAC5B,CACI;AAAA,IACI,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,MAAAC,IAAO;AAAA,IACP,yBAAAC,IAA0B;AAAA,IAC1B,wBAAAC,IAAyB;AAAA,IACzB,oBAAAC,IAAqB;AAAA,IACrB,gBAAAC,IAAiB;AAAA,IACjB,eAAAC,IAAgB;AAAA,IAChB,UAAAtB,IAAW;AAAA,IACX,qBAAAuB,IAAsB;AAAA,IACtB,YAAAC,IAAa5B;AAAA,IACb,WAAA6B,IAAY;AAAA,IACZ,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,GAAGzB;AAAA,EAAA,GACa0B,MAA0C;AAC9D,UAAM;AAAA,MACI,OAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MAEA,aAAAC;AAAA,MACA,aAAAC;AAAA,IAAA,IACAC,EAAc;AAAA,MACpB,YAAAtB;AAAA,MACA,aAAAC;AAAA,MACA,qBAAAE;AAAA,IAAA,CACH,GAEK,CAAEoB,GAAUC,CAAY,IAAIzB,EAAM,SAAS,EAAE,GAE7C0B,IAAwB,CAACC,MAA2C;AACtE,MAAAF,EAAYE,EAAE,OAAO,KAAK;AAAA,IAC9B,GAEMC,IAA0B,CAACD,MAA6C;AAC1E,UAAIA,EAAE,QAAQ,SAAS;AACnB,cAAMzC,IAAO,SAASsC,CAAQ;AAC9B,QAAI,CAAC,MAAMtC,CAAI,KAAKA,KAAQ,KAAKA,KAAQiC,MACrChB,EAAajB,CAAI,GACjBuC,EAAY,EAAE;AAAA,MAEtB;AAAA,IACJ;AAEA,QAAIxB,MAAe;AACf,aAAO,gBAAAT,EAACC,GAAA,EAAK,WAAU,oBAAoB,eAAa,uBAAsB;AAGlF,QAAIoC,IAAa,CAAE,YAAa;AAEhC,WAAIxB,KACAwB,EAAW,KAAKxB,CAAI,GAGpBjB,KACAyC,EAAW,KAAK,UAAU,GAG1BhB,KACAgB,EAAW,KAAK,SAAS,GAIzB,gBAAAhC;AAAA,MAACiC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,mBAAe;AAAA,QACf,KAAAb;AAAA,QACA,YAAAY;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACV,GAAGtC;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAM,EAACkC,GAAA,EAAI,WAAU,uBAEV,UAAA;AAAA,YAAAzB,MAA4B,CAACK,KAAuBU,MAAgBT,EAAW;AAAA,cAC5E,MAAW;AAAA,cACX,UAAW,CAACS,KAAejC;AAAA,cAC3B,UAAW;AAAA,cACX,SAAW,MAAMe,EAAa,CAAC;AAAA,YAAA,CAClC;AAAA,YAGAK,MAAuB,CAACG,KAAuBU,MAAgBT,EAAW;AAAA,cACvE,MAAW;AAAA,cACX,UAAW,CAACS,KAAejC;AAAA,cAC3B,UAAW;AAAA,cACX,SAAW,MAAMe,EAAaD,IAAc,CAAC;AAAA,YAAA,CAChD;AAAA,YAGAgB,EAAM,IAAI,CAACc,GAAMC,MAAU;AACxB,oBAAMC,IAA6BF,MAAS,QACtC;AAAA,gBACE,KAAW,YAAYC,CAAK;AAAA,gBAC5B,MAAW;AAAA,gBACX,UAAW;AAAA,gBACX,UAAW;AAAA,cAAA,IAEb;AAAA,gBACE,KAAiBD,EAAK,SAAA;AAAA,gBACtB,MAAiB;AAAA,gBACjB,MAAiBA;AAAA,gBACjB,UAAiBA,MAAS9B;AAAA,gBAC1B,UAAAd;AAAA,gBACA,gBAAiB4C,MAAS9B,IAAc,SAAS;AAAA,gBACjD,SAAiB,MAAMC,EAAa6B,CAAc;AAAA,cAAA;AAG1D,qBAAOpB,EAAWsB,CAAS;AAAA,YAC/B,CAAC;AAAA,YAGAzB,MAAmB,CAACE,KAAuBW,MAAgBV,EAAW;AAAA,cACnE,MAAW;AAAA,cACX,UAAW,CAACU,KAAelC;AAAA,cAC3B,UAAW;AAAA,cACX,SAAW,MAAMe,EAAaD,IAAc,CAAC;AAAA,YAAA,CAChD;AAAA,YAGAK,MAA2B,CAACI,KAAuBW,MAAgBV,EAAW;AAAA,cAC3E,MAAW;AAAA,cACX,UAAW,CAACU,KAAelC;AAAA,cAC3B,UAAW;AAAA,cACX,SAAW,MAAMe,EAAagB,CAAU;AAAA,YAAA,CAC3C;AAAA,YAEAN,KACG,gBAAAhB,EAACkC,GAAA,EAAI,WAAU,sBACX,UAAA;AAAA,cAAA,gBAAAvC,EAAC2C,GAAA,EAAQ;AAAA,cACRrB,KAAe,gBAAAtB,EAACC,GAAA,EAAK,MAAK,SAAS,UAAAqB,EAAA,CAAY;AAAA,YAAA,EAAA,CACpD;AAAA,UAAA,GAER;AAAA,UAEA,gBAAAjB,EAACkC,GAAA,EAAI,WAAU,mBACX,UAAA;AAAA,YAAA,gBAAAlC,EAACJ,GAAA,EAAK,MAAK,QACN,UAAA;AAAA,cAAAuB;AAAA,cAAgB;AAAA,cAAEI;AAAA,cAAW;AAAA,cAAKnB;AAAA,YAAA,GACvC;AAAA,YAECS,KACG,gBAAAlB,EAACuC,GAAA,EAAI,WAAU,oBACX,UAAA,gBAAAvC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,MAAK;AAAA,gBACL,KAAK;AAAA,gBACL,KAAK2B;AAAA,gBACL,OAAOK;AAAA,gBACP,UAAUE;AAAA,gBACV,WAAWE;AAAA,gBACX,aAAa,SAASZ,CAAe;AAAA,gBACrC,cAAY,SAASA,CAAe;AAAA,gBACpC,UAAA5B;AAAA,cAAA;AAAA,YAAA,EACJ,CACJ;AAAA,UAAA,EAAA,CAER;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AACAW,EAAW,cAAc;"}

package/dist/components/Pagination/usePagination.js

@@ -0,0 +1,35 @@
+"use client";
+const f = (m, s) => {
+  const n = s - m + 1;
+  return Array.from({ length: n }, (t, o) => m + o);
+}, b = ({
+  totalItems: m,
+  currentPage: s,
+  itemsToShowEachSide: n
+}) => {
+  const t = m;
+  return {
+    items: (() => {
+      const i = n * 2 + 1;
+      let a = [];
+      if (t <= i)
+        a = f(1, t);
+      else {
+        const l = Math.min(s - 1, n), h = Math.min(t - s, n);
+        a.push(1), s - n > 2 && a.push("...");
+        const N = Math.max(2, s - l), p = Math.min(t - 1, s + h);
+        a.push(...f(N, p)), t - s > n + 1 && a.push("..."), p < t && a.push(t);
+      }
+      return a;
+    })(),
+    totalPages: t,
+    rangeStart: s,
+    rangeEnd: s,
+    hasPrevPage: s > 1,
+    hasNextPage: s < t
+  };
+};
+export {
+  b as usePagination
+};
+//# sourceMappingURL=usePagination.js.map

package/dist/components/Pagination/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.js","sources":["../../../src/components/Pagination/usePagination.ts"],"sourcesContent":["const range = (start: number, end: number) => {\n    const length = end - start + 1;\n    return Array.from({ length }, (_, i) => start + i);\n};\n\ninterface UsePaginationProps {\n    totalItems          : number;\n    currentPage         : number;\n    itemsToShowEachSide : number;\n}\n\ninterface UsePaginationResult {\n    items: (number | string)[];\n    totalPages: number;\n    rangeStart: number;\n    rangeEnd: number;\n    hasPrevPage: boolean;\n    hasNextPage: boolean;\n}\n\nexport const usePagination = (\n    {\n        totalItems,\n        currentPage,\n        itemsToShowEachSide,\n    }: UsePaginationProps): UsePaginationResult => {\n    const totalPages = totalItems; // Each item gets its own page\n\n    const items = (() => {\n        const totalNumbers = itemsToShowEachSide * 2 + 1;\n        let pageNumbers: (number | string)[] = [];\n\n        if (totalPages <= totalNumbers) {\n            // If we have fewer pages than the desired display count, show all pages\n            pageNumbers = range(1, totalPages);\n        } else {\n            const leftSideNumbers = Math.min(currentPage - 1, itemsToShowEachSide);\n            const rightSideNumbers = Math.min(totalPages - currentPage, itemsToShowEachSide);\n\n            // Always show first page\n            pageNumbers.push(1);\n\n            // Add ellipsis after first page if needed\n            if (currentPage - itemsToShowEachSide > 2) {\n                pageNumbers.push(\"...\");\n            }\n\n            // Add pages around current page\n            const rangeStart = Math.max(2, currentPage - leftSideNumbers);\n            const rangeEnd = Math.min(totalPages - 1, currentPage + rightSideNumbers);\n            pageNumbers.push(...range(rangeStart, rangeEnd));\n\n            // Add ellipsis before last page if needed\n            if (totalPages - currentPage > itemsToShowEachSide + 1) {\n                pageNumbers.push(\"...\");\n            }\n\n            // Always show last page if we're not already at it\n            if (rangeEnd < totalPages) {\n                pageNumbers.push(totalPages);\n            }\n        }\n\n        return pageNumbers;\n    })();\n\n    return {\n        items,\n        totalPages,\n        rangeStart: currentPage,\n        rangeEnd: currentPage,\n        hasPrevPage: currentPage > 1,\n        hasNextPage: currentPage < totalPages,\n    };\n};\n"],"names":["range","start","end","length","_","i","usePagination","totalItems","currentPage","itemsToShowEachSide","totalPages","totalNumbers","pageNumbers","leftSideNumbers","rightSideNumbers","rangeStart","rangeEnd"],"mappings":"AAAA,MAAMA,IAAQ,CAACC,GAAeC,MAAgB;AAC1C,QAAMC,IAASD,IAAMD,IAAQ;AAC7B,SAAO,MAAM,KAAK,EAAE,QAAAE,EAAA,GAAU,CAACC,GAAGC,MAAMJ,IAAQI,CAAC;AACrD,GAiBaC,IAAgB,CACzB;AAAA,EACI,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,qBAAAC;AACJ,MAA+C;AAC/C,QAAMC,IAAaH;AAwCnB,SAAO;AAAA,IACH,QAvCW,MAAM;AACjB,YAAMI,IAAeF,IAAsB,IAAI;AAC/C,UAAIG,IAAmC,CAAA;AAEvC,UAAIF,KAAcC;AAEd,QAAAC,IAAcZ,EAAM,GAAGU,CAAU;AAAA,WAC9B;AACH,cAAMG,IAAkB,KAAK,IAAIL,IAAc,GAAGC,CAAmB,GAC/DK,IAAmB,KAAK,IAAIJ,IAAaF,GAAaC,CAAmB;AAG/E,QAAAG,EAAY,KAAK,CAAC,GAGdJ,IAAcC,IAAsB,KACpCG,EAAY,KAAK,KAAK;AAI1B,cAAMG,IAAa,KAAK,IAAI,GAAGP,IAAcK,CAAe,GACtDG,IAAW,KAAK,IAAIN,IAAa,GAAGF,IAAcM,CAAgB;AACxE,QAAAF,EAAY,KAAK,GAAGZ,EAAMe,GAAYC,CAAQ,CAAC,GAG3CN,IAAaF,IAAcC,IAAsB,KACjDG,EAAY,KAAK,KAAK,GAItBI,IAAWN,KACXE,EAAY,KAAKF,CAAU;AAAA,MAEnC;AAEA,aAAOE;AAAA,IACX,GAAA;AAAA,IAII,YAAAF;AAAA,IACA,YAAYF;AAAA,IACZ,UAAUA;AAAA,IACV,aAAaA,IAAc;AAAA,IAC3B,aAAaA,IAAcE;AAAA,EAAA;AAEnC;"}

package/dist/components/Portion/Portion.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import l from "react";
+/* empty css            */
+import { Element as $ } from "../Element/Element.js";
+const p = l.forwardRef(
+  ({
+    desktopSpan: r,
+    mobileSpan: i,
+    tabletLandscapeSpan: f,
+    tabletPortraitSpan: s,
+    isHorizontal: m,
+    role: h,
+    ...t
+  }, u) => {
+    let o = [];
+    return r || f || s || i ? (r && o.push(`${r}`), f && o.push(`${f}-on-tablet-landscape`), s && o.push(`${s}-on-tablet-portrait`), i && o.push(`${i}-on-mobile`)) : o.push("whole"), m && o.push("horizontal"), /* @__PURE__ */ e(
+      $,
+      {
+        as: "div",
+        "data-portion": !0,
+        ref: u,
+        classNames: o,
+        role: h,
+        ...t
+      }
+    );
+  }
+);
+p.displayName = "Portion";
+export {
+  p as Portion
+};
+//# sourceMappingURL=Portion.js.map

package/dist/components/Portion/Portion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portion.js","sources":["../../../src/components/Portion/Portion.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// ELEMENT =============================================================================================================\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./portion.css\";\n\n// OTHER ===============================================================================================================\nimport { SpanTypes } from \"./types\";\n\n// prettier-ignore\nexport interface PortionCustomProps {\n        desktopSpan         ? : SpanTypes;\n        tabletLandscapeSpan ? : SpanTypes;\n        tabletPortraitSpan  ? : SpanTypes;\n        mobileSpan          ? : SpanTypes;\n        isHorizontal        ? : boolean;\n        role                ? : string;\n}\n\nexport type PortionElementType = HTMLDivElement;\nexport type PortionProps = Omit<CommonAndHTMLProps<PortionElementType>, keyof PortionCustomProps> & PortionCustomProps;\n\n// COMPONENT //////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Portion = React.forwardRef(\n    (\n        {\n            desktopSpan,\n            mobileSpan,\n            tabletLandscapeSpan,\n            tabletPortraitSpan,\n            isHorizontal,\n            role,\n            ...props\n        }: PortionProps,\n        ref: React.Ref<PortionElementType>\n    ) => {\n        // CLASS NAMES -------------------------------------------------------------------------------------------------\n        let classNames = [];\n\n        if (desktopSpan || tabletLandscapeSpan || tabletPortraitSpan || mobileSpan) {\n            if (desktopSpan) {\n                classNames.push(`${desktopSpan}`);\n            }\n\n            if (tabletLandscapeSpan) {\n                classNames.push(`${tabletLandscapeSpan}-on-tablet-landscape`);\n            }\n\n            if (tabletPortraitSpan) {\n                classNames.push(`${tabletPortraitSpan}-on-tablet-portrait`);\n            }\n\n            if (mobileSpan) {\n                classNames.push(`${mobileSpan}-on-mobile`);\n            }\n        } else {\n            classNames.push(\"whole\");\n        }\n\n        if (isHorizontal) {\n            classNames.push(\"horizontal\");\n        }\n\n        // RENDER ---------------------------------------------------------------------------------------------------\n        return (\n            <Element<PortionElementType>\n                as=\"div\"\n                data-portion\n                ref={ref}\n                classNames={classNames}\n                role={role}\n                {...props}\n            />\n        );\n    }\n);\nPortion.displayName = \"Portion\";\n"],"names":["Portion","React","desktopSpan","mobileSpan","tabletLandscapeSpan","tabletPortraitSpan","isHorizontal","role","props","ref","classNames","jsx","Element"],"mappings":";;;;AA2BO,MAAMA,IAAUC,EAAM;AAAA,EACzB,CACI;AAAA,IACI,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AAED,QAAIC,IAAa,CAAA;AAEjB,WAAIR,KAAeE,KAAuBC,KAAsBF,KACxDD,KACAQ,EAAW,KAAK,GAAGR,CAAW,EAAE,GAGhCE,KACAM,EAAW,KAAK,GAAGN,CAAmB,sBAAsB,GAG5DC,KACAK,EAAW,KAAK,GAAGL,CAAkB,qBAAqB,GAG1DF,KACAO,EAAW,KAAK,GAAGP,CAAU,YAAY,KAG7CO,EAAW,KAAK,OAAO,GAGvBJ,KACAI,EAAW,KAAK,YAAY,GAK5B,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,gBAAY;AAAA,QACZ,KAAAH;AAAA,QACA,YAAAC;AAAA,QACA,MAAAH;AAAA,QACC,GAAGC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhB;AACJ;AACAR,EAAQ,cAAc;"}

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsxs as m, Fragment as b, jsx as s } from "react/jsx-runtime";
+import y from "react";
+/* empty css                 */
+import { Text as l } from "../Typography/Text.js";
+import { Element as u } from "../Element/Element.js";
+const B = y.forwardRef(
+  ({
+    label: r,
+    value: d,
+    height: g,
+    max: a = 100,
+    shape: p,
+    bgColor: c,
+    bgColour: f,
+    fillColor: v,
+    fillColour: h,
+    ...o
+  }, x) => {
+    const e = Math.max(0, Math.min(a, Number(d) || 0)), t = `${e}${o.suffix || ""}`, i = f || c, n = h || v, $ = {
+      height: g,
+      ...i && { "--progress-bar-bg": `var(--${i})` },
+      ...n && { "--progress-bar-fill": `var(--${n})` }
+    };
+    return /* @__PURE__ */ m(b, { children: [
+      r && /* @__PURE__ */ m(
+        u,
+        {
+          as: "div",
+          "data-progress-bar-meta": !0,
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ s(l, { children: r }),
+            /* @__PURE__ */ s(l, { children: t })
+          ]
+        }
+      ),
+      /* @__PURE__ */ s(
+        u,
+        {
+          as: "progress",
+          "data-progress-bar": !0,
+          ref: x,
+          value: e,
+          max: a,
+          "aria-label": r,
+          "aria-valuemin": 0,
+          "aria-valuemax": a,
+          "aria-valuenow": e,
+          "aria-valuetext": `${r ? `${r}: ` : ""}${t}`,
+          shape: p,
+          ...o,
+          style: $
+        }
+      )
+    ] });
+  }
+);
+B.displayName = "ProgressBar";
+export {
+  B as ProgressBar
+};
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps, ColourPropTypes, ShapeTypes } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./progress-bar.css\";\n\n// OTHER ===============================================================================================================\nimport { Text } from \"../Typography/Text\";\n\nexport interface ProgressBarLabelCustomProps {\n    suffix ? : string;\n}\n\nexport interface ProgressBarCustomProps {\n    label      ? : string;\n    value      ? : number;\n    suffix     ? : string;\n    height     ? : string;\n    max        ? : number;\n    shape      ? : ShapeTypes;\n    bgColor    ? : ColourPropTypes;\n    bgColour   ? : ColourPropTypes;\n    fillColor  ? : ColourPropTypes;\n    fillColour ? : ColourPropTypes;\n}\n\nexport type ProgressBarElementType = HTMLProgressElement;\nexport type ProgressBarProps = Omit<CommonAndHTMLProps<ProgressBarElementType>, keyof ProgressBarCustomProps> &\n                               ProgressBarCustomProps;\nexport type ProgressBarMetaProps = Omit<CommonAndHTMLProps<HTMLDivElement>, keyof ProgressBarLabelCustomProps> &\n                                   ProgressBarLabelCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const ProgressBar = React.forwardRef(\n    (\n        {\n            label,\n            value,\n            height,\n            max = 100,\n            shape,\n            bgColor,\n            bgColour,\n            fillColor,\n            fillColour,\n            ...props\n        } : ProgressBarProps, ref : React.Ref<ProgressBarElementType>) => {\n        const validValue = Math.max(0, Math.min(max, Number(value) || 0));\n        const progressText = `${validValue}${props.suffix || \"\"}`;\n\n        // Use UK spelling as primary, fall back to US spelling\n        const backgroundColour = bgColour || bgColor;\n        const progressFillColour = fillColour || fillColor;\n\n        // Build CSS custom properties for styling\n        const progressBarStyles : React.CSSProperties = {\n            height,\n            ...(backgroundColour && {\"--progress-bar-bg\" : `var(--${backgroundColour})`}),\n            ...(progressFillColour && {\"--progress-bar-fill\" : `var(--${progressFillColour})`}),\n        };\n\n        return (\n            <>\n                {label && (\n                    <Element<HTMLDivElement>\n                        as=\"div\"\n                        data-progress-bar-meta\n                        aria-hidden=\"true\"\n                    >\n                        <Text>{label}</Text>\n                        <Text>\n                            {progressText}\n                        </Text>\n                    </Element>\n                )}\n\n                <Element<ProgressBarElementType>\n                    as=\"progress\"\n                    data-progress-bar\n                    ref={ref}\n                    value={validValue}\n                    max={max}\n                    aria-label={label}\n                    aria-valuemin={0}\n                    aria-valuemax={max}\n                    aria-valuenow={validValue}\n                    aria-valuetext={`${label ? `${label}: ` : \"\"}${progressText}`}\n                    shape={shape}\n                    {...props}\n                    style={progressBarStyles}\n                />\n            </>\n        );\n    },\n);\nProgressBar.displayName = \"ProgressBar\";"],"names":["ProgressBar","React","label","value","height","max","shape","bgColor","bgColour","fillColor","fillColour","props","ref","validValue","progressText","backgroundColour","progressFillColour","progressBarStyles","jsxs","Fragment","Element","jsx","Text"],"mappings":";;;;;AAqCO,MAAMA,IAAcC,EAAM;AAAA,EAC7B,CACI;AAAA,IACI,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GACeC,MAA4C;AAClE,UAAMC,IAAa,KAAK,IAAI,GAAG,KAAK,IAAIR,GAAK,OAAOF,CAAK,KAAK,CAAC,CAAC,GAC1DW,IAAe,GAAGD,CAAU,GAAGF,EAAM,UAAU,EAAE,IAGjDI,IAAmBP,KAAYD,GAC/BS,IAAqBN,KAAcD,GAGnCQ,IAA0C;AAAA,MAC5C,QAAAb;AAAA,MACA,GAAIW,KAAoB,EAAC,qBAAsB,SAASA,CAAgB,IAAA;AAAA,MACxE,GAAIC,KAAsB,EAAC,uBAAwB,SAASA,CAAkB,IAAA;AAAA,IAAG;AAGrF,WACI,gBAAAE,EAAAC,GAAA,EACK,UAAA;AAAA,MAAAjB,KACG,gBAAAgB;AAAA,QAACE;AAAA,QAAA;AAAA,UACG,IAAG;AAAA,UACH,0BAAsB;AAAA,UACtB,eAAY;AAAA,UAEZ,UAAA;AAAA,YAAA,gBAAAC,EAACC,KAAM,UAAApB,EAAA,CAAM;AAAA,YACb,gBAAAmB,EAACC,KACI,UAAAR,EAAA,CACL;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAIR,gBAAAO;AAAA,QAACD;AAAA,QAAA;AAAA,UACG,IAAG;AAAA,UACH,qBAAiB;AAAA,UACjB,KAAAR;AAAA,UACA,OAAOC;AAAA,UACP,KAAAR;AAAA,UACA,cAAYH;AAAA,UACZ,iBAAe;AAAA,UACf,iBAAeG;AAAA,UACf,iBAAeQ;AAAA,UACf,kBAAgB,GAAGX,IAAQ,GAAGA,CAAK,OAAO,EAAE,GAAGY,CAAY;AAAA,UAC3D,OAAAR;AAAA,UACC,GAAGK;AAAA,UACJ,OAAOM;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,GACJ;AAAA,EAER;AACJ;AACAjB,EAAY,cAAc;"}

package/dist/components/Row/Row.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import f from "react";
+/* empty css        */
+import { Element as d } from "../Element/Element.js";
+const y = f.forwardRef(
+  ({
+    layout: o = "grid",
+    gutters: a = "medium",
+    retainLayoutOnTabletLandscape: i,
+    retainLayoutOnTabletPortrait: e,
+    retainLayoutOnMobile: r,
+    retainLayoutAlways: l,
+    allowUltraWide: n,
+    groupLabel: s,
+    ...m
+  }, p) => {
+    let t = [];
+    return o && t.push(`layout-${o}`), a && t.push(a === "none" ? "no-gutters" : `${a}-gutters`), i && t.push("retain-layout-on-tablet-landscape"), e && t.push("retain-layout-on-tablet-portrait"), r && t.push("retain-layout-on-mobile"), l && t.push(
+      "retain-layout-on-tablet-landscape retain-layout-on-tablet-portrait retain-layout-on-mobile"
+    ), n && t.push("allow-ultra-wide"), /* @__PURE__ */ u(
+      d,
+      {
+        as: "div",
+        "data-row": !0,
+        ref: p,
+        classNames: [t.join(" ")],
+        marginBottom: "tiny",
+        role: "grid",
+        "aria-label": s,
+        ...m
+      }
+    );
+  }
+);
+y.displayName = "Row";
+export {
+  y as Row
+};
+//# sourceMappingURL=Row.js.map