@harjs/react-ui 1.1.5 → 1.1.7

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

@@ -1,252 +0,0 @@
-/* #region Border Color -> BLUE */
-.ar-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.blue::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.purple::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.pink::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.red::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.orange::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.yellow::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.green::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.teal::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.cyan::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.gray::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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-checkbox-wrapper {
-  > label {
-    > input[type="checkbox"] {
-      &:checked {
-        + span {
-          > .ar-checkbox.filled.light::before {
-            border-right-color: var(--white);
-            border-bottom-color: var(--white);
-          }
-
-          > .ar-checkbox.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/input/core/addon.css

@@ -1,11 +0,0 @@
-.ar-input-wrapper > .addon-before,
-.ar-input-wrapper > .addon-after {
-  height: var(--input-height);
-  padding: 0 0.75rem;
-  color: var(--gray-600);
-  font-size: 0.9rem;
-  font-weight: 400;
-  line-height: var(--input-height);
-  user-select: none;
-  cursor: no-drop;
-}

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

@@ -1,114 +0,0 @@
-/* #region Border Radius -> SM */
-.ar-input-wrapper.addon > span.addon-before.border-radius-sm {
-  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm) !important;
-}
-.ar-input-wrapper.addon > span.addon-after.border-radius-sm {
-  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0 !important;
-}
-
-.ar-input-wrapper.addon:has(> .addon-before) > .ar-input > input.border-radius-sm {
-  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0 !important;
-}
-.ar-input-wrapper.addon:has(> .addon-after) > .ar-input > input.border-radius-sm,
-.ar-input-wrapper:has(> .ar-button) > .ar-input > input.border-radius-sm {
-  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm) !important;
-}
-.ar-input-wrapper.addon:has(> .addon-before):has(> .addon-after)
-  > .ar-input
-  > input.border-radius-sm {
-  border-radius: 0 !important;
-}
-/* #endregion */
-/* Border Radius -> SM */
-
-/* #region Border Radius -> LG */
-.ar-input-wrapper.addon > span.addon-before.border-radius-lg {
-  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg) !important;
-}
-.ar-input-wrapper.addon > span.addon-after.border-radius-lg {
-  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0 !important;
-}
-
-.ar-input-wrapper.addon:has(> .addon-before) > .ar-input > input.border-radius-lg {
-  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0 !important;
-}
-.ar-input-wrapper.addon:has(> .addon-after) > .ar-input > input.border-radius-lg,
-.ar-input-wrapper:has(> .ar-button) > .ar-input > input.border-radius-lg {
-  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg) !important;
-}
-.ar-input-wrapper.addon:has(> .addon-before):has(> .addon-after)
-  > .ar-input
-  > input.border-radius-lg {
-  border-radius: 0 !important;
-}
-/* #endregion */
-/* Border Radius -> LG */
-
-/* #region Border Radius -> XL */
-.ar-input-wrapper.addon > span.addon-before.border-radius-xl {
-  border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl) !important;
-}
-.ar-input-wrapper.addon > span.addon-after.border-radius-xl {
-  border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0 !important;
-}
-
-.ar-input-wrapper.addon:has(> .addon-before) > .ar-input > input.border-radius-xl {
-  border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0 !important;
-}
-.ar-input-wrapper.addon:has(> .addon-after) > .ar-input > input.border-radius-xl,
-.ar-input-wrapper:has(> .ar-button) > .ar-input > input.border-radius-xl {
-  border-radius: var(--border-radius-xl) 0 0 var(--border-radius-xl) !important;
-}
-.ar-input-wrapper.addon:has(> .addon-before):has(> .addon-after)
-  > .ar-input
-  > input.border-radius-xl {
-  border-radius: 0 !important;
-}
-/* #endregion */
-/* Border Radius -> XL */
-
-/* #region Border Radius -> XXL */
-.ar-input-wrapper.addon > span.addon-before.border-radius-xxl {
-  border-radius: var(--border-radius-xxl) 0 0 var(--border-radius-xxl) !important;
-}
-.ar-input-wrapper.addon > span.addon-after.border-radius-xxl {
-  border-radius: 0 var(--border-radius-xxl) var(--border-radius-xxl) 0 !important;
-}
-
-.ar-input-wrapper.addon:has(> .addon-before) > .ar-input > input.border-radius-xxl {
-  border-radius: 0 var(--border-radius-xxl) var(--border-radius-xxl) 0 !important;
-}
-.ar-input-wrapper.addon:has(> .addon-after) > .ar-input > input.border-radius-xxl,
-.ar-input-wrapper:has(> .ar-button) > .ar-input > input.border-radius-xxl {
-  border-radius: var(--border-radius-xxl) 0 0 var(--border-radius-xxl) !important;
-}
-.ar-input-wrapper.addon:has(> .addon-before):has(> .addon-after)
-  > .ar-input
-  > input.border-radius-xxl {
-  border-radius: 0 !important;
-}
-/* #endregion */
-/* Border Radius -> XXL */
-
-/* #region Border Radius -> PILL */
-.ar-input-wrapper.addon > span.addon-before.border-radius-pill {
-  border-radius: var(--border-radius-pill) 0 0 var(--border-radius-pill) !important;
-}
-.ar-input-wrapper.addon > span.addon-after.border-radius-pill {
-  border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0 !important;
-}
-
-.ar-input-wrapper.addon:has(> .addon-before) > .ar-input > input.border-radius-pill {
-  border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0 !important;
-}
-.ar-input-wrapper.addon:has(> .addon-after) > .ar-input > input.border-radius-pill,
-.ar-input-wrapper:has(> .ar-button) > .ar-input > input.border-radius-pill {
-  border-radius: var(--border-radius-pill) 0 0 var(--border-radius-pill) !important;
-}
-.ar-input-wrapper.addon:has(> .addon-before):has(> .addon-after)
-  > .ar-input
-  > input.border-radius-pill {
-  border-radius: 0 !important;
-}
-/* #endregion */
-/* Border Radius -> PILL */

package/dist/assets/css/components/form/input/core/button.css

@@ -1,34 +0,0 @@
-/* #region Border Radius -> SM */
-.ar-input-wrapper > .ar-button.border-radius-sm {
-  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
-}
-/* #endregion */
-/* Border Radius -> SM */
-
-/* #region Border Radius -> LG */
-.ar-input-wrapper > .ar-button.border-radius-lg {
-  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
-}
-/* #endregion */
-/* Border Radius -> LG */
-
-/* #region Border Radius -> XL */
-.ar-input-wrapper > .ar-button.border-radius-xl {
-  border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0;
-}
-/* #endregion */
-/* Border Radius -> XL */
-
-/* #region Border Radius -> XXL */
-.ar-input-wrapper > .ar-button.border-radius-xxl {
-  border-radius: 0 var(--border-radius-xxl) var(--border-radius-xxl) 0;
-}
-/* #endregion */
-/* Border Radius -> XXL */
-
-/* #region Border Radius -> PILL */
-.ar-input-wrapper > .ar-button.border-radius-pill {
-  border-radius: 0 var(--border-radius-pill) var(--border-radius-pill) 0;
-}
-/* #endregion */
-/* Border Radius -> PILL */

package/dist/assets/css/components/form/input/core/icon.css

@@ -1,22 +0,0 @@
-.ar-input-wrapper > .ar-input:is(.icon) > .icon-element {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 1rem;
-  height: 1rem;
-}
-.ar-input-wrapper > .ar-input:is(.icon.icon-start) > .icon-element {
-  left: 0.5rem;
-}
-.ar-input-wrapper > .ar-input:is(.icon.icon-end) > .icon-element {
-  right: 0.5rem;
-}
-.ar-input-wrapper > .ar-input:is(.icon.icon-start) > input {
-  padding-left: 2rem;
-}
-.ar-input-wrapper > .ar-input:is(.icon.icon-end) > input {
-  padding-right: 2rem;
-}

package/dist/assets/css/components/form/input/otp/styles.css

@@ -1,20 +0,0 @@
-.ar-input-otp-wrapper {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-
-  > span {
-    > .ar-input-wrapper {
-      > .ar-input {
-        > .input {
-          > input {
-            text-align: center !important;
-          }
-        }
-      }
-    }
-  }
-}

package/dist/assets/css/components/form/input/phone/styles.css

@@ -1,50 +0,0 @@
-.ar-input-phone-wrapper {
-  display: flex;
-  flex-direction: row;
-
-  > .ar-select-wrapper {
-    flex: 0 0 20%;
-
-    > .ar-select {
-      > .ar-input-wrapper {
-        > .ar-input {
-          > .input {
-            > input {
-              border-right: none;
-              border-radius: 0;
-              border-top-left-radius: var(--border-radius-sm);
-              border-bottom-left-radius: var(--border-radius-sm);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  > .ar-input-wrapper {
-    flex: 1;
-
-    > .ar-input {
-      > .input {
-        > input {
-          border-radius: 0;
-          border-top-right-radius: var(--border-radius-sm);
-          border-bottom-right-radius: var(--border-radius-sm);
-        }
-      }
-    }
-  }
-
-  /* @media (max-width: 600px) {
-    flex-direction: column;
-
-    .ar-select-wrapper,
-    .ar-input-wrapper {
-      flex: 1 1 100%;
-
-      .ar-input .input input {
-        border-radius: var(--border-radius-sm);
-      }
-    }
-  } */
-}