@harjs/react-ui 1.1.4 → 1.1.6

package/dist/assets/css/components/data-display/card/styles.css

@@ -1,10 +1,7 @@
-@import url("./statuses.css");
+@import url("./status.css");
+@import url("./radius.css");
 
-.ar-card {
-  background-color: var(--white);
-  border: solid 1px var(--light-400);
-  border-radius: var(--border-radius-lg);
-  color: var(--gray-700);
+.har-card {
   overflow: hidden;
 
   > .title {

package/dist/assets/css/components/data-display/card/templates/radius.template.css

@@ -0,0 +1,3 @@
+&.radius-__RADIUS__ {
+  border-radius: var(--radius-__RADIUS__);
+}

package/dist/assets/css/components/data-display/card/templates/status.template.css

@@ -0,0 +1,47 @@
+&.__COLOR__ {
+  --_color-border: color-mix(in srgb, var(--__COLOR__-__COLOR_SCALE__) 55%, transparent);
+  --_color-surface: color-mix(in srgb, var(--__COLOR__-__COLOR_SCALE__) 12%, var(--white-100));
+  --_color-text: color-mix(in srgb, var(--__COLOR__-__COLOR_SCALE__) 82%, black);
+
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+
+  &.filled {
+    background-color: var(--__COLOR__-__COLOR_SCALE__);
+    border: solid var(--stroke-1) var(--__COLOR__-__COLOR_SCALE__);
+    color: var(--white-100);
+    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
+  }
+
+  &.surface {
+    background-color: var(--_color-surface);
+    border: solid var(--stroke-1) var(--_color-border);
+    color: var(--_color-text);
+  }
+
+  &.surface-borderless {
+    background-color: var(--_color-surface);
+    border: solid var(--stroke-1) transparent;
+    color: var(--_color-text);
+  }
+
+  &.outlined {
+    background-color: transparent;
+    border: solid var(--stroke-1) var(--__COLOR__-__COLOR_SCALE__);
+    color: var(--_color-text);
+  }
+
+  &.dashed {
+    background-color: transparent;
+    border: dashed var(--stroke-1) var(--__COLOR__-__COLOR_SCALE__);
+    color: var(--_color-text);
+  }
+
+  &.borderless {
+    background-color: transparent;
+    border: solid var(--stroke-1) transparent;
+    color: var(--_color-text);
+  }
+}

package/dist/assets/css/components/data-display/diagram/styles.css

@@ -7,7 +7,11 @@
     position: absolute;
     inset: 0;
     background-color: var(--gray-100);
-    background-image: radial-gradient(circle, var(--gray-400) 1px, transparent 1px);
+    background-image: radial-gradient(
+      circle,
+      var(--gray-400) 1px,
+      transparent 1px
+    );
     background-size: 20px 20px;
     background-repeat: repeat;
     height: 100%;
@@ -38,10 +42,10 @@
       > .nodes {
         .node {
           position: absolute;
-          /* background-color: var(--white); */
+          /* background-color: var(--white-100); */
           /* padding: 0.5rem 1rem; */
-          /* border-radius: var(--border-radius-sm); */
-          /* box-shadow: 0px 10px 5px -5px rgba(var(--black-rgb), 0.1); */
+          /* border-radius: var(--radius-4); */
+          /* box-shadow: 0px 10px 5px -5px var(--black-10); */
           cursor: grab;
           user-select: none;
 
@@ -53,11 +57,11 @@
             position: absolute;
             left: 50%;
             transform: translateX(-50%);
-            background-color: var(--white);
+            background-color: var(--white-100);
             width: 0.5rem;
             height: 0.5rem;
             border: solid 1px var(--purple-500);
-            border-radius: var(--border-radius-pill);
+            border-radius: var(--radius-full);
             z-index: 2;
             cursor: crosshair;
 
@@ -97,10 +101,10 @@
     position: absolute;
     right: 2rem;
     bottom: 2rem;
-    background-color: var(--white);
+    background-color: var(--white-100);
     padding: 0.25rem 0.5rem;
-    border-radius: var(--border-radius-sm);
-    box-shadow: 0px 10px 5px -5px rgba(var(--black-rgb), 0.1);
+    border-radius: var(--radius-4);
+    box-shadow: 0px 10px 5px -5px var(--black-10);
     z-index: 5;
     user-select: none;
 
@@ -108,7 +112,7 @@
       background-color: var(--gray-100);
       padding: 0.4rem 0;
       width: 3rem;
-      border-radius: var(--border-radius-sm);
+      border-radius: var(--radius-4);
       font-family: var(--system);
       text-align: center;
     }

package/dist/assets/css/components/data-display/dnd/shadow.css

@@ -3,10 +3,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--white);
+  background-color: var(--white-100);
   min-width: 150px;
   height: 50px;
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--radius-4);
   overflow: hidden;
 
   > i {

package/dist/assets/css/components/data-display/dnd/styles.css

@@ -32,7 +32,7 @@
       right: 1rem;
       bottom: 0;
       height: 5px;
-      border-radius: var(--border-radius-pill);
+      border-radius: var(--radius-full);
     }
 
     &.end-item {
@@ -55,7 +55,7 @@
   > .placeholder {
     position: relative;
     border-bottom: solid 2px var(--blue-500);
-    border-radius: var(--border-radius-pill);
+    border-radius: var(--radius-full);
 
     &::before {
       position: absolute;
@@ -66,7 +66,7 @@
       width: 7.5px;
       height: 7.5px;
       border: solid 2px var(--blue-500);
-      border-radius: var(--border-radius-pill);
+      border-radius: var(--radius-full);
     }
   }
 }

package/dist/assets/css/components/data-display/grid-system/flex/styles.css

@@ -0,0 +1,65 @@
+.flex {
+  display: flex;
+}
+.inline-flex {
+  display: inline-flex;
+}
+
+.flex-direction-row {
+  flex-direction: row;
+}
+.flex-direction-column {
+  flex-direction: column;
+}
+.flex-direction-row-reverse {
+  flex-direction: row-reverse;
+}
+.flex-direction-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.flex-wrap-nowrap {
+  flex-wrap: nowrap;
+}
+.flex-wrap-wrap {
+  flex-wrap: wrap;
+}
+.flex-wrap-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.justify-content-flex-start {
+  justify-content: flex-start;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-flex-end {
+  justify-content: flex-end;
+}
+.justify-content-space-between {
+  justify-content: space-between;
+}
+.justify-content-space-around {
+  justify-content: space-around;
+}
+.justify-content-space-evenly {
+  justify-content: space-evenly;
+}
+
+/* align */
+.align-items-stretch {
+  align-items: stretch;
+}
+.align-items-flex-start {
+  align-items: flex-start;
+}
+.align-items-center {
+  align-items: center;
+}
+.align-items-flex-end {
+  align-items: flex-end;
+}
+.align-items-baseline {
+  align-items: baseline;
+}

package/dist/assets/css/components/data-display/grid-system/styles.css

@@ -4,3 +4,6 @@
 /* Column Css */
 @import url("./column/styles.css");
 @import url("./column/position.css");
+
+/* Flex Css */
+@import url("./flex/styles.css");

package/dist/assets/css/components/data-display/kanban-board/styles.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   max-width: 100%;
   min-width: 100%;
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--radius-4);
   overflow-x: auto;
   overflow-y: auto;
 
@@ -21,7 +21,7 @@
   /* Handle */
   &::-webkit-scrollbar-thumb {
     background: var(--gray-300);
-    border-radius: var(--border-radius-pill);
+    border-radius: var(--radius-full);
   }
 
   /* Handle on hover */
@@ -43,11 +43,11 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: rgba(var(--black-rgb), 0.1);
+      background-color: var(--black-10);
       backdrop-filter: blur(5px);
       width: 2rem;
       height: 5rem;
-      border-radius: var(--border-radius-sm);
+      border-radius: var(--radius-4);
       cursor: pointer;
 
       &.left {
@@ -77,17 +77,17 @@
       flex-direction: column;
       justify-content: center;
       gap: 0.5rem;
-      background-color: var(--white);
+      background-color: var(--white-100);
       max-width: 350px;
       min-width: 350px;
       margin-bottom: 1rem;
       padding: 0.5rem 1rem;
-      border-radius: var(--border-radius-lg);
+      border-radius: var(--radius-4);
       color: var(--gray-700);
       font-family: var(--system);
       font-size: 0.85rem;
       font-weight: 700;
-      box-shadow: 0px 5px 5px -2px rgba(var(--black-rgb), 0.1);
+      box-shadow: 0px 5px 5px -2px var(--black-10);
 
       > h4 {
         display: flex;
@@ -100,7 +100,7 @@
           position: relative;
           width: 5px;
           height: 20px;
-          border-radius: var(--border-radius-pill);
+          border-radius: var(--radius-full);
 
           &::after {
             position: absolute;
@@ -143,11 +143,11 @@
 
       > .items {
         position: relative;
-        background-color: var(--white);
+        background-color: var(--white-100);
         padding: 1rem;
         height: 100%;
         border: dashed 0 transparent;
-        border-radius: var(--border-radius-lg);
+        border-radius: var(--radius-4);
         transition:
           transform 250ms,
           border 250ms ease-in-out;
@@ -160,7 +160,7 @@
 
         &.dragging {
           border: dashed 2.5px var(--blue-200);
-          border-radius: var(--border-radius-lg);
+          border-radius: var(--radius-4);
           transform: scaleX(1) scaleY(1);
           overflow: hidden;
 
@@ -216,9 +216,9 @@
   flex-direction: row;
   justify-content: space-between;
   gap: 1rem;
-  background-color: var(--white);
+  background-color: var(--white-100);
   margin-bottom: 1rem;
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--radius-4);
   z-index: 6;
 
   > :first-child {
@@ -264,9 +264,9 @@
         background-color: var(--gray-100);
         width: max-content;
         padding: 1rem;
-        border-bottom-left-radius: var(--border-radius-sm);
-        border-bottom-right-radius: var(--border-radius-sm);
-        box-shadow: 0px 5px 5px -2px rgba(var(--black-rgb), 0.1);
+        border-bottom-left-radius: var(--radius-4);
+        border-bottom-right-radius: var(--radius-4);
+        box-shadow: 0px 5px 5px -2px var(--black-10);
 
         > li {
           cursor: auto;

package/dist/assets/css/components/data-display/paper/styles.css

@@ -1,8 +1,8 @@
 .ar-paper {
-  background-color: var(--white);
+  background-color: var(--white-100);
   padding: 1rem;
-  border-radius: var(--border-radius-lg);
-  box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  border-radius: var(--radius-4);
+  box-shadow: 0px 10px 15px -5px var(--black-10);
 
   > .header {
     display: flex;

package/dist/assets/css/components/data-display/syntax-highlighter/syntax-highlighter.css

@@ -3,14 +3,14 @@
 .ar-syntax {
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--radius-4);
 }
 
 .ar-syntax > .preview {
   position: relative;
   gap: 1rem;
   border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+  border-radius: var(--radius-4) var(--radius-4) 0 0;
   padding: 1rem;
 }
 .ar-syntax > .preview.left {
@@ -38,7 +38,7 @@
   margin: 0;
 
   border-top: solid 2.5px var(--custom-tag-color);
-  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
+  border-radius: 0 0 var(--radius-4) var(--radius-4);
   overflow: hidden;
 }
 .ar-syntax > .pre.hidden {

package/dist/assets/css/components/data-display/table/filter-popup.css

@@ -1,11 +1,13 @@
 .ar-table-filter-popup {
   position: absolute;
-  background-color: var(--white);
+  background-color: var(--white-100);
   width: 225px;
   max-height: 300px;
   padding: 1rem;
-  border-radius: var(--border-radius-sm);
-  box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
-  transition: top 350ms, left 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+  border-radius: var(--radius-4);
+  box-shadow: 0px 10px 15px -5px var(--black-10);
+  transition:
+    top 350ms,
+    left 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);
   z-index: 1052;
 }

package/dist/assets/css/components/data-display/table/properties-popup.css

@@ -1,10 +1,10 @@
 .ar-table-properties-popup {
   position: absolute;
-  background-color: var(--white);
+  background-color: var(--white-100);
   width: 225px;
   padding: 0.5rem 0;
-  border-radius: var(--border-radius-sm);
-  box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  border-radius: var(--radius-4);
+  box-shadow: 0px 10px 15px -5px var(--black-10);
   transition:
     top 350ms,
     left 1s cubic-bezier(0.68, -0.6, 0.32, 1.6);

package/dist/assets/css/components/data-display/table/scroll.css

@@ -30,6 +30,7 @@
             &:is(.sticky-left, .sticky-right) {
               &:is(.sticky, .active-sticky) {
                 background-color: var(--gray-100);
+                z-index: 3;
 
                 &::after {
                   position: absolute;