@olenbetong/synergi-react 0.6.7

package/es/PageBanner/index.css

@@ -0,0 +1 @@
+.ObPageBanner-root{background-color:#116069;background-color:var(--brand-dark);box-shadow:0px 8px 8px rgba(0,0,0,.2);color:#fff}.ObPageBanner-root a{color:#b3d5e6}.ObPageBanner-inner{display:flex;align-items:center;flex-direction:column}@media screen and (min-width: 768px){.ObPageBanner-inner{align-items:flex-start;flex-direction:row}}.ObPageBanner-plantTitle{font-size:2rem}@media screen and (min-width: 992px){.ObPageBanner-plantTitle{font-size:3rem}}.ObPageBanner-bannerImage{align-self:stretch;background-color:#ddd;display:inline-block;height:20vh;object-fit:cover;object-position:center center;width:100%}@media screen and (min-width: 576px){.ObPageBanner-bannerImage{align-self:center;margin:0;margin-right:1rem;border:.4rem solid #fff;border-radius:50%;height:150px;width:150px}}@media screen and (min-width: 992px){.ObPageBanner-bannerImage{height:250px;width:250px}}.ObPageBanner-bannerTitle{margin-bottom:1rem;margin-top:1rem;font-size:2rem}@media screen and (min-width: 768px){.ObPageBanner-bannerTitle{margin-top:0}}@media screen and (min-width: 992px){.ObPageBanner-bannerTitle{font-size:3rem}}.ObPageBanner-tabList.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1000}.ObPageBanner-tabListInner{overflow-x:auto;scrollbar-width:thin;white-space:nowrap}.ObPageBanner-tab{border-bottom:.25rem solid rgba(0,0,0,0);display:inline-block;margin-top:.5rem;min-width:8rem;padding:.5rem 1rem;text-align:center;text-transform:capitalize}.ObPageBanner-tab.active{border-color:#fff}

package/es/ProgressBar/index.css

@@ -0,0 +1 @@
+.ObProgressBar-root{height:1.5em;width:100%;appearance:none;-webkit-appearance:none;background-color:#f5f5f5;border:none;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset;color:#4169e1;position:relative}.ObProgressBar-root::-webkit-progress-bar{background-color:#f5f5f5;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset}.ObProgressBar-root::-webkit-progress-value{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary, hsl(186deg, 72%, 24%)), var(--brand-light, hsl(186deg, 72%, 37%)));background-image:-webkit-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-webkit-linear-gradient(left, var(--brand-primary), hsl(186deg, 72%, 24%), var(--brand-light, hsl(186deg, 72%, 37%)));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;position:relative;transition:width .5s ease-out}.ObProgressBar-root::-webkit-progress-value:after{background-color:#fff;content:"";border-radius:100%;height:5px;position:absolute;right:7px;top:7px;width:5px}.ObProgressBar-root::-moz-progress-bar{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary), var(--brand-light));background-image:-moz-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-moz-linear-gradient(left, var(--brand-primary), var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;transition:width .5s ease-out}

package/es/Sidebar/index.css

@@ -0,0 +1 @@
+.ObSidebar-root{position:fixed;bottom:0;left:0;top:0;z-index:2;background-color:#fff;transform:translateX(-100%);transition:transform .2s ease-out;will-change:transform;overflow-y:auto}.ObSidebar-root.Ob-right{left:unset;right:0;transform:translateX(100%)}.ObSidebar-root.Ob-open{transform:translateX(0)}.ObSidebar-root.ObSidebar-shadow{box-shadow:2px 2px 4px rgba(0,0,0,.15)}.ObSidebar-root.ObSidebar-shadow.Ob-right{box-shadow:-2px 2px 4px rgba(0,0,0,.15)}.ObSidebar-overlay{position:fixed;bottom:0;left:0;right:0;top:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility .3s ease-out;background-color:rgba(0,0,0,.3)}.ObSidebar-overlay.Ob-open{opacity:1;visibility:visible}

package/es/Spinner/index.css

@@ -0,0 +1 @@
+.ObSpinner-root{display:inline-block}.ObSpinner-fullPage{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw}.ObSpinner-spinner{display:inline-block;height:.75em;position:relative;width:2.5em}.ObSpinner-bullet{animation-timing-function:cubic-bezier(0, 1, 1, 0);background:#666;border-radius:50%;height:.5em;position:absolute;top:.2rem;width:.5em}.ObSpinner-bullet:nth-child(1){animation:scaleAnimation .6s infinite ease-in-out;left:.25em}.ObSpinner-bullet:nth-child(2){animation:translateAnimation .6s infinite ease-in-out;left:.25em}.ObSpinner-bullet:nth-child(3){animation:translateAnimation .6s infinite ease-in-out;left:1.2em}.ObSpinner-bullet:nth-child(4){animation:scaleAnimation .6s infinite ease-in-out reverse;left:2em}@keyframes scaleAnimation{from{transform:scale(0)}to{transform:scale(1)}}@keyframes translateAnimation{from{transform:translate(0, 0)}to{transform:translate(0.825em, 0)}}

package/es/SplitContainer/index.css

@@ -0,0 +1 @@
+.😖{display:initial}.ObSplitContainer-root{display:flex;flex-direction:column;height:100%;width:100%}.ObSplitContainer-root.horizontal{flex-direction:row}.ObSplitContainer-panel{overflow:hidden}.ObSplitContainer-divider{flex:0 0 .5rem;background-color:rgba(0,0,0,0);line-height:.75;cursor:ns-resize}.ObSplitContainer-divider:focus{background-color:rgba(0,0,0,.3)}.ObSplitContainer-divider::before{content:"•••";display:block;width:100%;text-align:center}.ObSplitContainer-root.horizontal .ObSplitContainer-divider{cursor:ew-resize}

package/es/ValueToggle/index.css

@@ -0,0 +1 @@
+.ObValueToggle-root{display:flex;align-items:center}.ObValueToggle-option{margin-bottom:0}.ObValueToggle-label{cursor:pointer;font-size:.8em;margin:0 .2em;padding:.3em .5em;text-transform:uppercase}.ObValueToggle-label:hover{background:#ccc}.ObValueToggle-input:checked+.ObValueToggle-label{--color-bg: var(--brand-dark);background-color:#666;background-color:var(--color-bg);cursor:default;color:#fff}.ObValueToggle-input:checked:focus-within+.ObValueToggle-label{--color-bg: var(--brand-light)}.ObValueToggle-input:checked:hover+.ObValueToggle-label{background-color:#666;background-color:var(--color-bg)}.ObValueToggle-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}

package/es/appframe-react/src/useDebounce.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns a debounced version of the given value.
+ *
+ * @param value
+ * @param delay
+ * @returns
+ */
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/es/appframe-react/src/useDebounce.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+/**
+ * Returns a debounced version of the given value.
+ *
+ * @param value
+ * @param delay
+ * @returns
+ */
+export function useDebounce(value, delay = 300) {
+    let [debouncedValue, setValue] = useState(value);
+    useEffect(() => {
+        let timeout = setTimeout(() => setValue(value), delay);
+        return () => clearTimeout(timeout);
+    }, [delay, value]);
+    return debouncedValue;
+}

package/es/index.css

@@ -0,0 +1 @@
+.ObCheckbox-root{--check-width: 2rem;--bg-color: var(--brand-dark, rgba(42, 65, 50, 0.5));--bg-color-hover: var(--brand-primary, rgba(42, 65, 50, 0.8));--bg-color-selected: var(--brand-light);display:inline-block;height:var(--check-width);margin-bottom:0}.ObCheckbox-root:focus-within .ObCheckbox-box{border:.1rem solid #000}.ObCheckbox-box{position:relative;background:var(--bg-color);transition:background 300ms ease;overflow:hidden;border-radius:calc(var(--check-width)/15);height:var(--check-width);width:var(--check-width)}.ObCheckbox-box:hover{background:var(--bg-color-hover)}.ObCheckbox-label{position:relative;margin-bottom:0;overflow:hidden}.ObCheckbox-label:focus{outline:none}.ObCheckbox-mark{color:#fff;display:inline-block;font-size:calc(var(--check-width)*.4);left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition:all 300ms ease-in-out;transition-delay:0ms;transform:translate(-50%, -50%) scale(6)}.ObCheckbox-input{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.ObCheckbox-input:focus{outline:none}.check_Label{margin-bottom:0;flex-grow:1}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label{animation:animOn 800ms 1 forwards}.ObCheckbox-input:checked:not(:disabled)+.ObCheckbox-label .ObCheckbox-box{background:var(--bg-color-selected)}.ObCheckbox-input:checked+.ObCheckbox-label .ObCheckbox-box .ObCheckbox-mark{transform:translate(-50%, -50%) scale(1);transition-delay:200ms;opacity:1}.check_Disabled{--bg-color: rgba(150, 150, 150, 0.5);--bg-color-hover: var(--bg-color)}.ObCheckbox-root.Ob-disabled .ObCheckbox-box{cursor:not-allowed}@keyframes animOn{40%{transform:scaleY(0.4) scaleX(2)}50%{transform:scaleY(1.2) scaleX(0.6)}60%{transform:scaleY(0.8) scaleX(1.4)}70%{transform:scaleY(1.1) scaleX(0.9)}100%{transform:scaleY(1) scaleX(1)}}.ObColorCard-root{--bg-color-border: black;--bg-color-main: white;--bg-size: 0.75rem;--card-color: rgb(0, 0, 0);align-items:stretch;background-image:linear-gradient(to right, hsl(186deg, 72%, 24%), hsl(186deg, 72%, 24%) 0.75rem, white 0.75rem, white);background-image:linear-gradient(to right, var(--bg-color-border), var(--bg-color-border) var(--bg-size), var(--bg-color-main) var(--bg-size), var(--bg-color-main));border-radius:.25rem;box-shadow:0 1px 12px rgba(0,0,0,.15),0 1px 6px rgba(0,0,0,.25);color:#666;cursor:pointer;display:flex;font-family:"Variable Bahnschrift","Bahnschrift","Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;min-height:10rem;overflow:hidden;transition:all ease-in-out 300ms}.ObColorCard-root:nth-of-type(5n + 1){--bg-color-border: rgb(178, 108, 190)}.ObColorCard-root:nth-of-type(5n + 2){--bg-color-border: rgb(79, 164, 61)}.ObColorCard-root:nth-of-type(5n + 3){--bg-color-border: rgb(246, 170, 23)}.ObColorCard-root:nth-of-type(5n + 4){--bg-color-border: rgb(218, 93, 83)}.ObColorCard-root:nth-of-type(5n + 5){--bg-color-border: rgb(23, 162, 184)}.ObColorCard-root:hover,.ObColorCard-root:focus{--bg-color-main: #f5f5f5;box-shadow:0 3px 18px rgba(0,0,0,.15),0 3px 12px rgba(0,0,0,.25);color:#666;text-decoration:none}@media screen and (min-width: 48rem){.ObColorCard-root{font-size:1.2rem}}.ObColorCard-column{display:flex;flex:1 1 100%;flex-direction:column;justify-content:space-between;margin:1rem 0;overflow:hidden;padding:.5rem 1.5rem .5rem 1rem;text-overflow:ellipsis}.ObColorCard-column:first-child{margin-left:.75rem;margin-left:var(--bg-size)}.ObColorCard-column.ObColorCard-minor{border-right:1px solid #e3e3e3;flex:0 0 4rem;transition:margin ease-in-out 300ms}@media screen and (min-width: 48rem){.ObColorCard-column.ObColorCard-minor{flex:0 0 8rem}}.ObColorCard-detailLabel{color:#ccc;font-size:.8rem;text-transform:uppercase}.ObColorCard-detail:not(:last-child){margin-right:1.5rem}.ObColorCard-detail.ObColorCard-primary,.ObColorCard-detail.ObColorCard-primary .ObColorCard-detailValue{font-size:1.25rem;font-weight:300}.ObColorCard-detail.ObColorCard-primary .ObColorCard-detailValue{color:unset}@media screen and (min-width: 48rem){.ObColorCard-detail{font-size:1rem}}.ObColorCard-detailValue{color:#999}.ObColorCard-label{position:relative;padding-left:1.5rem}.ObColorCard-label:not(:last-child){margin-bottom:1rem}.ObColorCard-label:not(:last-child)::after{content:"";position:absolute;width:.2rem;height:calc(100% + 1rem);border-left:.2rem dotted #666;left:.25rem;top:.5rem;z-index:0}.ObColorCard-label::before{background:#fff;border:.2rem solid #116069;border:.2rem solid var(--bg-color-border);border-radius:50%;content:"";display:block;height:.75rem;left:0;position:absolute;top:.3rem;width:.75rem;z-index:1}.ObDateNavigator-icon{display:inline-block}.ObDateNavigator-icon svg{width:.625em;position:relative;top:-1px}.ObDateNavigator-root{background-color:#f3f4f7;background-color:var(--block-header-color-bg);display:flex;font-size:1rem}.ObDateNavigator-arrow{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-appearance:button;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:flex;align-items:center;flex:0 0 3rem;justify-content:center;height:3rem;cursor:pointer;text-align:center}.ObDateNavigator-arrow::-moz-focus-inner{border:0;padding:0}.ObDateNavigator-arrow:hover{background-color:#e3e3e3;background-color:var(--block-header-button-hover)}.ObDateNavigator-arrowLeft{border-right:1px solid #ddd;order:1}.ObDateNavigator-arrowRight{border-left:1px solid #ddd;order:3}.ObDateNavigator-date{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;order:2;height:3rem;text-align:center}.ObLinkedList-root{list-style-type:none;margin-left:0;padding-left:0}.ObLinkedList-item{display:flex;align-items:center;flex-direction:row}.ObLinkedList-leftColumn{flex:1 1 4em;font-size:.75em;padding:0 1em;text-align:center}.ObLinkedList-rightColumn{flex:1 1 100%;padding:1em 1em 1em 1.5em}.ObLinkedList-line{display:flex;align-self:stretch;flex:0 0 .2em;background:#fff;position:relative}.ObLinkedList-bullet{background:#fff;border:1px solid rgba(50,50,50,.25);border-radius:.55em;height:.7em;width:.7em;position:absolute;left:0;top:50%;transform:translate(-0.25em, -50%)}.ObLinkedList-card{background:#fff;border:1px solid;border-color:#e5e6e9 #dfe0e4 #d0d1d5;border-radius:.1875em;color:inherit;cursor:pointer;flex:100% 1 1;position:relative}.ObLinkedList-card::before{border-bottom:.5em solid rgba(0,0,0,0);border-right:1em solid #fff;border-top:.5em solid rgba(0,0,0,0);content:" ";filter:drop-shadow(-1px 0px 1px rgba(50, 50, 50, 0.2));height:1em;left:-1em;margin-top:-0.5em;position:absolute;top:50%;width:1em}.ObLinkedList-card:hover{background-color:#edeff3 !important;color:inherit;text-decoration:inherit}.ObLinkedList-card:hover::before{border-right-color:#edeff3 !important}.ObPageBanner-root{background-color:#116069;background-color:var(--brand-dark);box-shadow:0px 8px 8px rgba(0,0,0,.2);color:#fff}.ObPageBanner-root a{color:#b3d5e6}.ObPageBanner-inner{display:flex;align-items:center;flex-direction:column}@media screen and (min-width: 768px){.ObPageBanner-inner{align-items:flex-start;flex-direction:row}}.ObPageBanner-plantTitle{font-size:2rem}@media screen and (min-width: 992px){.ObPageBanner-plantTitle{font-size:3rem}}.ObPageBanner-bannerImage{align-self:stretch;background-color:#ddd;display:inline-block;height:20vh;object-fit:cover;object-position:center center;width:100%}@media screen and (min-width: 576px){.ObPageBanner-bannerImage{align-self:center;margin:0;margin-right:1rem;border:.4rem solid #fff;border-radius:50%;height:150px;width:150px}}@media screen and (min-width: 992px){.ObPageBanner-bannerImage{height:250px;width:250px}}.ObPageBanner-bannerTitle{margin-bottom:1rem;margin-top:1rem;font-size:2rem}@media screen and (min-width: 768px){.ObPageBanner-bannerTitle{margin-top:0}}@media screen and (min-width: 992px){.ObPageBanner-bannerTitle{font-size:3rem}}.ObPageBanner-tabList.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1000}.ObPageBanner-tabListInner{overflow-x:auto;scrollbar-width:thin;white-space:nowrap}.ObPageBanner-tab{border-bottom:.25rem solid rgba(0,0,0,0);display:inline-block;margin-top:.5rem;min-width:8rem;padding:.5rem 1rem;text-align:center;text-transform:capitalize}.ObPageBanner-tab.active{border-color:#fff}.ObProgressBar-root{height:1.5em;width:100%;appearance:none;-webkit-appearance:none;background-color:#f5f5f5;border:none;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset;color:#4169e1;position:relative}.ObProgressBar-root::-webkit-progress-bar{background-color:#f5f5f5;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.2) inset}.ObProgressBar-root::-webkit-progress-value{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary, hsl(186deg, 72%, 24%)), var(--brand-light, hsl(186deg, 72%, 37%)));background-image:-webkit-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-webkit-linear-gradient(left, var(--brand-primary), hsl(186deg, 72%, 24%), var(--brand-light, hsl(186deg, 72%, 37%)));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;position:relative;transition:width .5s ease-out}.ObProgressBar-root::-webkit-progress-value:after{background-color:#fff;content:"";border-radius:100%;height:5px;position:absolute;right:7px;top:7px;width:5px}.ObProgressBar-root::-moz-progress-bar{background-image:linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),linear-gradient(left, var(--brand-primary), var(--brand-light));background-image:-moz-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),-moz-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),-moz-linear-gradient(left, var(--brand-primary), var(--brand-light));background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;transition:width .5s ease-out}.ObSidebar-root{position:fixed;bottom:0;left:0;top:0;z-index:2;background-color:#fff;transform:translateX(-100%);transition:transform .2s ease-out;will-change:transform;overflow-y:auto}.ObSidebar-root.Ob-right{left:unset;right:0;transform:translateX(100%)}.ObSidebar-root.Ob-open{transform:translateX(0)}.ObSidebar-root.ObSidebar-shadow{box-shadow:2px 2px 4px rgba(0,0,0,.15)}.ObSidebar-root.ObSidebar-shadow.Ob-right{box-shadow:-2px 2px 4px rgba(0,0,0,.15)}.ObSidebar-overlay{position:fixed;bottom:0;left:0;right:0;top:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility .3s ease-out;background-color:rgba(0,0,0,.3)}.ObSidebar-overlay.Ob-open{opacity:1;visibility:visible}.😖{display:initial}.ObSplitContainer-root{display:flex;flex-direction:column;height:100%;width:100%}.ObSplitContainer-root.horizontal{flex-direction:row}.ObSplitContainer-panel{overflow:hidden}.ObSplitContainer-divider{flex:0 0 .5rem;background-color:rgba(0,0,0,0);line-height:.75;cursor:ns-resize}.ObSplitContainer-divider:focus{background-color:rgba(0,0,0,.3)}.ObSplitContainer-divider::before{content:"•••";display:block;width:100%;text-align:center}.ObSplitContainer-root.horizontal .ObSplitContainer-divider{cursor:ew-resize}.ObValueToggle-root{display:flex;align-items:center}.ObValueToggle-option{margin-bottom:0}.ObValueToggle-label{cursor:pointer;font-size:.8em;margin:0 .2em;padding:.3em .5em;text-transform:uppercase}.ObValueToggle-label:hover{background:#ccc}.ObValueToggle-input:checked+.ObValueToggle-label{--color-bg: var(--brand-dark);background-color:#666;background-color:var(--color-bg);cursor:default;color:#fff}.ObValueToggle-input:checked:focus-within+.ObValueToggle-label{--color-bg: var(--brand-light)}.ObValueToggle-input:checked:hover+.ObValueToggle-label{background-color:#666;background-color:var(--color-bg)}.ObValueToggle-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}

package/es/synergi-react/src/Checkbox/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import "./index.css";
+export declare type CheckboxProps = React.RefAttributes<HTMLInputElement> & Omit<React.HTMLProps<HTMLInputElement>, "value"> & {
+    className?: string;
+    id?: string;
+    title?: string;
+    value?: boolean;
+};
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<CheckboxProps, "value" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import("react").RefAttributes<HTMLInputElement>>;

package/es/synergi-react/src/Checkbox/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./index.css";
+import clsx from "clsx";
+import { forwardRef, useEffect, useId, useRef } from "react";
+function Mark(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", ...props, children: _jsx("path", { d: "M20.285 2L9 13.567 3.714 8.556 0 12.272 9 21 24 5.715z", fill: "currentColor" }) }));
+}
+export const Checkbox = forwardRef(function Checkbox({ className, disabled = false, id, onChange = () => null, title, value, ...other }, ref) {
+    const inputId = useId() + (id ?? "");
+    const input = useRef(null);
+    useEffect(() => {
+        if (typeof ref === "function") {
+            ref(input.current);
+        }
+        else if (ref) {
+            ref.current = input.current;
+        }
+    }, []);
+    function handleClick() {
+        let elem = input.current;
+        if (elem) {
+            elem.focus();
+            elem.click();
+        }
+    }
+    function handleInputChanged(evt) {
+        if (!disabled) {
+            onChange(evt);
+        }
+    }
+    function handleKeyDown(evt) {
+        if (evt.nativeEvent) {
+            const { nativeEvent } = evt;
+            if (nativeEvent.key === " ") {
+                nativeEvent.preventDefault();
+                input.current?.click();
+            }
+        }
+    }
+    return (_jsxs("div", { className: clsx("ObCheckbox-root", disabled && "Ob-disabled", className), title: title, children: [_jsx("input", { className: "ObCheckbox-input", id: inputId, type: "checkbox", onChange: handleInputChanged, checked: value, disabled: disabled, ref: input, ...other }), _jsx("label", { htmlFor: `#${inputId}`, className: "ObCheckbox-label", onKeyDown: handleKeyDown, onClick: handleClick, children: _jsx("div", { className: "ObCheckbox-box", children: _jsx(Mark, { className: "ObCheckbox-mark" }) }) })] }));
+});

package/es/synergi-react/src/ColorCard/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import "./index.css";
+export declare function ColorCard({ as: Component, children, className, href, ...other }: Pick<React.HTMLAttributes<HTMLDivElement>, "id" | "className" | "children"> & {
+    as?: "a" | "div" | "button" | "span" | "section" | "article";
+    href?: string;
+}): JSX.Element;
+export declare function CardColumn({ children, className, minor, ...other }: React.HTMLAttributes<HTMLDivElement> & {
+    minor?: boolean;
+}): JSX.Element;
+export declare function CardDetail({ children, className, label, primary, ...other }: React.HTMLAttributes<HTMLDivElement> & {
+    label?: React.ReactNode;
+    primary?: boolean;
+}): JSX.Element;
+export declare function CardLabel({ children, className, ...other }: React.HTMLAttributes<HTMLDivElement>): JSX.Element;

package/es/synergi-react/src/ColorCard/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./index.css";
+import clsx from "clsx";
+export function ColorCard({ as: Component, children, className, href, ...other }) {
+    const BaseElement = Component ? Component : href ? "a" : "div";
+    return (_jsx(BaseElement, { className: clsx("ObColorCard-root", className), href: href, ...other, children: children }));
+}
+export function CardColumn({ children, className, minor, ...other }) {
+    return (_jsx("div", { className: clsx("ObColorCard-column", minor && "ObColorCard-minor", className), ...other, children: children }));
+}
+export function CardDetail({ children, className, label, primary, ...other }) {
+    return (_jsxs("div", { className: clsx("ObColorCard-detail", primary && "ObColorCard-primary", className), ...other, children: [label && _jsx("div", { className: "ObColorCard-detailLabel", children: label }), _jsx("div", { className: "ObColorCard-detailValue", children: children })] }));
+}
+export function CardLabel({ children, className, ...other }) {
+    return (_jsx("div", { className: clsx("ObColorCard-label", className), ...other, children: children }));
+}

package/es/synergi-react/src/DateNavigator/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import "./index.css";
+export declare function DateNavigator({ date: dateProp, onChange }: {
+    date?: Date;
+    onChange?: (date: Date) => void;
+}): JSX.Element;

package/es/synergi-react/src/DateNavigator/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./index.css";
+import clsx from "clsx";
+import { useState } from "react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+function getUiCulture() {
+    return af?.userSession?.culture ?? "default";
+}
+function Arrow(props) {
+    const { direction, ...rest } = props;
+    return (_jsx("button", { className: clsx("ObDateNavigator-arrow", direction === "left" ? "ObDateNavigator-arrowLeft" : "ObDateNavigator-arrowRight"), ...rest, children: _jsx("span", { className: "ObDateNavigator-icon", children: direction === "left" ? (_jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 320 512", children: _jsx("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" }) })) : (_jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", viewBox: "0 0 320 512", children: _jsx("path", { fill: "currentColor", d: "M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" }) })) }) }));
+}
+const formatter = new Intl.DateTimeFormat(getUiCulture(), {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    timeZone: "utc"
+});
+const today = new Date();
+const todayUtc = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
+const oneDay = 24 * 60 * 60 * 1000;
+export function DateNavigator({ date: dateProp, onChange }) {
+    let [internalDate, setInternalDate] = useState(new Date());
+    const date = dateProp ?? internalDate;
+    const dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+    let dateValue = new Date(dateUtc);
+    let text = formatter.format(dateValue);
+    let altText;
+    if (todayUtc === dateUtc) {
+        altText = getLocalizedString("Today");
+    }
+    else if (todayUtc === dateUtc + oneDay) {
+        altText = getLocalizedString("Yesterday");
+    }
+    else if (todayUtc === dateUtc - oneDay) {
+        altText = getLocalizedString("Tomorrow");
+    }
+    if (altText) {
+        text = `${altText}, ${text}`;
+    }
+    function handleDateChanged(date) {
+        if (typeof onChange === "function") {
+            onChange(date);
+        }
+        else {
+            setInternalDate(date);
+        }
+    }
+    return (_jsxs("div", { className: "ObDateNavigator-root", children: [_jsx(Arrow, { direction: "left", onClick: () => handleDateChanged(new Date(dateUtc - oneDay)) }), _jsx("div", { className: "ObDateNavigator-date", children: text }), _jsx(Arrow, { direction: "right", onClick: () => handleDateChanged(new Date(dateUtc + oneDay)) })] }));
+}

package/es/synergi-react/src/LinkedCardList/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import "./index.css";
+export declare function List({ children, className, ...other }: React.HTMLProps<HTMLUListElement>): JSX.Element;
+export declare function ListItem({ children, className, label, ...other }: React.HTMLProps<HTMLLIElement> & {
+    label: React.ReactNode;
+}): JSX.Element;
+export declare function Card({ as, children, className, ...other }: React.HTMLProps<HTMLDivElement> & {
+    as?: any;
+}): JSX.Element;

package/es/synergi-react/src/LinkedCardList/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./index.css";
+import clsx from "clsx";
+export function List({ children, className, ...other }) {
+    return (_jsx("ul", { className: clsx("ObLinkedList-root", className), ...other, children: children }));
+}
+export function ListItem({ children, className, label, ...other }) {
+    return (_jsxs("li", { className: clsx("ObLinkedList-item", className), ...other, children: [label && _jsx("div", { className: "ObLinkedList-leftColumn", children: label }), _jsx("div", { className: "ObLinkedList-line", children: _jsx("div", { className: "ObLinkedList-bullet" }) }), _jsx("div", { className: "ObLinkedList-rightColumn", children: children })] }));
+}
+export function Card({ as, children, className, ...other }) {
+    const Component = as || "div";
+    return (_jsx(Component, { className: clsx("ObLinkedList-card", className), ...other, children: children }));
+}

package/es/synergi-react/src/PageBanner/index.d.ts

@@ -0,0 +1,27 @@
+import "./index.css";
+import React from "react";
+export declare type PageBannerProps = React.HTMLProps<HTMLDivElement> & {
+    as?: "header" | "section" | "div";
+};
+export declare function PageBanner({ as, className, children, ...other }: PageBannerProps): JSX.Element;
+export declare type BannerImageProps = React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+export declare const BannerImage: React.ForwardRefExoticComponent<Pick<BannerImageProps, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & React.RefAttributes<HTMLImageElement>>;
+export declare type TabListProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
+    as?: "ul" | "ol" | "nav" | "div" | "span";
+    sticky?: boolean;
+};
+export declare function TabList({ as, className, children, sticky, ...other }: TabListProps): JSX.Element;
+export declare type TabProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
+    active?: boolean;
+    as?: "a" | "li" | "div" | "span";
+};
+export declare function Tab({ active, as, className, children, ...other }: TabProps): JSX.Element;
+export declare type TitleProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span" | "p";
+};
+export declare function Title({ as, className, children, ...other }: {
+    [x: string]: any;
+    as: any;
+    className: any;
+    children: any;
+}): JSX.Element;

package/es/synergi-react/src/PageBanner/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./index.css";
+import clsx from "clsx";
+import React from "react";
+export function PageBanner({ as, className, children, ...other }) {
+    const Component = as ? as : "section";
+    return (_jsx(Component, { className: clsx("ObPageBanner-root", className), ...other, children: _jsx("div", { className: "container px-0", children: _jsx("div", { className: "ObPageBanner-pageBannerInner", children: children }) }) }));
+}
+export const BannerImage = React.forwardRef(function BannerImage(props, ref) {
+    const { className, ...other } = props;
+    return _jsx("img", { ref: ref, className: clsx("ObPageBanner-bannerImage", className), ...other });
+});
+export function TabList({ as, className, children, sticky, ...other }) {
+    const Component = as ? as : "nav";
+    return (_jsx(Component, { className: clsx("ObPageBanner-pageBanner", "ObPageBanner-tabList", sticky && "sticky", className), ...other, children: _jsx("div", { className: "container px-0", children: _jsx("div", { className: "ObPageBanner-tabListInner", children: children }) }) }));
+}
+export function Tab({ active, as, className, children, ...other }) {
+    const Component = as ? as : "a";
+    return (_jsx(Component, { className: clsx("ObPageBanner-tab", active && "active", className), ...other, children: children }));
+}
+export function Title({ as, className, children, ...other }) {
+    const Component = as ? as : "h1";
+    return (_jsx(Component, { className: clsx("ObPageBanner-bannerTitle", className), ...other, children: children }));
+}

package/es/synergi-react/src/Portal/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function Portal({ children, root, type }: {
+    children: any;
+    root: any;
+    type?: string | undefined;
+}): JSX.Element;

package/es/synergi-react/src/Portal/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+function useForceUpdate() {
+    const [, setVal] = useState(false);
+    return () => setVal(val => !val);
+}
+export function Portal({ children, root, type = "div" }) {
+    const forceUpdate = useForceUpdate();
+    const mountNode = useRef(null);
+    const portalNode = useRef(null);
+    useEffect(() => {
+        const ownerDocument = mountNode.current?.ownerDocument;
+        let portalElem = portalNode.current;
+        if (ownerDocument && portalElem) {
+            let parent = root ? ownerDocument.querySelector(root) || ownerDocument.body : ownerDocument.body;
+            const node = ownerDocument.createElement(type);
+            portalElem = node;
+            parent.appendChild(node);
+            forceUpdate();
+            return () => {
+                parent.removeChild(node);
+            };
+        }
+    }, []);
+    if (!portalNode.current) {
+        return _jsx("div", { ref: mountNode });
+    }
+    else {
+        return createPortal(children, portalNode.current);
+    }
+}

package/es/synergi-react/src/ProgressBar/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import "./index.css";
+export declare type ProgressBarProps = React.HTMLProps<HTMLProgressElement>;
+export declare const ProgressBar: import("react").ForwardRefExoticComponent<Pick<ProgressBarProps, "value" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import("react").RefAttributes<HTMLProgressElement>>;

package/es/synergi-react/src/ProgressBar/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./index.css";
+import clsx from "clsx";
+import { forwardRef } from "react";
+export const ProgressBar = forwardRef(function ProgressBar({ className, ...props }, ref) {
+    return _jsx("progress", { className: clsx("ObProgressBar-root", className), ...props, ref: ref });
+});

package/es/synergi-react/src/Sidebar/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import "./index.css";
+export declare type SidebarProps = React.HTMLProps<HTMLDivElement> & {
+    open?: boolean;
+    onClose?: () => void;
+    overlayProps: React.HTMLProps<HTMLDivElement>;
+    pullRight?: boolean;
+    shadow?: boolean;
+};
+export declare function Sidebar(props: SidebarProps): JSX.Element;

package/es/synergi-react/src/Sidebar/index.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "./index.css";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+export function Sidebar(props) {
+    const { children, className, open = false, onClose = () => { }, overlayProps = {}, pullRight = false, shadow = true, ...other } = props;
+    const [hidden, setHidden] = useState(!open);
+    const sidebar = useRef(null);
+    const prevFocus = useRef(null);
+    function closeSidebar() {
+        if (open && typeof onClose === "function") {
+            onClose();
+        }
+    }
+    useEffect(() => {
+        let element = sidebar.current;
+        if (open) {
+            setHidden(false);
+        }
+        function toggleHiddenContent() {
+            setHidden(!open);
+        }
+        element?.addEventListener("transitionend", toggleHiddenContent);
+        return () => element?.removeEventListener("transitionend", toggleHiddenContent);
+    }, [open]);
+    useEffect(() => {
+        function handleCloseSidebar(evt) {
+            if (evt.key === "Escape") {
+                evt.stopPropagation();
+                closeSidebar();
+            }
+        }
+        window.addEventListener("keyup", handleCloseSidebar);
+        return () => window.removeEventListener("keyup", handleCloseSidebar);
+    }, [open, onClose]);
+    useEffect(() => {
+        if (open) {
+            prevFocus.current = document.activeElement;
+            const firstFocusable = sidebar.current?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            if (firstFocusable) {
+                firstFocusable.focus();
+            }
+        }
+        else if (prevFocus.current) {
+            prevFocus.current.focus();
+            prevFocus.current = null;
+        }
+        let prevFocusElem = prevFocus.current;
+        return () => {
+            if (open && prevFocusElem) {
+                prevFocusElem.focus();
+            }
+        };
+    }, [open]);
+    const { className: overlayClassName, ...overlayOther } = overlayProps;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: clsx("ObSidebar-root", open && "Ob-open", pullRight && "Ob-right", shadow && "ObSidebar-shadow", className), ref: sidebar, tabIndex: -1, ...other, children: (open || !hidden) && children }), _jsx("div", { role: "presentation", tabIndex: -1, className: clsx("ObSidebar-overlay", open && "Ob-open", overlayClassName), onClick: closeSidebar, ...overlayOther })] }));
+}

package/es/synergi-react/src/Spinner/index.d.ts

@@ -0,0 +1,10 @@
+import "./index.css";
+import React from "react";
+export declare type SpinnerProps = React.HTMLProps<HTMLDivElement> & {
+    fullPage?: boolean;
+};
+export declare function Spinner({ className, fullPage, ...rest }: {
+    [x: string]: any;
+    className?: string | undefined;
+    fullPage?: boolean | undefined;
+}): JSX.Element;

package/es/synergi-react/src/Spinner/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./index.css";
+import clsx from "clsx";
+export function Spinner({ className = "", fullPage = false, ...rest }) {
+    return (_jsx("div", { className: clsx(className, fullPage ? "ObSpinner-fullPage" : "ObSpinner-wrapper"), ...rest, children: _jsxs("div", { className: "ObSpinner-spinner", children: [_jsx("div", { className: "ObSpinner-bullet" }), _jsx("div", { className: "ObSpinner-bullet" }), _jsx("div", { className: "ObSpinner-bullet" }), _jsx("div", { className: "ObSpinner-bullet" })] }) }));
+}

package/es/synergi-react/src/SplitContainer/index.d.ts

@@ -0,0 +1,20 @@
+import "./index.css";
+import React from "react";
+export declare type SplitContainerProps = {
+    className?: string;
+    panelClassName?: string;
+    children: React.ReactNode[];
+    direction?: "horizontal" | "vertical";
+    fixedPanel?: 1 | 2;
+    defaultFixedSize?: number;
+    /**
+     * When the fixed size is persisted, changing the layoutVersion will force clients
+     * to reset to the default value.
+     */
+    layoutVersion?: string | number;
+    /**
+     * If you set an id, the fixed size will be persisted, and restored after page load
+     */
+    id?: string;
+};
+export declare function SplitContainer({ className, children, direction, fixedPanel, panelClassName, defaultFixedSize, layoutVersion, id, }: SplitContainerProps): JSX.Element;