@harjs/react-ui 1.0.0

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

@@ -0,0 +1,252 @@
+/* #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/date-picker/calendar/calendar.css

@@ -0,0 +1,14 @@
+.ar-date-calendar {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--white);
+  width: 20rem;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
+  z-index: 1051;
+  transition: visibility 250ms, opacity 250ms ease-in-out;
+}

package/dist/assets/css/components/form/date-picker/calendar/content.css

@@ -0,0 +1,62 @@
+.ar-date-calendar > .content {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 1rem;
+  margin: 0.5rem;
+}
+.ar-date-calendar > .content > .calendar {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: 1rem 0;
+}
+
+/* #region Weekdays */
+.ar-date-calendar > .content > .calendar > .weekdays {
+  display: flex;
+  flex-wrap: nowrap;
+}
+.ar-date-calendar > .content > .calendar > .weekdays > span {
+  width: calc(100% / 7);
+  color: var(--gray-600);
+  font-size: 0.8rem;
+  text-align: center;
+  user-select: none;
+}
+/* #endregion Weekdays */
+/* Weekdays */
+
+/* #region Days */
+.ar-date-calendar > .content > .calendar > .days {
+  display: flex;
+  flex-wrap: wrap;
+  user-select: none;
+}
+.ar-date-calendar > .content > .calendar > .days > span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(100% / 7);
+  height: var(--input-height);
+  cursor: pointer;
+}
+.ar-date-calendar > .content > .calendar > .days > span > span {
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  width: 75%;
+  height: 75%;
+  border-radius: var(--border-radius-sm);
+}
+.ar-date-picker > .calendar-wrapper > .content > .calendar > .days > span:not(.empty-day) > span:hover {
+  background-color: var(--gray-200);
+  color: var(--gray-700);
+}
+.ar-date-calendar > .content > .calendar > .days > span.selection-day > span {
+  background-color: var(--primary);
+  color: var(--white);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary);
+}
+/* #endregion Days */
+/* Days */

package/dist/assets/css/components/form/date-picker/calendar/footer.css

@@ -0,0 +1,10 @@
+.ar-date-calendar > .footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0 0.5rem;
+  height: var(--footer-height);
+  padding: 0 0.5rem;
+  border-top: solid 1px var(--gray-200);
+}

package/dist/assets/css/components/form/date-picker/calendar/header.css

@@ -0,0 +1,86 @@
+.ar-date-calendar > .header {
+  display: flex;
+  align-items: center;
+  min-height: 3.75rem;
+  padding: 0 1rem;
+  border-bottom: solid 1px var(--gray-200);
+}
+.ar-date-calendar > .header > .select-field {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0 0.75rem;
+  width: 100%;
+  padding: 0 0.5rem;
+}
+
+.ar-date-calendar > .header > .select-field > .selects {
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+  align-items: center;
+  gap: 0 1rem;
+  height: var(--input-height);
+}
+.ar-date-calendar > .header > .select-field > .selects > div > span {
+  /* -webkit-text-stroke: 1px var(--black); */
+  user-select: none;
+}
+
+/* #region Prev and Next Buttons */
+.ar-date-calendar > .header > .select-field > .prev > span,
+.ar-date-calendar > .header > .select-field > .next > span {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: solid 2px transparent;
+  transform: rotate(45deg);
+  user-select: none;
+  cursor: pointer;
+}
+.ar-date-calendar > .header > .select-field > .prev > span::before,
+.ar-date-calendar > .header > .select-field > .next > span::before {
+  border: solid 2px transparent;
+}
+
+.ar-date-calendar > .header > .select-field > .prev > span:first-child {
+  position: relative;
+  border-left-color: var(--primary);
+  border-bottom-color: var(--primary);
+}
+.ar-date-calendar > .header > .select-field > .prev > span:first-child::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-left-color: rgba(var(--primary-rgb), 0.25);
+  border-bottom-color: rgba(var(--primary-rgb), 0.25);
+}
+.ar-date-calendar > .header > .select-field > .prev > span:last-child {
+  border-left-color: var(--gray-500);
+  border-bottom-color: var(--gray-500);
+  margin-left: 0.3rem;
+}
+
+.ar-date-calendar > .header > .select-field > .next > span:first-child {
+  border-top-color: var(--gray-500);
+  border-right-color: var(--gray-500);
+  margin-right: 0.3rem;
+}
+.ar-date-calendar > .header > .select-field > .next > span:last-child {
+  position: relative;
+  border-top-color: var(--primary);
+  border-right-color: var(--primary);
+}
+.ar-date-calendar > .header > .select-field > .next > span:last-child::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-top-color: rgba(var(--primary-rgb), 0.25);
+  border-right-color: rgba(var(--primary-rgb), 0.25);
+}
+/* #endregion Prev and Next Buttons */
+/* Prev and Next Buttons */

package/dist/assets/css/components/form/date-picker/clock/clock.css

@@ -0,0 +1,14 @@
+.ar-date-calendar > .clock {
+  position: absolute;
+  top: -1px;
+  right: -8rem;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--white);
+  width: 7.5rem;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
+  z-index: 1051;
+  user-select: none;
+}

package/dist/assets/css/components/form/date-picker/clock/content.css

@@ -0,0 +1,48 @@
+.ar-date-calendar > .clock > .content {
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+.ar-date-calendar > .clock > .content > ul {
+  width: 50%;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+.ar-date-calendar > .clock > .content > ul:nth-child(2) {
+  border-left: solid 1px var(--gray-200);
+}
+.ar-date-calendar > .clock > .content > ul::-webkit-scrollbar {
+  display: none;
+}
+.ar-date-calendar > .clock > .content > ul > li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2rem;
+  cursor: pointer;
+}
+.ar-date-calendar > .clock > .content > ul > li > span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: var(--input-height);
+  cursor: pointer;
+}
+.ar-date-calendar > .clock > .content > ul > li > span > span {
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  height: 75%;
+  border-radius: var(--border-radius-sm);
+}
+.ar-date-picker > .calendar-wrapper > .clock > .content > ul > li:not(.selection-time) > span > span:hover {
+  background-color: var(--gray-200);
+  color: var(--gray-700);
+}
+.ar-date-calendar > .clock > .content > ul > li.selection-time > span > span {
+  background-color: var(--success);
+  color: var(--white);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success);
+}

package/dist/assets/css/components/form/date-picker/clock/footer.css

@@ -0,0 +1,6 @@
+.ar-date-calendar > .clock > .footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: solid 1px var(--gray-200);
+}

package/dist/assets/css/components/form/date-picker/clock/header.css

@@ -0,0 +1,8 @@
+.ar-date-calendar > .clock > .header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: solid 1px var(--gray-200);
+  text-align: center;
+  /* -webkit-text-stroke: 1px var(--black); */
+}

package/dist/assets/css/components/form/date-picker/date-picker.css

@@ -0,0 +1,36 @@
+@import url("./calendar/calendar.css");
+@import url("./calendar/header.css");
+@import url("./calendar/content.css");
+@import url("./calendar/footer.css");
+
+@import url("./clock/clock.css");
+@import url("./clock/header.css");
+@import url("./clock/content.css");
+@import url("./clock/footer.css");
+
+:root {
+  --header-height: 2.75rem;
+  --footer-height: 2.75rem;
+}
+
+.ar-date-picker {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+
+  > .wrapper {
+    width: 100%;
+  }
+}
+.ar-date-picker > label {
+  position: absolute;
+  top: -0.5rem;
+  left: 0.55rem;
+  padding: 0 0.5rem;
+  color: var(--gray-600);
+  font-size: 0.75rem;
+  letter-spacing: 1px;
+  transition: top 250ms ease-in-out;
+  z-index: 1;
+}

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

@@ -0,0 +1,11 @@
+.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

@@ -0,0 +1,114 @@
+/* #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 */