@onepercentio/one-ui 0.29.0 → 0.29.2

package/dist-ts/components/Select/Select.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import Collapsable from "../Collapsable";
+import Text from "../Text";
+import Styles from "./Select.module.scss";
+import Input from "../Input";
+import Loader from "../Loader";
+import { useOneUIConfig, useOneUIContext, } from "../../context/OneUIProvider";
+import { AnchoredTooltipAlignment, AnchoredTooltipAnchor, } from "../AnchoredTooltip/AnchoredTooltip";
+/**
+ * A dropdown select
+ **/
+function Select({ items, selected, label, onClick, loading, rootClassName = "", dropdownClassName: _drop = "", alignTo = AnchoredTooltipAlignment.CENTER, filter, ...otherProps }) {
+    const { StateIndicator } = useOneUIContext().component.select;
+    const collapsableRef = useRef(null);
+    const _selected = useMemo(() => {
+        return items.find((a) => a.value === selected);
+    }, [selected, items]);
+    const [open, setOpen] = useState(false);
+    const [filterTerm, setFilterTerm] = useState("");
+    const filteredItems = useMemo(() => {
+        if (filter && filterTerm)
+            return items.filter((item) => filter(item, filterTerm));
+        else
+            return items;
+    }, [filterTerm, items]);
+    useEffect(() => {
+        collapsableRef.current.redimension();
+    }, [filteredItems.length]);
+    useLayoutEffect(() => {
+        if (open)
+            setFilterTerm("");
+    }, [open]);
+    const selectClasses = _drop
+        ? {
+            dropdown: _drop,
+        }
+        : useOneUIConfig("component.select.className", {});
+    useEffect(() => {
+        if (open) {
+            const close = () => {
+                setOpen(false);
+            };
+            window.addEventListener("click", close);
+            return () => window.removeEventListener("click", close);
+        }
+    }, [open]);
+    return (_jsx(Collapsable, { title: _jsx(Input, { ...otherProps, className: `${Styles.input} ${selectClasses.input} ${!items.length ? Styles.empty : ""}`, value: _selected
+                ? "labelStr" in _selected
+                    ? _selected.labelStr
+                    : _selected.label
+                : label || "", disabled: true, Icon: _jsx("div", { className: `${Styles.indicator}`, children: loading ? _jsx(Loader, {}) : _jsx(StateIndicator, { open: !!open }) }) }), id: undefined, mode: "float", open: open, onToggleOpen: (open) => {
+            if (items.length)
+                setOpen(open);
+        }, className: `${otherProps.disabled ? "disabled" : ""} ${rootClassName}`, contentClassName: `${Styles.optionsContainer} ${selectClasses.dropdown}`, alignTo: alignTo, ref: collapsableRef, anchorTo: AnchoredTooltipAnchor.BOTTOM, children: _jsxs("div", { className: Styles.items, onClick: (e) => {
+                e.stopPropagation();
+                setOpen(false);
+            }, children: [filter && (_jsx("div", { className: Styles.searchInput, children: _jsx(Input, { onChange: ({ target: { value } }) => setFilterTerm(value), decoration: _jsx("span", { children: "\uD83D\uDD0E\u00A0" }), containerProps: {
+                            onClick: (e) => e.stopPropagation(),
+                        }, border: false, value: filterTerm }) })), filteredItems.map((i) => (_jsx(Text, { type: "caption", className: `${i === _selected
+                        ? `${Styles.selected} ${selectClasses.selectedItem}`
+                        : ""} ${selectClasses.item || ""}`, onClick: () => onClick(i), ...i, children: i.label }, i.value)))] }) }));
+}
+export default Select;
+//# sourceMappingURL=Select.js.map

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

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

package/dist-ts/components/Select/Select.module.scss

@@ -0,0 +1,58 @@
+@import "../../assets/styles/index.scss";
+
+.items > * {
+  cursor: pointer;
+  background: $mainBackgroundColor;
+  padding: 12px 32px;
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+  margin-left: 4px;
+  margin-right: 4px;
+  text-align: left;
+  border-radius: 4px;
+  font-size: 14px;
+  &.selected {
+    background-color: $lightGray;
+  }
+}
+.empty {
+  opacity: 0.3;
+}
+.input {
+  cursor: pointer;
+  input {
+    transition: opacity $fast;
+    padding-right: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+  }
+}
+.indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform $fast;
+  min-height: inherit;
+  transform: rotateX(0deg);
+}
+.open {
+  transform: rotateX(180deg);
+}
+.optionsContainer {
+  margin: 0px 8px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
+}
+.searchInput {
+  position: sticky;
+  top: 0px;
+  > * > span {
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+  }
+  input {
+    margin-bottom: 0px !important;
+  }
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./Select";
+export * from "./Select";

package/dist-ts/components/Select/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Select";
+export * from "./Select";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,cAAc,UAAU,CAAC"}

package/dist-ts/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A skeleton element used to display a content that is loading
+ *
+ * Usually, it is used for paragraph elements, with a specific size
+ * So it's width and height is translated to em units
+ **/
+export default function Skeleton({ width, height, }: {
+    width: number;
+    height?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/Skeleton/Skeleton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Styles from "./Skeleton.module.scss";
+/**
+ * A skeleton element used to display a content that is loading
+ *
+ * Usually, it is used for paragraph elements, with a specific size
+ * So it's width and height is translated to em units
+ **/
+export default function Skeleton({ width, height = 1, }) {
+    return (_jsx("span", { className: Styles.root, style: {
+            "--biggest-unit": `${Math.max(width, height) * 2}em`,
+            width: `${width}em`,
+            height: `${height}em`,
+        } }));
+}
+//# sourceMappingURL=Skeleton.js.map

package/dist-ts/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C;;;;;IAKI;AACJ,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,KAAK,EACL,MAAM,GAAG,CAAC,GAIX;IACC,OAAO,CACL,eACE,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EACH;YACE,gBAAgB,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI;YACpD,KAAK,EAAE,GAAG,KAAK,IAAI;YACnB,MAAM,EAAE,GAAG,MAAM,IAAI;SACf,GAEV,CACH,CAAC;AACJ,CAAC"}

package/dist-ts/components/Skeleton/Skeleton.module.scss

@@ -0,0 +1,21 @@
+@import "../../assets/styles";
+
+.root {
+  background: linear-gradient(10deg, #0000 10%, #0006, #0000 80%);
+  background-size: var(--biggest-unit) var(--biggest-unit);
+  animation-name: moving;
+  animation-duration: $slow;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  border-radius: 0.4em;
+  display: inline-block;
+}
+
+@keyframes moving {
+  0% {
+    background-position: 0em 0em;
+  }
+  100% {
+    background-position: 0em var(--biggest-unit);
+  }
+}

package/dist-ts/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Skeleton";
+export * from "./Skeleton";

package/dist-ts/components/Skeleton/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Skeleton";
+export * from "./Skeleton";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,cAAc,YAAY,CAAC"}

package/dist-ts/components/Spacing/Spacing.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A component to inject some spacing between component when required
+ **/
+export default function Spacing({ size, }: {
+    size: OnepercentUtility.UIElements.SpacingVariants | "stretch";
+}): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/Spacing/Spacing.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Styles from "./Spacing.module.scss";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+/**
+ * A component to inject some spacing between component when required
+ **/
+export default function Spacing({ size, }) {
+    const spacingClasses = useOneUIConfig("component.spacing.variants", {
+        large: Styles.spacing_large,
+        small: Styles.spacing_small,
+    });
+    const cls = useMemo(() => (size === "stretch" ? Styles.spacing_stretch : spacingClasses[size]), [size]);
+    return _jsx("div", { className: `${Styles.spacing} ${cls}` });
+}
+//# sourceMappingURL=Spacing.js.map

package/dist-ts/components/Spacing/Spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.js","sourceRoot":"","sources":["../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAI,GAGL;IACC,MAAM,cAAc,GAAG,cAAc,CAAC,4BAA4B,EAAE;QAClE,KAAK,EAAE,MAAM,CAAC,aAAa;QAC3B,KAAK,EAAE,MAAM,CAAC,aAAa;KAC5B,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,EAC1E,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,OAAO,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,GAAG,EAAE,GAAI,CAAC;AACxD,CAAC"}

package/dist-ts/components/Spacing/Spacing.module.scss

@@ -0,0 +1,13 @@
+.spacing_large {
+  height: 33px;
+}
+.spacing_small {
+  height: 15px;
+}
+.spacing_stretch {
+  flex: 1;
+}
+
+.spacing {
+  display: block;
+}

package/dist-ts/components/Spacing/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Spacing";
+export * from "./Spacing";

package/dist-ts/components/Spacing/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Spacing";
+export * from "./Spacing";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Spacing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Spacing/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,WAAW,CAAC"}

package/dist-ts/components/StaticScroller/StaticScroller.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+/**
+ * Mantains a static content at the start of the container and when scrolled animates it's concealment
+ **/
+declare const StaticScroller: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default StaticScroller;

package/dist-ts/components/StaticScroller/StaticScroller.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef, forwardRef, useLayoutEffect, useMemo, } from "react";
+import { debounce, throttle } from "lodash";
+import Styles from "./StaticScroller.module.scss";
+function _StaticScroller({ children, ...props }, ref) {
+    const rootRef = useMemo(() => {
+        return (ref || createRef());
+    }, [ref]);
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        let latestScroll;
+        const child = el.children[0];
+        const checkIfNeedsToHide = debounce(() => {
+            const direction = el.scrollLeft > latestScroll ? "in" : "out";
+            if (el.scrollLeft < child.clientWidth) {
+                el.scrollTo({
+                    left: direction === "in" ? child.clientWidth : 0,
+                    behavior: "smooth",
+                });
+            }
+            latestScroll = undefined;
+        }, 500);
+        const throtleSetLast = throttle((last) => {
+            latestScroll = last;
+        }, 1000 / 5, {
+            leading: true,
+            trailing: false,
+        });
+        const onScroll = () => {
+            const min = Math.min(el.scrollLeft, child.clientWidth);
+            const opacity = String(1 - min / child.clientWidth);
+            child.style.opacity = opacity;
+            checkIfNeedsToHide();
+            throtleSetLast(el.scrollLeft);
+        };
+        el.addEventListener("scroll", onScroll, {
+            passive: true,
+        });
+        return () => {
+            el.removeEventListener("scroll", onScroll);
+        };
+    }, []);
+    return (_jsx("div", { className: Styles.root, ...props, ref: rootRef, children: children }));
+}
+/**
+ * Mantains a static content at the start of the container and when scrolled animates it's concealment
+ **/
+const StaticScroller = forwardRef(_StaticScroller);
+export default StaticScroller;
+//# sourceMappingURL=StaticScroller.js.map

package/dist-ts/components/StaticScroller/StaticScroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticScroller.js","sourceRoot":"","sources":["../../../src/components/StaticScroller/StaticScroller.tsx"],"names":[],"mappings":";AAAA,OAAc,EAMZ,SAAS,EACT,UAAU,EACV,eAAe,EACf,OAAO,GAER,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAElD,SAAS,eAAe,CACtB,EACE,QAAQ,EACR,GAAG,KAAK,EAGT,EACD,GAAiC;IAEjC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,CACJ,GAAwC,IAAI,SAAS,EAAkB,CACzE,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,OAAO,CAAC,OAAQ,CAAC;QAC5B,IAAI,YAAgC,CAAC;QACrC,MAAM,KAAK,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAmB,CAAC;QAE/C,MAAM,kBAAkB,GAAG,QAAQ,CAAC,GAAG,EAAE;YACvC,MAAM,SAAS,GAAG,EAAE,CAAC,UAAU,GAAG,YAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/D,IAAI,EAAE,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;gBACtC,EAAE,CAAC,QAAQ,CAAC;oBACV,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;oBAChD,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CAAC;YACL,CAAC;YACD,YAAY,GAAG,SAAS,CAAC;QAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;QACR,MAAM,cAAc,GAAG,QAAQ,CAC7B,CAAC,IAAY,EAAE,EAAE;YACf,YAAY,GAAG,IAAI,CAAC;QACtB,CAAC,EACD,IAAI,GAAG,CAAC,EACR;YACE,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,KAAK;SAChB,CACF,CAAC;QACF,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;YACvD,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;YACpD,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YAC9B,kBAAkB,EAAE,CAAC;YACrB,cAAc,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;QAChC,CAAC,CAAC;QACF,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE;YACtC,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,KAAM,KAAK,EAAE,GAAG,EAAE,OAAO,YACjD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED;;IAEI;AACJ,MAAM,cAAc,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;AACnD,eAAe,cAAc,CAAC"}

package/dist-ts/components/StaticScroller/StaticScroller.module.scss

@@ -0,0 +1,14 @@
+.root {
+  display: flex;
+  overflow: auto;
+  > * {
+    flex-shrink: 0;
+  }
+  > :first-child {
+    position: sticky;
+    left: 0;
+  }
+  > :not(:first-child) {
+    z-index: 1;
+  }
+}

package/dist-ts/components/StaticScroller/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./StaticScroller";
+export * from "./StaticScroller";

package/dist-ts/components/StaticScroller/index.js

@@ -0,0 +1,3 @@
+export { default } from "./StaticScroller";
+export * from "./StaticScroller";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/StaticScroller/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/StaticScroller/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,cAAc,kBAAkB,CAAC"}

package/dist-ts/components/Switch/Switch.d.ts

@@ -0,0 +1,10 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+/**
+ * Switchs between states
+ **/
+export default function Switch({ enabled, onToggle, size, disabled, ...props }: {
+    enabled: boolean;
+    onToggle: (newState: boolean) => void;
+    size: number;
+    disabled?: boolean;
+} & Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/Switch/Switch.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Styles from "./Switch.module.scss";
+/**
+ * Switchs between states
+ **/
+export default function Switch({ enabled, onToggle, size, disabled, ...props }) {
+    return (_jsx(_Fragment, { children: _jsxs("div", { style: { fontSize: `${size}px` }, className: `${Styles.root} ${enabled ? Styles.on : ""} ${disabled ? Styles.disabled : ""}`, onClick: () => onToggle(!enabled), ...props, children: [_jsx("div", { className: Styles.toggler }), _jsx("input", { checked: enabled, type: "checkbox" })] }) }));
+}
+//# sourceMappingURL=Switch.js.map

package/dist-ts/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAKA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EAST;IACC,OAAO,CACL,4BACE,eACE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,EAAE,EAChC,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IACnD,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC/B,EAAE,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,KAC7B,KAAK,aAET,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI,EAClC,gBAAO,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,GAAG,IACvC,GACL,CACJ,CAAC;AACJ,CAAC"}

package/dist-ts/components/Switch/Switch.module.scss

@@ -0,0 +1,43 @@
+@use 'sass:math';
+@import "../../assets/styles/variables.scss";
+
+.root {
+  box-sizing: border-box;
+  $height: 1.4em;
+  height: $height;
+  width: 2em + 0.4em;
+  padding: 0.1em;
+  border-radius: math.div($height, 1);
+  border: 0.1em solid $digitalBlue;
+  background-color: white;
+  transition: background-color $fast linear;
+  cursor: pointer;
+
+  input {
+    max-width: 0px;
+    max-height: 0px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+
+  .toggler {
+    height: 1em;
+    width: 1em;
+    background-color: $digitalBlue;
+    border-radius: math.div(1em, 2);
+    transition: transform $fast linear;
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    cursor: initial;
+  }
+  &.on {
+    background-color: $digitalBlue;
+    .toggler {
+      transform: translateX(1em);
+      background-color: white;
+    }
+  }
+}

package/dist-ts/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Switch";
+export * from "./Switch";

package/dist-ts/components/Switch/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Switch";
+export * from "./Switch";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,cAAc,UAAU,CAAC"}

package/dist-ts/components/Table/Table.d.ts

@@ -0,0 +1,19 @@
+export type TableProps<I extends any> = {
+    className?: string;
+    heading: {
+        [K in keyof I]?: string;
+    };
+    order: (keyof I)[];
+    items: (I & {
+        className?: string;
+    })[];
+    paginable?: {
+        currentPage: number;
+        totalItems: number;
+        togglePage: (page: number) => void;
+    };
+};
+/**
+ * A simple table layout
+ **/
+export default function Table<I extends any>({ paginable, heading, order, items, className, }: TableProps<I>): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/Table/Table.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef, } from "react";
+import { useOneUIContext } from "../../context/OneUIProvider";
+import Button from "../Button";
+import Spacing from "../Spacing";
+import UncontrolledTransition from "../UncontrolledTransition";
+import Styles from "./Table.module.scss";
+/**
+ * A simple table layout
+ **/
+export default function Table({ paginable, heading, order, items, className = "", }) {
+    const transitionRef = useRef(null);
+    const { controls: { NextPage = ({ disabled }) => (_jsx(Button, { disabled: disabled, variant: "filled", children: ">" })), PrevPage = ({ disabled }) => (_jsx(Button, { disabled: disabled, variant: "filled", children: "<" })), }, } = useOneUIContext().component.table;
+    const { items: itemsToShow, pages } = useMemo(() => {
+        if (paginable) {
+            const numPages = Math.ceil(paginable.totalItems / 5);
+            return {
+                items: items.slice((paginable.currentPage - 1) * 5, (paginable.currentPage - 1) * 5 + 5),
+                pages: numPages,
+            };
+        }
+        return {
+            items: items,
+        };
+    }, [items, paginable?.currentPage, paginable?.totalItems]);
+    const Wrapper = paginable ? UncontrolledTransition : "div";
+    return (_jsxs(_Fragment, { children: [_jsx(TableContext.Provider, { value: {
+                    itemsToShow,
+                    keys: order,
+                    heading,
+                }, children: _jsx(Wrapper, { className: Styles.transitionContainer, ref: transitionRef, children: _jsx(TableComp, { className: className }, paginable?.currentPage) }) }), paginable && paginable.totalItems > 5 ? (_jsxs(_Fragment, { children: [_jsx(Spacing, { size: "small" }), _jsxs("div", { className: Styles.footer, "data-testid": "controls", children: [_jsx("span", { className: Styles.iterable, onClick: () => {
+                                    if (!(transitionRef.current instanceof HTMLDivElement))
+                                        transitionRef.current.setOrientation("backward");
+                                    paginable.togglePage(paginable.currentPage - 1);
+                                }, children: _jsx(PrevPage, { disabled: paginable.currentPage === 1 }) }), _jsx("span", { className: Styles.paging, children: `${paginable.currentPage}/${pages}` }), _jsx("span", { className: Styles.iterable, onClick: () => {
+                                    if (!(transitionRef.current instanceof HTMLDivElement))
+                                        transitionRef.current.setOrientation("forward");
+                                    paginable.togglePage(paginable.currentPage + 1);
+                                }, children: _jsx(NextPage, { disabled: paginable.currentPage === pages }) })] })] })) : null] }));
+}
+const TableContext = createContext(null);
+function TableComp({ className }) {
+    const { itemsToShow, keys, heading } = useContext(TableContext);
+    return (_jsxs("table", { className: `${Styles.container} ${className}`, children: [_jsx("thead", { children: _jsx("tr", { children: keys.map((key) => (_jsx("th", { children: heading[key] }, String(key)))) }) }), _jsx("tbody", { children: itemsToShow.map((i, index) => (_jsx("tr", { className: i.className, children: keys.map((key) => (_jsx("td", { children: i[key] }, String(key)))) }, String(index)))) })] }));
+}
+//# sourceMappingURL=Table.js.map

package/dist-ts/components/Table/Table.js.map

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

package/dist-ts/components/Table/Table.module.scss

@@ -0,0 +1,76 @@
+@import "../../assets/styles/index.scss";
+
+.transitionContainer {
+  min-height: auto;
+  max-width: 100vw;
+  overflow: auto;
+}
+
+.container {
+  font-family: $mainFontFamily;
+  padding: 0px 4px;
+  width: 100%;
+  position: relative;
+  border-spacing: 0px;
+  th {
+    font-family: 14px;
+    line-height: 28px;
+    text-align: start;
+    font-weight: normal;
+  }
+  td,
+  th {
+    padding: 20px;
+  }
+  tbody tr {
+    background-color: $tableRowBgColor;
+    &:first-child td {
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+      border-top: 1px solid $tableRowBorderColor;
+    }
+    &:last-child td {
+      &:first-child {
+        border-bottom-left-radius: 8px;
+      }
+      &:last-child {
+        border-bottom-right-radius: 8px;
+      }
+    }
+    td {
+      border-bottom: 1px solid $tableRowBorderColor;
+      &:first-child {
+        border-left: 1px solid $tableRowBorderColor;
+      }
+      &:last-child {
+        border-right: 1px solid $tableRowBorderColor;
+      }
+    }
+  }
+}
+.footer {
+  padding: 0px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  --button-min-width: auto;
+  --button-min-height: auto;
+
+  .paging {
+    font-family: $mainFontFamily;
+    color: $digitalBlue;
+    margin: 0px 12px;
+    font-size: 18px;
+  }
+}
+
+.iterable {
+  @include iteractibleElement;
+  &:first-child {
+    margin-left: auto;
+  }
+}

package/dist-ts/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Table";
+export * from "./Table";

package/dist-ts/components/Table/index.js

@@ -0,0 +1,3 @@
+export { default } from "./Table";
+export * from "./Table";
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,27 @@
+import { ReactElement } from "react";
+export declare enum TabType {
+    /** A div that encovers the tab */
+    FULL = 0,
+    /** An underline */
+    UNDERLINE = 1,
+    /** A class is assigned to the selected tab */
+    CLASS = 2
+}
+/**
+ * Show tabs for toggling between options
+ **/
+export default function Tabs<O extends string | number>(props: {
+    options: Readonly<{
+        id: O;
+        label: string | ReactElement;
+    }[]>;
+    selected?: O;
+    onSelect: (option: O) => void;
+    itemClassName?: string;
+    className?: string;
+} & ({
+    type?: Exclude<TabType, TabType.CLASS>;
+} | {
+    type?: Extract<TabType, TabType.CLASS>;
+    selectedClass: string;
+})): import("react/jsx-runtime").JSX.Element;