@onepercentio/one-ui 0.8.5-beta.9 → 0.9.0

package/dist/components/PaginationIndicator/PaginationIndicator.js

@@ -0,0 +1,136 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationIndicatorView = void 0;
+const react_1 = __importStar(require("react"));
+const eachBallWidthEm = 1.2;
+const pushToborder = 7 * eachBallWidthEm;
+/**
+ * A cool component to indicate how many pages are
+ **/
+function PaginationIndicatorView({ size, page, pages, className, }) {
+    const rand = (0, react_1.useMemo)(() => Math.random().toString(), []);
+    const pageIndex = page - 1;
+    const numBalls = (0, react_1.useMemo)(() => {
+        const numBalls = pages >= 7 ? 7 : Math.ceil(pages) + 1;
+        return numBalls;
+    }, [pages]);
+    const maxBallsOffset = (0, react_1.useMemo)(() => (numBalls - 1) / 2, [numBalls]);
+    const prevVal = (0, react_1.useRef)(0);
+    const balls = (0, react_1.useMemo)(() => {
+        const lastPages = pages + 1 - maxBallsOffset;
+        const isCenterPage = numBalls >= 7 && pageIndex > maxBallsOffset && pageIndex < lastPages;
+        let modulus = pageIndex % (1 + (maxBallsOffset - Math.floor(maxBallsOffset)));
+        const resetPageIndex = isCenterPage
+            ? maxBallsOffset + modulus
+            : pageIndex > lastPages - 1
+                ? numBalls - 1 - (pages - pageIndex)
+                : pageIndex;
+        prevVal.current = modulus;
+        const left = 1.2 * resetPageIndex;
+        return new Array(numBalls + 1 + (isCenterPage && pages >= 7 && page < lastPages ? 1 : 0))
+            .fill(undefined)
+            .map((_, i) => {
+            const isLastBall = i === numBalls + 1;
+            const isFirstBall = i === 1;
+            if (i === 0)
+                return (react_1.default.createElement("circle", { fill: "#fff", r: `${0.45}em`, cx: `${pushToborder}em`, cy: "0.5em" }));
+            const ballSize = numBalls < 7 || pages === 6
+                ? 0.5
+                : page <= maxBallsOffset + 1 && isLastBall
+                    ? 0
+                    : page >= lastPages + 1 && isFirstBall
+                        ? 0
+                        : isCenterPage
+                            ? isFirstBall
+                                ? 0.5 - modulus * 0.5
+                                : isLastBall
+                                    ? modulus * 0.5
+                                    : 0.5
+                            : 0.5;
+            return (react_1.default.createElement("circle", { fill: "#fff", r: `${ballSize * 0.6}em`, cx: `${pushToborder + (i - 1) * eachBallWidthEm - left}em`, cy: "0.5em" }));
+        });
+    }, [maxBallsOffset, pageIndex, pages]);
+    const [guideBall, ...pageBalls] = balls;
+    return (react_1.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", className: className, style: {
+            width: `${eachBallWidthEm * 7 * 2}em`,
+            minWidth: `${eachBallWidthEm * 7 * 2}em`,
+            height: "1em",
+            fontSize: `${size}px`,
+        } },
+        react_1.default.createElement("filter", { id: `goo-${rand}` },
+            react_1.default.createElement("feGaussianBlur", { in: "SourceGraphic", result: "blur", stdDeviation: "5" }),
+            react_1.default.createElement("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }),
+            react_1.default.createElement("feBlend", { in2: "goo", in: "SourceGraphic", result: "mix" })),
+        react_1.default.createElement("mask", { id: `mask-${rand}` },
+            react_1.default.createElement("g", { filter: `url(#${`goo-${rand}`})` },
+                [pageBalls],
+                guideBall)),
+        react_1.default.createElement("rect", { x: "0", y: "0", mask: `url(#${`mask-${rand}`})`, width: "100%", height: "100%", style: { fill: "var(--digital-blue)" } })));
+}
+exports.PaginationIndicatorView = PaginationIndicatorView;
+function _PaginationIndicator({ scrollableRef, estimatedWidth, size, mode = "scroll", className = "", }, ref) {
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
+    const [defs, setDefs] = (0, react_1.useState)();
+    const refreshPages = (0, react_1.useCallback)(() => {
+        const maxWidth = estimatedWidth || scrollableRef.current.scrollWidth;
+        setDefs({
+            pages: Math.ceil(maxWidth / scrollableRef.current.clientWidth) - 1,
+        });
+    }, [estimatedWidth]);
+    (0, react_1.useEffect)(() => refreshPages(), [refreshPages]);
+    const updatePageIndicators = (0, react_1.useCallback)((target, pages) => {
+        if (mode === "page") {
+            const eachPageWidth = scrollableRef.current.clientWidth;
+            const page = 1 + target.scrollLeft / eachPageWidth;
+            setCurrentPage(page);
+        }
+        else {
+            const maxWidth = estimatedWidth || scrollableRef.current.scrollWidth;
+            const availableTOScroll = maxWidth - scrollableRef.current.clientWidth;
+            if (availableTOScroll === 0)
+                return setCurrentPage(1);
+            const page = 1 + ((target.scrollLeft * 100) / availableTOScroll / 100) * pages;
+            setCurrentPage(page);
+        }
+    }, []);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        refreshPages,
+    }), []);
+    (0, react_1.useEffect)(() => {
+        if (!defs)
+            return;
+        const el = scrollableRef.current;
+        const onScroll = (e) => updatePageIndicators(e.currentTarget, defs.pages);
+        updatePageIndicators(el, defs.pages);
+        el.addEventListener("scroll", onScroll);
+        return () => {
+            el.removeEventListener("scroll", onScroll);
+        };
+    }, [defs]);
+    return !defs ? null : (react_1.default.createElement(PaginationIndicatorView, { pages: defs.pages, page: currentPage, size: size, className: className }));
+}
+exports.default = (0, react_1.forwardRef)(_PaginationIndicator);
+//# sourceMappingURL=PaginationIndicator.js.map

package/dist/components/PaginationIndicator/PaginationIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationIndicator.js","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/PaginationIndicator.tsx"],"names":[],"mappings":"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"}

package/dist/components/PaginationIndicator/PaginationIndicator.module.scss

@@ -0,0 +1,48 @@
+$x: 0.1em;
+
+.root {
+  position: relative;
+  height: 1.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: contrast(20);
+  background-color: #fff;
+  overflow: hidden;
+  > * {
+    height: 1em * 1.2;
+    width: 1em * 1.2;
+    margin: 0px 0.1em;
+    border-radius: 0.5em * 1.2;
+    background-color: #000;
+    position: relative;
+    filter: blur($x);
+    opacity: 0.485;
+    // animation-name: a;
+    // animation-iteration-count: infinite;
+    // animation-duration: 1s;
+    // animation-timing-function: linear;
+    // animation-direction: alternate;
+  }
+  &::after {
+    content: " ";
+    position: absolute;
+    background-color: #00f;
+    filter: blur($x * 2);
+    height: 1em * 0.8;
+    width: 1em * 0.8;
+    border-radius: 0.5em;
+  }
+}
+
+// @keyframes a {
+//   0% {
+//     right: 2em;
+//   }
+//   50% {
+//     right: 0em;
+//   }
+//   100% {
+//     right: -2em;
+//   }
+// }

package/dist/components/PaginationIndicator/index.d.ts

@@ -0,0 +1 @@
+export { default } from './PaginationIndicator';

package/dist/components/PaginationIndicator/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var PaginationIndicator_1 = require("./PaginationIndicator");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(PaginationIndicator_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/PaginationIndicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PaginationIndicator/index.tsx"],"names":[],"mappings":";;;;;;AAAA,6DAAgD;AAAvC,+HAAA,OAAO,OAAA"}

package/dist/components/PasswordInput/PasswordInput.d.ts

@@ -36,7 +36,7 @@ declare const _default: React.ForwardRefExoticComponent<(({
     } & React.ClassAttributes<any> & React.ImgHTMLAttributes<HTMLImageElement>) | undefined;
     Icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-} & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref" | "onChange"> & React.RefAttributes<any>, "ref" | "value" | "onChange">) & React.RefAttributes<{
+} & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "onChange" | "ref"> & React.RefAttributes<any>, "value" | "onChange" | "ref">) & React.RefAttributes<{
     validatePassword: (pass: string) => boolean;
 }>>;
 export default _default;

package/dist/components/Select/Select.d.ts

@@ -7,10 +7,12 @@ export declare type SelectItem = {
 /**
  * A dropdown select
  **/
-declare function Select<I extends SelectItem>({ items, selected, label, onClick, loading, ...otherProps }: {
+declare function Select<I extends SelectItem>({ items, selected, label, onClick, loading, rootClassName, dropdownClassName, ...otherProps }: {
     loading?: boolean;
     items: Readonly<I[]>;
     onClick: (i: I) => void;
+    rootClassName?: string;
+    dropdownClassName?: string;
 } & ({
     selected?: I["value"];
     label: string;

package/dist/components/Select/Select.js

@@ -48,7 +48,7 @@ const OneUIProvider_1 = require("../../context/OneUIProvider");
  * A dropdown select
  **/
 function Select(_a) {
-    var { items, selected, label, onClick, loading } = _a, otherProps = __rest(_a, ["items", "selected", "label", "onClick", "loading"]);
+    var { items, selected, label, onClick, loading, rootClassName = "", dropdownClassName = "" } = _a, otherProps = __rest(_a, ["items", "selected", "label", "onClick", "loading", "rootClassName", "dropdownClassName"]);
     const { StateIndicator } = (0, OneUIProvider_1.useOneUIContext)().component.select;
     const _selected = (0, react_1.useMemo)(() => {
         return items.find((a) => a.value === selected);
@@ -66,7 +66,7 @@ function Select(_a) {
     return (react_1.default.createElement(Collapsable_1.default, { title: react_1.default.createElement(Input_1.default, Object.assign({}, otherProps, { className: `${Select_module_scss_1.default.input} ${!items.length ? Select_module_scss_1.default.empty : ""}`, value: (_selected === null || _selected === void 0 ? void 0 : _selected.label) || label, disabled: true, Icon: react_1.default.createElement("div", { className: `${Select_module_scss_1.default.indicator}` }, loading ? react_1.default.createElement(Loader_1.default, null) : react_1.default.createElement(StateIndicator, { open: !!open })) })), id: undefined, mode: "float", open: open, onToggleOpen: (open) => {
             if (items.length)
                 setOpen(open);
-        }, className: otherProps.disabled ? "disabled" : "", contentClassName: `${Select_module_scss_1.default.optionsContainer}` },
+        }, className: `${otherProps.disabled ? "disabled" : ""} ${rootClassName}`, contentClassName: `${Select_module_scss_1.default.optionsContainer} ${dropdownClassName}` },
         react_1.default.createElement("div", { className: Select_module_scss_1.default.items, onClick: (e) => {
                 e.stopPropagation();
                 setOpen(false);

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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"}

package/dist/components/Tabs/Tabs.d.ts

@@ -1,11 +1,13 @@
 /**
  * Show tabs for toggling between options
  **/
-export default function Tabs<O extends string>({ options, selected, onSelect }: {
+export default function Tabs<O extends string>({ options, selected, onSelect, itemClassName, className, }: {
     options: Readonly<{
         id: O;
         label: string;
     }[]>;
     selected?: O;
     onSelect: (option: O) => void;
+    itemClassName?: string;
+    className?: string;
 }): JSX.Element;

package/dist/components/Tabs/Tabs.js

@@ -31,19 +31,27 @@ const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
 /**
  * Show tabs for toggling between options
  **/
-function Tabs({ options, selected, onSelect }) {
+function Tabs({ options, selected, onSelect, itemClassName = "", className = "", }) {
     const selectedRef = (0, react_1.useRef)(null);
     const guideRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
-        guideRef.current.style['opacity'] = selectedRef.current ? "1" : "0";
-        guideRef.current.style['width'] = selectedRef.current ? selectedRef.current.clientWidth + "px" : "0px";
-        guideRef.current.style['left'] = selectedRef.current ? selectedRef.current.offsetLeft + "px" : "initial";
-        guideRef.current.style['top'] = selectedRef.current ? selectedRef.current.offsetTop + selectedRef.current.clientHeight + "px" : "initial";
+        guideRef.current.style["opacity"] = selectedRef.current
+            ? "1"
+            : guideRef.current.style["opacity"];
+        guideRef.current.style["width"] = selectedRef.current
+            ? selectedRef.current.clientWidth + "px"
+            : "0px";
+        guideRef.current.style["left"] = selectedRef.current
+            ? selectedRef.current.offsetLeft + "px"
+            : guideRef.current.style["left"] || "initial";
+        guideRef.current.style["top"] = selectedRef.current
+            ? selectedRef.current.offsetTop + selectedRef.current.clientHeight + "px"
+            : guideRef.current.style["top"] || "initial";
     }, [selected]);
-    return react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: Tabs_module_scss_1.default.container },
-            options.map(o => react_1.default.createElement("p", { ref: selected === o.id ? selectedRef : undefined, onClick: () => onSelect(o.id), className: selected === o.id ? Tabs_module_scss_1.default.selected : "", key: o.id, "data-testid": "tab-option" }, o.label)),
-            react_1.default.createElement("div", { ref: guideRef, className: Tabs_module_scss_1.default.guide, "data-testid": "tab-guide" })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: `${Tabs_module_scss_1.default.container} ${className}` },
+            options.map((o) => (react_1.default.createElement("p", { ref: selected === o.id ? selectedRef : undefined, onClick: () => onSelect(o.id), className: `${selected === o.id ? Tabs_module_scss_1.default.selected : ""} ${itemClassName}`, key: o.id, "data-testid": "tab-option" }, o.label))),
+            react_1.default.createElement("div", { ref: guideRef, className: Tabs_module_scss_1.default.guide, "data-testid": "tab-guide" }))));
 }
 exports.default = Tabs;
 //# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,0EAAwC;AAExC;;IAEI;AACJ,SAAwB,IAAI,CAAmB,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAGxB;IAC/C,MAAM,WAAW,GAAG,IAAA,cAAM,EAAuB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC9C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QACrE,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACxG,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QAC1G,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/I,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACf,OAAO;QACH,uCAAK,SAAS,EAAE,0BAAM,CAAC,SAAS;YAC3B,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,qCAAG,GAAG,EAAE,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,0BAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,iBAAc,YAAY,IAAE,CAAC,CAAC,KAAK,CAAK,CAAC;YAC7M,uCAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAM,CAAC,KAAK,iBAAc,WAAW,GAAE,CACpE,CACP,CAAC;AACR,CAAC;AAlBD,uBAkBC"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiD;AACjD,0EAAwC;AAExC;;IAEI;AACJ,SAAwB,IAAI,CAAmB,EAC7C,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,aAAa,GAAG,EAAE,EAClB,SAAS,GAAG,EAAE,GAYf;IACC,MAAM,WAAW,GAAG,IAAA,cAAM,EAAuB,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC9C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,OAAO;YACtD,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACvC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,OAAO;YACpD,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI;YACxC,CAAC,CAAC,KAAK,CAAC;QACV,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,OAAO;YACnD,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,GAAG,IAAI;YACvC,CAAC,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC;QACjD,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,WAAW,CAAC,OAAO;YAClD,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI;YACzE,CAAC,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;IAClD,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACf,OAAO,CACL;QACE,uCAAK,SAAS,EAAE,GAAG,0BAAM,CAAC,SAAS,IAAI,SAAS,EAAE;YAC/C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,qCACE,GAAG,EAAE,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAC7B,SAAS,EAAE,GACT,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,0BAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EACxC,IAAI,aAAa,EAAE,EACnB,GAAG,EAAE,CAAC,CAAC,EAAE,iBACG,YAAY,IAEvB,CAAC,CAAC,KAAK,CACN,CACL,CAAC;YACF,uCAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAM,CAAC,KAAK,iBAAc,WAAW,GAAG,CACnE,CACL,CACJ,CAAC;AACJ,CAAC;AAtDD,uBAsDC"}

package/dist/components/Tabs/Tabs.module.scss

@@ -7,7 +7,6 @@
   align-items: flex-start;
   p {
     cursor: pointer;
-    margin: 1em 2em;
     &.selected {
       font-weight: bold;
     }

package/dist/context/CustomBrowserRouter.d.ts

@@ -1,5 +1,13 @@
+import { createBrowserHistory } from "history";
 import { PropsWithChildren } from "react";
 export declare type CustomState = {
     internalNavigation?: boolean;
 };
-export default function CustomBrowserRouter({ children, }: PropsWithChildren<{}>): JSX.Element;
+export default function CustomBrowserRouter({ children, beforeRouteChange, }: PropsWithChildren<{
+    /**
+     * Allows the dev to modify the route before commiting the route change
+     *
+     * @returns The new route
+     */
+    beforeRouteChange?: (newRoute: string, history: ReturnType<typeof createBrowserHistory>) => string;
+}>): JSX.Element;

package/dist/context/CustomBrowserRouter.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_router_dom_1 = require("react-router-dom");
 const history_1 = require("history");
 const react_1 = __importStar(require("react"));
-function CustomBrowserRouter({ children, }) {
+function CustomBrowserRouter({ children, beforeRouteChange = (s) => s, }) {
     const { current: historyCustom } = (0, react_1.useRef)((0, history_1.createBrowserHistory)());
     (0, react_1.useLayoutEffect)(() => {
         function overrideFunction(name) {
@@ -42,7 +42,8 @@ function CustomBrowserRouter({ children, }) {
                         name === "replace"
                             ? (_d = (_c = history.state) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.internalNavigation
                             : true;
-                return orig(route, state, ...args);
+                const modifiedRoute = beforeRouteChange(route, historyCustom);
+                return orig(modifiedRoute, state, ...args);
             };
         }
         overrideFunction("push");

package/dist/context/CustomBrowserRouter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomBrowserRouter.js","sourceRoot":"","sources":["../../src/context/CustomBrowserRouter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uDAAsD;AACtD,qCAA+C;AAC/C,+CAKe;AAMf,SAAwB,mBAAmB,CAAC,EAC1C,QAAQ,GACc;IACtB,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,IAAA,cAAM,EAAC,IAAA,8BAAoB,GAAO,CAAC,CAAC;IACvE,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,SAAS,gBAAgB,CAAC,IAAgC;YACxD,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAQ,CAAC;YACvC,aAAqB,CAAC,IAAI,CAAC,GAAG,CAC7B,KAAa,EACb,KAAyB,EACzB,GAAG,IAAW,EACd,EAAE;;gBACF,MAAM,+BAA+B,GACnC,IAAI,KAAK,SAAS,KAAI,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,0CAAE,kBAAkB,CAAA,CAAC;gBACjE,MAAM,cAAc,GAAG,IAAI,KAAK,SAAS,CAAC;gBAC1C,IAAI,CAAC,cAAc,IAAI,+BAA+B,CAAC,IAAI,CAAC,KAAK;oBAC/D,KAAK,GAAG,EAAE,CAAC;gBACb,IAAI,KAAK;oBACP,KAAK,CAAC,kBAAkB;wBACtB,IAAI,KAAK,SAAS;4BAChB,CAAC,CAAC,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,0CAAE,kBAAkB;4BAC1C,CAAC,CAAC,IAAI,CAAC;gBACb,OAAO,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC;YACrC,CAAC,CAAC;QACJ,CAAC;QACD,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACzB,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,OAAO,8BAAC,yBAAM,IAAC,OAAO,EAAE,aAAa,IAAG,QAAQ,CAAU,CAAC;AAC7D,CAAC;AA7BD,sCA6BC"}
+{"version":3,"file":"CustomBrowserRouter.js","sourceRoot":"","sources":["../../src/context/CustomBrowserRouter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uDAAsD;AACtD,qCAA+C;AAC/C,+CAKe;AAMf,SAAwB,mBAAmB,CAAC,EAC1C,QAAQ,EACR,iBAAiB,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAW5B;IACA,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,IAAA,cAAM,EAAC,IAAA,8BAAoB,GAAO,CAAC,CAAC;IACvE,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,SAAS,gBAAgB,CAAC,IAAgC;YACxD,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAQ,CAAC;YACvC,aAAqB,CAAC,IAAI,CAAC,GAAG,CAC7B,KAAa,EACb,KAAyB,EACzB,GAAG,IAAW,EACd,EAAE;;gBACF,MAAM,+BAA+B,GACnC,IAAI,KAAK,SAAS,KAAI,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,0CAAE,kBAAkB,CAAA,CAAC;gBACjE,MAAM,cAAc,GAAG,IAAI,KAAK,SAAS,CAAC;gBAC1C,IAAI,CAAC,cAAc,IAAI,+BAA+B,CAAC,IAAI,CAAC,KAAK;oBAC/D,KAAK,GAAG,EAAE,CAAC;gBACb,IAAI,KAAK;oBACP,KAAK,CAAC,kBAAkB;wBACtB,IAAI,KAAK,SAAS;4BAChB,CAAC,CAAC,MAAA,MAAA,OAAO,CAAC,KAAK,0CAAE,KAAK,0CAAE,kBAAkB;4BAC1C,CAAC,CAAC,IAAI,CAAC;gBACb,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;gBAC9D,OAAO,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC;YAC7C,CAAC,CAAC;QACJ,CAAC;QACD,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACzB,gBAAgB,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IACpB,OAAO,8BAAC,yBAAM,IAAC,OAAO,EAAE,aAAa,IAAG,QAAQ,CAAU,CAAC;AAC7D,CAAC;AAzCD,sCAyCC"}

package/dist/context/OneUIProvider.d.ts

@@ -1,5 +1,5 @@
 import { Get } from "type-fest";
-import React from "react";
+import React, { ReactElement } from "react";
 import { PropsWithChildren } from "react";
 import { FieldPath } from "../utils";
 declare type DeepPartial<T> = {
@@ -64,6 +64,15 @@ export declare type ContextSpecs = {
             className?: string;
         };
     };
+    hook: {
+        ui: {
+            usePaginationControls: {
+                LeftControl: () => ReactElement;
+                RightControl: () => ReactElement;
+                className?: string;
+            };
+        };
+    };
 };
 declare type ContextConfigSpecs = DeepPartial<ContextSpecs>;
 export default function OneUIProvider({ children, config, }: PropsWithChildren<{

package/dist/context/OneUIProvider.js

@@ -61,7 +61,7 @@ function useOneUIConfig(prop, defaultValue) {
     const context = (0, react_2.useContext)(Context);
     if (process.env.NODE_ENV === "development") {
         const val = (0, get_1.default)(context, prop);
-        if (typeof val === "string")
+        if (typeof val === "string" || typeof val === "function")
             return val;
         return ErrorWrapper(val || defaultValue);
     }

package/dist/context/OneUIProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OneUIProvider.js","sourceRoot":"","sources":["../../src/context/OneUIProvider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OneUIProvider.js","sourceRoot":"","sources":["../../src/context/OneUIProvider.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/ui/useBreakpoint.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A hook to trigger changes when the screen resizes
+ * @returns If the current resolution is lower than the specified width
+ */
+export default function useBreakpoint(breakInto: number): boolean;

package/dist/hooks/ui/useBreakpoint.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const throttle_1 = __importDefault(require("lodash/throttle"));
+const react_1 = require("react");
+/**
+ * A hook to trigger changes when the screen resizes
+ * @returns If the current resolution is lower than the specified width
+ */
+function useBreakpoint(breakInto) {
+    const [lowerThanBreakpoint, setIsLowerThanBreakpoint] = (0, react_1.useState)(() => window.visualViewport.width < breakInto);
+    (0, react_1.useEffect)(() => {
+        const onResizeThrottle = (0, throttle_1.default)(() => {
+            setIsLowerThanBreakpoint(window.visualViewport.width < breakInto);
+        }, 1000 / 4);
+        const onResize = () => onResizeThrottle();
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+    return lowerThanBreakpoint;
+}
+exports.default = useBreakpoint;
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/hooks/ui/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../src/hooks/ui/useBreakpoint.tsx"],"names":[],"mappings":";;;;;AAAA,+DAAuC;AACvC,iCAA4C;AAE5C;;;GAGG;AACH,SAAwB,aAAa,CAAC,SAAiB;IACrD,MAAM,CAAC,mBAAmB,EAAE,wBAAwB,CAAC,GAAG,IAAA,gBAAQ,EAC9D,GAAG,EAAE,CAAC,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,SAAS,CAC/C,CAAC;IACF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,gBAAgB,GAAG,IAAA,kBAAQ,EAAC,GAAG,EAAE;YACrC,wBAAwB,CAAC,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;QACrE,CAAC,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,gBAAgB,EAAE,CAAC;QAC1C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC5C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC9D,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAbD,gCAaC"}

package/dist/hooks/ui/usePaginationControls.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from "react";
+/**
+ * This hook handles the display of pagination controls for the user to move to another page
+ */
+export default function usePaginationControls(containerRef: RefObject<HTMLDivElement>, { snapToPage, }?: {
+    snapToPage?: boolean;
+}): {
+    controls: JSX.Element[];
+    checkControlsRequirement: () => void;
+};
+export declare enum usePaginationControlsTestIds {
+    LEFT_CONTROL = "page-l",
+    RIGHT_CONTROL = "page-r"
+}

package/dist/hooks/ui/usePaginationControls.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePaginationControlsTestIds = void 0;
+const throttle_1 = __importDefault(require("lodash/throttle"));
+const react_1 = __importStar(require("react"));
+const FadeIn_1 = __importDefault(require("../../components/FadeIn"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const usePaginationControls_module_scss_1 = __importDefault(require("./usePaginationControls.module.scss"));
+/**
+ * This hook handles the display of pagination controls for the user to move to another page
+ */
+function usePaginationControls(containerRef, { snapToPage, } = {}) {
+    const [[leftControl, rightControl], setControls] = (0, react_1.useState)([false, false]);
+    const LeftControl = (0, OneUIProvider_1.useOneUIConfig)("hook.ui.usePaginationControls.LeftControl");
+    const RightControl = (0, OneUIProvider_1.useOneUIConfig)("hook.ui.usePaginationControls.RightControl");
+    const className = (0, OneUIProvider_1.useOneUIConfig)("hook.ui.usePaginationControls.className", "");
+    function move(direction) {
+        return () => {
+            const rest = containerRef.current.scrollLeft % containerRef.current.clientWidth;
+            const snapOffset = snapToPage
+                ? direction === "l"
+                    ? rest
+                        ? containerRef.current.clientWidth - rest
+                        : 0
+                    : rest
+                : 0;
+            containerRef.current.scrollBy({
+                left: (containerRef.current.clientWidth - snapOffset) *
+                    (direction === "l" ? -1 : 1),
+                behavior: "smooth",
+            });
+        };
+    }
+    function checkControlsRequirement() {
+        const el = containerRef.current;
+        const shouldHaveAnyControl = el.scrollWidth > el.clientWidth;
+        if (!shouldHaveAnyControl)
+            setControls([false, false]);
+        else {
+            const shouldHaveRightControl = el.scrollLeft < el.scrollWidth - el.clientWidth;
+            const shouldHaveLeftControl = el.scrollLeft > 0;
+            setControls([shouldHaveLeftControl, shouldHaveRightControl]);
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        const el = containerRef.current;
+        const throttledCheck = (0, throttle_1.default)(checkControlsRequirement, 1000 / 4);
+        checkControlsRequirement();
+        el.addEventListener("scroll", throttledCheck);
+        return () => el.removeEventListener("scroll", throttledCheck);
+    }, []);
+    return {
+        controls: [
+            react_1.default.createElement(FadeIn_1.default, { active: leftControl, className: `${usePaginationControls_module_scss_1.default.left} ${usePaginationControls_module_scss_1.default.control} ${className}`, "data-testid": usePaginationControlsTestIds.LEFT_CONTROL, onClick: move("l") }, leftControl && react_1.default.createElement(LeftControl, null)),
+            react_1.default.createElement(FadeIn_1.default, { active: rightControl, className: `${usePaginationControls_module_scss_1.default.right} ${usePaginationControls_module_scss_1.default.control} ${className}`, "data-testid": usePaginationControlsTestIds.RIGHT_CONTROL, onClick: move("r") }, rightControl && react_1.default.createElement(RightControl, null)),
+        ],
+        checkControlsRequirement,
+    };
+}
+exports.default = usePaginationControls;
+var usePaginationControlsTestIds;
+(function (usePaginationControlsTestIds) {
+    usePaginationControlsTestIds["LEFT_CONTROL"] = "page-l";
+    usePaginationControlsTestIds["RIGHT_CONTROL"] = "page-r";
+})(usePaginationControlsTestIds = exports.usePaginationControlsTestIds || (exports.usePaginationControlsTestIds = {}));
+//# sourceMappingURL=usePaginationControls.js.map

package/dist/hooks/ui/usePaginationControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaginationControls.js","sourceRoot":"","sources":["../../../src/hooks/ui/usePaginationControls.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/ui/usePaginationControls.module.scss

@@ -0,0 +1,16 @@
+.control {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.right {
+  right: 0px;
+}
+
+.left {
+  left: 0px;
+}

package/dist/hooks/useAsyncControl.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-export default function useAsyncControl<E = any, F = {}>(functionsToWrap?: F): {
+import { Primitive } from "type-fest";
+export default function useAsyncControl<E = any, F extends {
+    [f: string]: ((...args: any[]) => Promise<any>) | Object | Primitive;
+} = {}>(functionsToWrap?: F): {
     process: (asyncFn: () => Promise<any>) => Promise<any>;
     loading: boolean;
     error: Error | E | undefined;