@harjs/react-ui 1.1.5 → 1.1.7

package/dist/assets/css/components/form/radio/core/border.css

@@ -1,252 +0,0 @@
-/* #region Border Color -> BLUE */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.blue::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.blue {
-            background-color: var(--blue-500);
-            box-shadow: 0 0 0 3.5px var(--blue-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> BLUE */
-
-/* #region Border Color -> PURPLE */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.purple::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.purple {
-            background-color: var(--purple-500);
-            box-shadow: 0 0 0 3.5px var(--purple-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> PURPLE */
-
-/* #region Border Color -> PINK */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.pink::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.pink {
-            background-color: var(--pink-500);
-            box-shadow: 0 0 0 3.5px var(--pink-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> PINK */
-
-/* #region Border Color -> RED */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.red::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.red {
-            background-color: var(--red-500);
-            box-shadow: 0 0 0 3.5px var(--red-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> RED */
-
-/* #region Border Color -> ORANGE */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.orange::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.orange {
-            background-color: var(--orange-500);
-            box-shadow: 0 0 0 3.5px var(--orange-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> ORANGE */
-
-/* #region Border Color -> YELLOW */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.yellow::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.yellow {
-            background-color: var(--yellow-500);
-            box-shadow: 0 0 0 3.5px var(--yellow-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> YELLOW */
-
-/* #region Border Color -> GREEN */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.green::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.green {
-            background-color: var(--green-500);
-            box-shadow: 0 0 0 3.5px var(--green-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> GREEN */
-
-/* #region Border Color -> TEAL */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.teal::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.teal {
-            background-color: var(--teal-500);
-            box-shadow: 0 0 0 3.5px var(--teal-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> TEAL */
-
-/* #region Border Color -> CYAN */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.cyan::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.cyan {
-            background-color: var(--cyan-500);
-            box-shadow: 0 0 0 3.5px var(--cyan-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> CYAN */
-
-/* #region Border Color -> GRAY */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.gray::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.gray {
-            background-color: var(--gray-500);
-            box-shadow: 0 0 0 3.5px var(--gray-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> GRAY */
-
-/* #region Border Color -> LIGHT */
-.ar-radio-wrapper {
-  > label {
-    > input[type="radio"] {
-      &:checked {
-        + span {
-          > .ar-radio.filled.light::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-radio.filled.light {
-            background-color: var(--light-500);
-            box-shadow: 0 0 0 3.5px var(--light-100);
-          }
-        }
-      }
-    }
-  }
-}
-/* #endregion */
-/* Border Color -> LIGHT */

package/dist/assets/css/components/form/radio/radio.css

@@ -1,69 +0,0 @@
-@import url("./core/border.css");
-
-.ar-radio-wrapper {
-  display: flex;
-  align-items: center;
-  height: var(--input-height);
-}
-.ar-radio-wrapper > label > :is(input[type="radio"]) {
-  display: none;
-}
-.ar-radio-wrapper > label > span {
-  display: flex;
-  align-items: center;
-  gap: 0 0.5rem;
-  user-select: none;
-}
-.ar-radio-wrapper > label > span > .ar-radio {
-  position: relative;
-  display: inline-block;
-  min-width: 1rem;
-  min-height: 1rem;
-}
-.ar-radio-wrapper > label > :is(input[type="radio"]):checked + span > .ar-radio {
-  z-index: 2;
-}
-.ar-radio-wrapper > label > :is(input[type="radio"]):checked + span > .ar-radio::before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(45deg);
-  display: inline-block;
-  content: "";
-  width: 0.25rem;
-  height: 0.5rem;
-  border: solid 1px transparent;
-  border-right-color: var(--white);
-  border-bottom-color: var(--white);
-}
-
-.ar-radio-wrapper > label > span > .trace {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: inline-block;
-  content: "";
-  width: 1rem;
-  height: 1rem;
-  border-radius: var(--border-radius-pill);
-  z-index: 1;
-}
-.ar-radio-wrapper > label > span > .past-trace {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: inline-block;
-  content: "";
-  width: 1rem;
-  height: 1rem;
-  border-radius: var(--border-radius-pill);
-  z-index: 1;
-}
-
-.ar-radio-wrapper > label > .validation {
-  color: var(--danger);
-  font-size: 0.8rem;
-  font-weight: 400;
-}

package/dist/assets/css/core/ar-core.css

@@ -1,192 +0,0 @@
-@import url("./color-palette.css");
-@import url("./animation.css");
-@import url("./variants/filled.css");
-@import url("./variants/surface.css");
-@import url("./variants/outlined.css");
-@import url("./variants/dashed.css");
-@import url("./variants/borderless.css");
-@import url("./variants/border.css");
-@import url("./utils.css");
-
-*,
-*::before,
-*::after {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-@font-face {
-  font-family: "JetBrainsMono-Bold";
-  src: url("../../../assets/fonts/JetBrainsMono-Bold.ttf");
-}
-
-@font-face {
-  font-family: "JetBrainsMono-Regular";
-  src: url("../../../assets/fonts/JetBrainsMono-Regular.ttf");
-}
-
-/* #region Height */
-:root {
-  --input-height: 2.25rem;
-}
-/* #endregion */
-/* Height */
-
-/* #region Color Palette */
-
-:root {
-  --white: #fff;
-  --white-rgb: 255, 255, 255;
-  --black: #000000;
-  --black-rgb: 0, 0, 0;
-
-  /* ... */
-  --primary: var(--blue-500);
-  --primary-light: #92c7ff;
-  --primary-rgb: 13, 110, 253;
-  --secondary: var(--gray-500);
-  --secondary-rgb: 108, 117, 125;
-  --success: var(--green-500);
-  --success-rgb: 40, 167, 69;
-  --warning: var(--orange-500);
-  --warning-rgb: 255, 193, 7;
-  --danger: var(--red-500);
-  --danger-rgb: 220, 53, 69;
-  --information: var(--cyan-500);
-  --information-rgb: 23, 162, 184;
-  --light: var(--light-500);
-  --light-rgb: 222, 226, 230;
-  --dark: var(--gray-500);
-  --dark-rgb: 52, 58, 64;
-}
-/* #endregion */
-/* Color Palette */
-
-/* #region Fonts */
-:root {
-  --system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --jetBrainsMonoBold: "JetBrainsMono-Bold";
-  --jetBrainsMonoRegular: "JetBrainsMono-Regular";
-}
-/* #endregion */
-/* Fonts */
-
-/* #region Code Editor */
-:root {
-  --bg-color: #282c34;
-  --color: #abb2bf;
-  --tag-color: #679ad1;
-  --custom-tag-color: #6fc2ae;
-  --attribute-key-color: #a9d9f9;
-  --string-value-color: #c5947c;
-  --number-value-color: #bacdab;
-  --boolean-value-color: #57b0fe;
-  --object-value-color: #57b0fe;
-  --curly-bracket-color: #e4e49c;
-  --child-curly-bracket-color: #df6ed2;
-}
-/* #endregion */
-/* Color Palette */
-
-/* #region Border */
-:root {
-  /* Border */
-
-  /* Border Radius */
-  --border-radius: 0.465rem;
-  --border-radius-sm: 0.25rem;
-  --border-radius-lg: 0.5rem;
-  --border-radius-xl: 1rem;
-  --border-radius-xxl: 2rem;
-  --border-radius-pill: 50rem;
-}
-/* #endregion */
-/* Border */
-
-/* #region Box Shadow */
-:root {
-  --box-shadow: 0 0.5rem 1.5rem -0.5rem var(--gray-500);
-}
-/* #endregion */
-/* Box Shadow */
-
-/* #region Variants */
-
-.filled {
-  border-color: transparent;
-  transition:
-    border 250ms,
-    box-shadow 250ms ease-in-out;
-}
-
-.surface {
-  transition:
-    border 250ms,
-    box-shadow 250ms ease-in-out;
-}
-
-.outlined {
-  background-color: transparent;
-  border-style: solid;
-  border-width: 1px !important;
-  border-color: transparent;
-  transition:
-    border 250ms,
-    box-shadow 250ms ease-in-out;
-}
-
-.dashed {
-  background-color: transparent;
-  border-style: dashed;
-  border-width: 1px !important;
-  border-color: transparent;
-  transition:
-    border 250ms,
-    box-shadow 250ms ease-in-out;
-}
-
-.borderless {
-  background-color: transparent;
-  border-width: 1px;
-  border-color: transparent;
-  transition:
-    border 250ms,
-    box-shadow 250ms ease-in-out;
-}
-.borderless:disabled {
-  background-color: var(--gray-100) !important;
-  border: none !important;
-  color: var(--gray-500) !important;
-  cursor: no-drop !important;
-}
-
-:is(input) {
-  border: solid 1px transparent;
-}
-:is(input)::placeholder {
-  color: var(--dark);
-}
-input[type="date"] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-input[type="date"]::-webkit-calendar-picker-indicator {
-  pointer-events: none;
-}
-:is(input, button):disabled,
-:is(input[type="checkbox"]):disabled + span > .ar-checkbox:is(.filled, .outlined) {
-  cursor: no-drop !important;
-}
-:is(input[type="checkbox"]):disabled + span > .ar-checkbox:is(.borderless) {
-  background-color: var(--gray-100) !important;
-  color: var(--gray-500) !important;
-  cursor: no-drop !important;
-}
-:is(input[type="checkbox"]):disabled + span {
-  color: var(--gray-500) !important;
-  cursor: no-drop !important;
-}
-/* #endregion */
-/* Variants */

package/dist/assets/css/core/variants/animation.css

@@ -1,164 +0,0 @@
-/* #region Animation -> BLUE */
-@keyframes clicked-blue {
-  0% {
-    box-shadow: 0 0 0 0px var(--blue-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--blue-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> BLUE */
-
-/* #region Animation -> PURPLE */
-@keyframes clicked-purple {
-  0% {
-    box-shadow: 0 0 0 0px var(--purple-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--purple-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> PURPLE */
-
-/* #region Animation -> PINK */
-@keyframes clicked-pink {
-  0% {
-    box-shadow: 0 0 0 0px var(--pink-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--pink-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> PINK */
-
-/* #region Animation -> RED */
-@keyframes clicked-red {
-  0% {
-    box-shadow: 0 0 0 0px var(--red-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--red-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> RED */
-
-/* #region Animation -> ORANGE */
-@keyframes clicked-orange {
-  0% {
-    box-shadow: 0 0 0 0px var(--orange-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--orange-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> ORANGE */
-
-/* #region Animation -> YELLOW */
-@keyframes clicked-yellow {
-  0% {
-    box-shadow: 0 0 0 0px var(--yellow-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--yellow-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> YELLOW */
-
-/* #region Animation -> GREEN */
-@keyframes clicked-green {
-  0% {
-    box-shadow: 0 0 0 0px var(--green-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--green-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> GREEN */
-
-/* #region Animation -> TEAL */
-@keyframes clicked-teal {
-  0% {
-    box-shadow: 0 0 0 0px var(--teal-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--teal-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> TEAL */
-
-/* #region Animation -> CYAN */
-@keyframes clicked-cyan {
-  0% {
-    box-shadow: 0 0 0 0px var(--cyan-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--cyan-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> CYAN */
-
-/* #region Animation -> GRAY */
-@keyframes clicked-gray {
-  0% {
-    box-shadow: 0 0 0 0px var(--gray-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--gray-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> GRAY */
-
-/* #region Animation -> LIGHT */
-@keyframes clicked-light {
-  0% {
-    box-shadow: 0 0 0 0px var(--light-500);
-  }
-  50% {
-    box-shadow: 0 0 0 5px var(--light-100);
-  }
-  100% {
-    box-shadow: 0 0 0 7.5px transparent;
-  }
-}
-/* #endregion */
-/* Animation -> LIGHT */

package/dist/assets/css/core/variants/border.css

@@ -1,18 +0,0 @@
-.border-radius-sm {
-  border-radius: var(--border-radius-sm);
-}
-.border-radius-lg {
-  border-radius: var(--border-radius-lg);
-}
-.border-radius-xl {
-  border-radius: var(--border-radius-xl);
-}
-.border-radius-xxl {
-  border-radius: var(--border-radius-xxl);
-}
-.border-radius-pill {
-  border-radius: var(--border-radius-pill);
-}
-.border-radius-none {
-  border-radius: 0;
-}