@geoinsight/react-components 1.1.2 → 1.1.4

package/dist/esm/index.css

@@ -585,6 +585,109 @@ h6 {
   text-decoration: overline;
 }
 
+.input[type="checkbox"] {
+  background: #fbfbfb;
+  border-radius: 2em;
+  padding: 2px;
+}
+
+/* <div class="checkbox-wrapper-7">
+  <input class="tgl tgl-ios" id="cb2-7" type="checkbox"/>
+  <label class="tgl-btn" for="cb2-7">
+</div>
+
+<style>
+  .checkbox-wrapper-7 .tgl {
+    display: none;
+  }
+  .checkbox-wrapper-7 .tgl,
+  .checkbox-wrapper-7 .tgl:after,
+  .checkbox-wrapper-7 .tgl:before,
+  .checkbox-wrapper-7 .tgl *,
+  .checkbox-wrapper-7 .tgl *:after,
+  .checkbox-wrapper-7 .tgl *:before,
+  .checkbox-wrapper-7 .tgl + .tgl-btn {
+    box-sizing: border-box;
+  }
+  .checkbox-wrapper-7 .tgl::-moz-selection,
+  .checkbox-wrapper-7 .tgl:after::-moz-selection,
+  .checkbox-wrapper-7 .tgl:before::-moz-selection,
+  .checkbox-wrapper-7 .tgl *::-moz-selection,
+  .checkbox-wrapper-7 .tgl *:after::-moz-selection,
+  .checkbox-wrapper-7 .tgl *:before::-moz-selection,
+  .checkbox-wrapper-7 .tgl + .tgl-btn::-moz-selection,
+  .checkbox-wrapper-7 .tgl::selection,
+  .checkbox-wrapper-7 .tgl:after::selection,
+  .checkbox-wrapper-7 .tgl:before::selection,
+  .checkbox-wrapper-7 .tgl *::selection,
+  .checkbox-wrapper-7 .tgl *:after::selection,
+  .checkbox-wrapper-7 .tgl *:before::selection,
+  .checkbox-wrapper-7 .tgl + .tgl-btn::selection {
+    background: none;
+  }
+  .checkbox-wrapper-7 .tgl + .tgl-btn {
+    outline: 0;
+    display: block;
+    width: 4em;
+    height: 2em;
+    position: relative;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+  }
+  .checkbox-wrapper-7 .tgl + .tgl-btn:after,
+  .checkbox-wrapper-7 .tgl + .tgl-btn:before {
+    position: relative;
+    display: block;
+    content: "";
+    width: 50%;
+    height: 100%;
+  }
+  .checkbox-wrapper-7 .tgl + .tgl-btn:after {
+    left: 0;
+  }
+  .checkbox-wrapper-7 .tgl + .tgl-btn:before {
+    display: none;
+  }
+  .checkbox-wrapper-7 .tgl:checked + .tgl-btn:after {
+    left: 50%;
+  }
+
+  .checkbox-wrapper-7 .tgl-ios + .tgl-btn {
+    background: #fbfbfb;
+    border-radius: 2em;
+    padding: 2px;
+    transition: all 0.4s ease;
+    border: 1px solid #e8eae9;
+  }
+  .checkbox-wrapper-7 .tgl-ios + .tgl-btn:after {
+    border-radius: 2em;
+    background: #fbfbfb;
+    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
+  }
+  .checkbox-wrapper-7 .tgl-ios + .tgl-btn:hover:after {
+    will-change: padding;
+  }
+  .checkbox-wrapper-7 .tgl-ios + .tgl-btn:active {
+    box-shadow: inset 0 0 0 2em #e8eae9;
+  }
+  .checkbox-wrapper-7 .tgl-ios + .tgl-btn:active:after {
+    padding-right: 0.8em;
+  }
+  .checkbox-wrapper-7 .tgl-ios:checked + .tgl-btn {
+    background: #86d993;
+  }
+  .checkbox-wrapper-7 .tgl-ios:checked + .tgl-btn:active {
+    box-shadow: none;
+  }
+  .checkbox-wrapper-7 .tgl-ios:checked + .tgl-btn:active:after {
+    margin-left: -0.8em;
+  }
+</style> */
+
 .textarea {
   margin-bottom: var(--spacing-8);
   position: relative;
@@ -961,4 +1064,176 @@ h6 {
     min-width: none;
     max-width: 20rem;
   }
-}
+}
+@property --angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.checkbox__header {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.checkbox-subgroup {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+}
+
+.checkbox {
+  align-content: center;
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: var(--color-main-background);
+  border-radius: 1rem;
+  display: flex;
+  justify-content: start;
+  padding: 0.1rem;
+  transform-style: preserve-3d;
+  width: 4rem;
+}
+
+[data-theme="light"] .checkbox:checked {
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary-dark),
+    var(--color-main-background)
+  );
+}
+
+[data-theme="dark"] .checkbox:checked {
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary-darker),
+    var(--color-main-color)
+  );
+}
+
+.checkbox::after {
+  animation: 1s spinout linear;
+  background-image: conic-gradient(
+    from var(--angle),
+    transparent 70%,
+    var(--conic-color-0),
+    var(--conic-color-1),
+    var(--conic-color-2)
+  );
+  background-color: color-mix(
+    in srgb,
+    transparent 20%,
+    var(--color-main-color)
+  );
+  border-radius: 1rem;
+  content: "";
+  height: 1.5rem;
+  left: 50%;
+  padding: 0.2rem;
+  position: absolute;
+  top: 50%;
+  transform: translateZ(-1px);
+  translate: -50% -50%;
+  width: 4rem;
+}
+
+.checkbox:checked::after {
+  animation: 2s spin linear, 2s perc linear;
+  animation-fill-mode: none, forwards;
+  background-color: color-mix(
+    in srgb,
+    transparent var(--perc),
+    var(--color-main-color)
+  );
+  background-image: conic-gradient(
+    from var(--angle),
+    transparent 70%,
+    var(--conic-color-0),
+    var(--conic-color-1),
+    var(--conic-color-2)
+  );
+}
+
+.checkbox::before {
+  content: "";
+  width: 2.25rem;
+  height: 1.5rem;
+  transform: translate(0, 0);
+  background-color: color-mix(
+    in srgb,
+    transparent 80%,
+    var(--color-primary-dark)
+  );
+  border-radius: 1rem;
+  transition: transform 0.2s ease-out, background-color 0.2s ease-out;
+}
+
+.checkbox:checked::before {
+  background-color: var(--color-primary-darker);
+  transform: translate(1.5rem, 0);
+  transition: transform 0.2s ease-in, background-color 0.2s ease-in;
+}
+
+.checkbox:hover::before {
+  background-color: var(--color-primary-darker);
+}
+
+.checkbox:disabled {
+  opacity: 0.5;
+}
+
+.checkbox--error::after {
+  background-color:  var(--color-danger);
+}
+
+@keyframes perc {
+  0% {
+    --perc: 20%;
+  }
+  50% {
+    --perc: 10%;
+  }
+  100% {
+    --perc: 0%;
+  }
+}
+
+@keyframes spin {
+  0% {
+    --angle: 0deg;
+    --conic-color-0: var(--color-light-base);
+    --conic-color-1: var(--color-light-bright);
+    --conic-color-2: var(--color-light-brighter);
+  }
+  99% {
+    --conic-color-0: var(--color-light-base);
+    --conic-color-1: var(--color-light-bright);
+    --conic-color-2: var(--color-light-brighter);
+  }
+  100% {
+    --angle: 360deg;
+    --conic-color-0: var(--color-main-color);
+    --conic-color-1: var(--color-main-color);
+    --conic-color-2: var(--color-main-color);
+  }
+}
+
+@keyframes spinout {
+  from {
+    --angle: 360deg;
+    --conic-color-0: var(--color-light-base);
+    --conic-color-1: var(--color-light-bright);
+    --conic-color-2: var(--color-light-brighter);
+  }
+
+  to {
+    --angle: 0deg;
+    --conic-color-0: var(--color-light-base);
+    --conic-color-1: var(--color-light-bright);
+    --conic-color-2: var(--color-light-brighter);
+  }
+}

package/dist/esm/index.d.ts

@@ -11,6 +11,7 @@ export { Modal } from "./components/modal";
 export { Select } from "./components/select";
 export { TextArea } from "./components/text-area";
 export { Range } from "./components/range";
+export { Checkbox } from "./components/checkbox";
 export { LoadingContext, LoadingProvider, useLoading } from "./context/loading";
 export { ModalContext, ModalProvider, useModal } from "./context/modal";
 export { ThemeContext, ThemeProvider, useTheme } from "./context/theme";

package/dist/esm/index.js

@@ -526,6 +526,17 @@ function Range({ initial = 0, period, values, handleSelected }) {
                         } }), jsx(RangeThumb, { thumbPosition: thumbPosition, handleOverContent: handleOverContent, handleDownThumb: handleDownThumb })] }), jsx(RangeControls, { indexPosition: indexPosition, isPlay: isPlay, handlePlay: handlePlay, handleStop: handleStop })] }));
 }
 
+function Checkbox({ backgroundColor, classNameCheckbox = "", classNameGroup = "", classNameLabel, error = {
+    is: false,
+    message: "",
+}, 
+// icon,
+inputRef, isRequired, label, placeholder = "Insert value", styleGroup, ...rest }) {
+    return (jsxs("div", { className: clsx("input-group", classNameGroup), style: { backgroundColor: backgroundColor, ...styleGroup }, children: [jsxs("div", { className: "checkbox__header", children: [label && jsx("label", { className: classNameLabel, children: label }), error && error.is && (jsx("span", { className: "input__header--error", children: error.message }))] }), jsx("div", { className: "checkbox-subgroup", children: jsx("input", { ref: inputRef, type: "checkbox", required: isRequired, className: clsx("checkbox", error.is ? "checkbox--error" : "", 
+                    // icon?.position === "left" && "input--icon",
+                    classNameCheckbox), placeholder: placeholder, ...rest }) })] }));
+}
+
 const LoadingContext = createContext(undefined);
 function loadingReducer(state, action) {
     switch (action.type) {
@@ -657,5 +668,5 @@ function useModal({} = {}) {
     return context;
 }
 
-export { Button, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, Menu, Modal, ModalContext, ModalProvider, Range, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
+export { Button, Checkbox, Form, FormInput, FormSelect, FormTextArea, Input, Loading, LoadingContext, LoadingProvider, Menu, Modal, ModalContext, ModalProvider, Range, Select, TextArea, ThemeContext, ThemeProvider, useLoading, useModal, useTheme };
 //# sourceMappingURL=index.js.map