@harjs/react-ui 1.0.0

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

@@ -0,0 +1,164 @@
+/* #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/ar-core.css

@@ -0,0 +1,192 @@
+@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/color-palette.css

@@ -0,0 +1,111 @@
+:root {
+  --blue-100: #cfe2ff;
+  --blue-200: #9ec5fe;
+  --blue-300: #6ea8fe;
+  --blue-400: #3d8bfd;
+  --blue-500: #0d6efd;
+  --blue-600: #0a58ca;
+  --blue-700: #084298;
+  --blue-800: #052c65;
+  --blue-900: #031633;
+
+  --purple-100: #e2d9f3;
+  --purple-200: #c5b3e6;
+  --purple-300: #a98eda;
+  --purple-400: #8c68cd;
+  --purple-500: #6f42c1;
+  --purple-600: #59359a;
+  --purple-700: #432874;
+  --purple-800: #2c1a4d;
+  --purple-900: #160d27;
+
+  --pink-100: #f7d6e6;
+  --pink-200: #efadce;
+  --pink-300: #e685b5;
+  --pink-400: #de5c9d;
+  --pink-500: #d63384;
+  --pink-600: #ab296a;
+  --pink-700: #801f4f;
+  --pink-800: #561435;
+  --pink-900: #2b0a1a;
+
+  --red-100: #f8d7da;
+  --red-200: #f1aeb5;
+  --red-300: #ea868f;
+  --red-400: #e35d6a;
+  --red-500: #dc3545;
+  --red-600: #b02a37;
+  --red-700: #842029;
+  --red-800: #58151c;
+  --red-900: #2c0b0e;
+
+  --orange-100: #ffe5d0;
+  --orange-200: #fecba1;
+  --orange-300: #feb272;
+  --orange-400: #fd9843;
+  --orange-500: #fd7e14;
+  --orange-600: #ca6510;
+  --orange-700: #984c0c;
+  --orange-800: #653208;
+  --orange-900: #331904;
+
+  --yellow-100: #fff3cd;
+  --yellow-200: #ffe69c;
+  --yellow-300: #ffda6a;
+  --yellow-400: #ffcd39;
+  --yellow-500: #ffc107;
+  --yellow-600: #cc9a06;
+  --yellow-700: #997404;
+  --yellow-800: #664d03;
+  --yellow-900: #332701;
+
+  --green-100: #d1e7dd;
+  --green-200: #a3cfbb;
+  --green-300: #75b798;
+  --green-400: #479f76;
+  --green-500: #198754;
+  --green-600: #146c43;
+  --green-700: #0f5132;
+  --green-800: #0a3622;
+  --green-900: #051b11;
+
+  --teal-100: #d2f4ea;
+  --teal-200: #a6e9d5;
+  --teal-300: #79dfc1;
+  --teal-400: #4dd4ac;
+  --teal-500: #20c997;
+  --teal-600: #1aa179;
+  --teal-700: #13795b;
+  --teal-800: #0d503c;
+  --teal-900: #06281e;
+
+  --cyan-100: #cff4fc;
+  --cyan-200: #9eeaf9;
+  --cyan-300: #6edff6;
+  --cyan-400: #3dd5f3;
+  --cyan-500: #0dcaf0;
+  --cyan-600: #0aa2c0;
+  --cyan-700: #087990;
+  --cyan-800: #055160;
+  --cyan-900: #032830;
+
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+
+  --light-100: #fbfbfc;
+  --light-200: #f7f8f9;
+  --light-300: #f0f2f4;
+  --light-400: #e1e5e9;
+  --light-500: #d1d7dd;
+  --light-600: #b8c1ca;
+  --light-700: #9eaab6;
+  --light-800: #7e8e9d;
+  --light-900: #647688;
+}

package/dist/assets/css/core/utils.css

@@ -0,0 +1,16 @@
+.flex {
+  display: flex;
+}
+
+.justify-content-start {
+  justify-content: flex-start;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-end {
+  justify-content: flex-end;
+}
+.align-items-center {
+  align-items: center;
+}

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

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

@@ -0,0 +1,18 @@
+.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;
+}