@choice-ui/react 1.6.1 → 1.6.3

package/dist/styles/components.css

@@ -1,22 +1,156 @@
+@theme {
+  --sash-size: 8px;
+  --sash-hover-size: 4px;
+  --focus-border: var(--color-accent-background);
+  --sash-hover-transition-duration: 0.1s;
+  --separator-border: var(--color-default-boundary);
+
+  --shadow-border-white: 0 0 0 1px var(--color-white);
+  --shadow-border-white-inset: inset 0 0 0 1px var(--color-white);
+
+  --shadow-range-thumb:
+    0 0 0 2px rgb(255 255 255), 0 1px 4px 2px rgba(0 0 0 / 0.1), 0 4px 8px 2px rgba(0 0 0 / 0.1),
+    0 0 1px 2px rgba(0 0 0 / 0.3);
+
+  --shadow-checked-focused:
+    inset 0 0 0 1px var(--color-default-background), inset 0 0 0 8px var(--color-accent-background);
+
+  --shadow-switch-focused:
+    inset 0 0 0 1px var(--color-default-background), inset 0 0 0 8px var(--color-default-foreground);
+
+  --animate-spinner-spin-shape1: spinner-spin-shape1 2s linear 0s infinite normal;
+  --animate-spinner-spin-shape2: spinner-spin-shape2 2s linear 0s infinite normal;
+  --animate-spinner-spin-shape3: spinner-spin-shape3 2s linear 0s infinite normal;
+  --animate-spinner-spin-shape4: spinner-spin-shape4 2s linear 0s infinite normal;
+  --animate-spinner-bounce-left: spinner-bounce-left 0.5s infinite alternate ease;
+  --animate-spinner-bounce-right: spinner-bounce-right 0.5s infinite alternate ease;
+  --animate-indeterminate-bar: indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395)
+    infinite normal none running;
+}
+
+/* Base styles */
 @layer components {
-  .skeleton {
-    transition: all 0.2s ease-in-out !important;
-    outline: none !important;
-    box-shadow: none !important;
-    border-color: transparent !important;
-    border-radius: var(--radius-md);
-    background-color: var(--color-secondary-background) !important;
-    resize: none !important;
-    pointer-events: none !important;
-    color: transparent !important;
-    &::placeholder,
-    &:placeholder-shown {
-      color: transparent !important;
+  .scrollbar-hide {
+    /* IE and Edge */
+    -ms-overflow-style: none;
+    /* Firefox */
+    scrollbar-width: none;
+    /* Safari and Chrome */
+    &::-webkit-scrollbar {
+      display: none;
     }
-    & * {
-      visibility: hidden !important;
+  }
+
+  .press-move-cursor {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 10000001;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='%23fff' d='M5.41 12 9 8.41V11h16V8.42L28.58 12 25 15.59V13H9v2.59L5.41 12ZM4 12l6 6v-4h14v4l6-6-6-6v4H10V6l-6 6Z'/%3E%3Cpath fill='%23202125' d='M12.5 13h12.52v2.59L28.58 12l-3.56-3.58v2.6H9v-2.6L5.41 12 9 15.59V13h3.5Z'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='29.6' height='15.6' x='2.2' y='5.2' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_504_477'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_504_477' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 34px;
+    height: 24px;
+    pointer-events: none;
+  }
+}
+
+/* Animations */
+@layer components {
+  @keyframes spinner-spin-shape1 {
+    0% {
+      transform: translate(0, 0);
+    }
+    25% {
+      transform: translate(0, var(--bounce));
+    }
+    50% {
+      transform: translate(var(--bounce), var(--bounce));
+    }
+    75% {
+      transform: translate(var(--bounce), 0);
+    }
+  }
+  @keyframes spinner-spin-shape2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    25% {
+      transform: translate(calc(var(--bounce) * -1), 0);
+    }
+    50% {
+      transform: translate(calc(var(--bounce) * -1), var(--bounce));
+    }
+    75% {
+      transform: translate(0, var(--bounce));
+    }
+  }
+  @keyframes spinner-spin-shape3 {
+    0% {
+      transform: translate(0, 0);
+    }
+    25% {
+      transform: translate(var(--bounce), 0);
+    }
+    50% {
+      transform: translate(var(--bounce), calc(var(--bounce) * -1));
+    }
+    75% {
+      transform: translate(0, calc(var(--bounce) * -1));
+    }
+  }
+  @keyframes spinner-spin-shape4 {
+    0% {
+      transform: translate(0, 0);
+    }
+    25% {
+      transform: translate(0, calc(var(--bounce) * -1));
+    }
+    50% {
+      transform: translate(calc(var(--bounce) * -1), calc(var(--bounce) * -1));
+    }
+    75% {
+      transform: translate(calc(var(--bounce) * -1), 0);
     }
   }
+
+  @keyframes spinner-bounce-left {
+    0% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    25% {
+      background-color: currentColor;
+    }
+    100% {
+      transform: translate3d(calc(var(--shape) / -1), 0, 0) scale(0.64);
+      background-color: transparent;
+    }
+  }
+  @keyframes spinner-bounce-right {
+    0% {
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+    25% {
+      background-color: currentColor;
+    }
+    100% {
+      transform: translate3d(var(--shape), 0, 0) scale(0.64);
+      background-color: transparent;
+    }
+  }
+
+  @keyframes indeterminate-bar {
+    0% {
+      transform: translateX(-50%) scaleX(0.2);
+    }
+    100% {
+      transform: translateX(100%) scaleX(1);
+    }
+  }
+}
+
+/* Allotment styles */
+@layer components {
   .allotment-module_splitView__L-yRc {
     position: relative;
     width: 100%;
@@ -228,31 +362,8 @@
   }
 }
 
+/* Panel row styles */
 @layer components {
-  .scrollbar-hide {
-    /* IE and Edge */
-    -ms-overflow-style: none;
-    /* Firefox */
-    scrollbar-width: none;
-    /* Safari and Chrome */
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .press-move-cursor {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 10000001;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24' fill='none'%3E%3Cg filter='url(%23a)'%3E%3Cpath fill='%23fff' d='M5.41 12 9 8.41V11h16V8.42L28.58 12 25 15.59V13H9v2.59L5.41 12ZM4 12l6 6v-4h14v4l6-6-6-6v4H10V6l-6 6Z'/%3E%3Cpath fill='%23202125' d='M12.5 13h12.52v2.59L28.58 12l-3.56-3.58v2.6H9v-2.6L5.41 12 9 15.59V13h3.5Z'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='a' width='29.6' height='15.6' x='2.2' y='5.2' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0'/%3E%3CfeBlend in2='BackgroundImageFix' result='effect1_dropShadow_504_477'/%3E%3CfeBlend in='SourceGraphic' in2='effect1_dropShadow_504_477' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
-    background-size: contain;
-    background-repeat: no-repeat;
-    width: 34px;
-    height: 24px;
-    pointer-events: none;
-  }
-
   .properties-panel {
     @apply relative flex min-w-0 flex-col;
     &:not(:last-child) {
@@ -341,42 +452,10 @@
     grid-template-columns: 1fr 1fr 1.5rem;
     grid-template-areas: "label-1 label-2 ." "input-1 input-3 icon-1" "input-2 input-3 icon-2";
   }
+}
 
-  .fields__text-field {
-    grid-template-columns: auto 1fr auto;
-    grid-template-areas: "prefix input suffix";
-    &::before {
-      @apply pointer-events-none z-2 h-full border transform-3d;
-      grid-row: 1 / 2;
-      grid-column: 1 / 4;
-      border-radius: inherit;
-      content: "";
-    }
-  }
-
-  .input__number {
-    grid-template-rows: 1.5rem;
-    grid-template-columns: auto auto 1fr auto auto;
-    grid-template-areas: "prefix-handler variable input action suffix-handler";
-    &::before {
-      @apply pointer-events-none z-3 h-6 rounded-md border;
-      grid-row: 1 / 2;
-      grid-column: 1 / 6;
-      content: "";
-    }
-  }
-
-  .input-search {
-    @apply relative grid;
-    grid-template-columns: 1.5rem 1fr auto;
-    grid-template-areas: "icon input action";
-    &::before {
-      @apply pointer-events-none z-2 h-full rounded-md border border-transparent;
-      grid-row: 1 / 2;
-      grid-column: 1 / 4;
-    }
-  }
-
+/* Condition styles */
+@layer components {
   .condition__group {
     grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
     grid-template-columns: 1fr 1.5rem;
@@ -402,7 +481,10 @@
       bottom: 2.25rem;
     }
   }
+}
 
+/* Tree list styles */
+@layer components {
   .tree-list {
     &[data-has-horizontal-scroll="true"] {
       & .tree-list_node::after {
@@ -422,7 +504,32 @@
     width: var(--tree-node-width);
     height: var(--tree-list-height);
   }
+}
 
+/* Skeleton styles */
+@layer components {
+  .skeleton {
+    transition: all 0.2s ease-in-out !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border-color: transparent !important;
+    border-radius: var(--radius-md);
+    background-color: var(--color-secondary-background) !important;
+    resize: none !important;
+    pointer-events: none !important;
+    color: transparent !important;
+    &::placeholder,
+    &:placeholder-shown {
+      color: transparent !important;
+    }
+    & * {
+      visibility: hidden !important;
+    }
+  }
+}
+
+/* Comments styles */
+@layer components {
   .comments__input {
     grid-template-columns: calc(var(--spacing) * 6) 1fr;
   }
@@ -434,135 +541,55 @@
     grid-template-areas: "avatar meta action" ". content reaction" ". reactions .";
     column-gap: calc(var(--spacing) * 2);
   }
+}
 
-  .modal__header {
-    @apply grid;
-    grid-template-rows: minmax(2.5rem, auto);
-    grid-template-areas: "title . close" "input input input";
-  }
-
-  .modal__header--action {
-    grid-template-columns: auto 1fr 2.5rem;
-  }
-
-  @keyframes spinner-spin-shape1 {
-    0% {
-      transform: translate(0, 0);
-    }
-    25% {
-      transform: translate(0, var(--bounce));
-    }
-    50% {
-      transform: translate(var(--bounce), var(--bounce));
-    }
-    75% {
-      transform: translate(var(--bounce), 0);
-    }
-  }
-  @keyframes spinner-spin-shape2 {
-    0% {
-      transform: translate(0, 0);
-    }
-    25% {
-      transform: translate(calc(var(--bounce) * -1), 0);
-    }
-    50% {
-      transform: translate(calc(var(--bounce) * -1), var(--bounce));
-    }
-    75% {
-      transform: translate(0, var(--bounce));
-    }
-  }
-  @keyframes spinner-spin-shape3 {
-    0% {
-      transform: translate(0, 0);
-    }
-    25% {
-      transform: translate(var(--bounce), 0);
-    }
-    50% {
-      transform: translate(var(--bounce), calc(var(--bounce) * -1));
-    }
-    75% {
-      transform: translate(0, calc(var(--bounce) * -1));
-    }
-  }
-  @keyframes spinner-spin-shape4 {
-    0% {
-      transform: translate(0, 0);
-    }
-    25% {
-      transform: translate(0, calc(var(--bounce) * -1));
-    }
-    50% {
-      transform: translate(calc(var(--bounce) * -1), calc(var(--bounce) * -1));
-    }
-    75% {
-      transform: translate(calc(var(--bounce) * -1), 0);
+/* Fields styles */
+@layer components {
+  .fields__text-field {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: "prefix input suffix";
+    &::before {
+      @apply pointer-events-none z-2 h-full border transform-3d;
+      grid-row: 1 / 2;
+      grid-column: 1 / 4;
+      border-radius: inherit;
+      content: "";
     }
   }
 
-  @keyframes spinner-bounce-left {
-    0% {
-      transform: translate3d(0, 0, 0) scale(1);
-    }
-    25% {
-      background-color: currentColor;
-    }
-    100% {
-      transform: translate3d(calc(var(--shape) / -1), 0, 0) scale(0.64);
-      background-color: transparent;
-    }
-  }
-  @keyframes spinner-bounce-right {
-    0% {
-      transform: translate3d(0, 0, 0) scale(1);
-    }
-    25% {
-      background-color: currentColor;
-    }
-    100% {
-      transform: translate3d(var(--shape), 0, 0) scale(0.64);
-      background-color: transparent;
+  .input__number {
+    grid-template-rows: 1.5rem;
+    grid-template-columns: auto auto 1fr auto auto;
+    grid-template-areas: "prefix-handler variable input action suffix-handler";
+    &::before {
+      @apply pointer-events-none z-3 h-6 rounded-md border;
+      grid-row: 1 / 2;
+      grid-column: 1 / 6;
+      content: "";
     }
   }
 
-  @keyframes indeterminate-bar {
-    0% {
-      transform: translateX(-50%) scaleX(0.2);
-    }
-    100% {
-      transform: translateX(100%) scaleX(1);
+  .input-search {
+    @apply relative grid;
+    grid-template-columns: 1.5rem 1fr auto;
+    grid-template-areas: "icon input action";
+    &::before {
+      @apply pointer-events-none z-2 h-full rounded-md border border-transparent;
+      grid-row: 1 / 2;
+      grid-column: 1 / 4;
     }
   }
 }
 
-@theme {
-  --sash-size: 8px;
-  --sash-hover-size: 4px;
-  --focus-border: var(--color-accent-background);
-  --sash-hover-transition-duration: 0.1s;
-  --separator-border: var(--color-default-boundary);
-
-  --shadow-border-white: 0 0 0 1px var(--color-white);
-  --shadow-border-white-inset: inset 0 0 0 1px var(--color-white);
-
-  --shadow-range-thumb:
-    0 0 0 2px rgb(255 255 255), 0 1px 4px 2px rgba(0 0 0 / 0.1), 0 4px 8px 2px rgba(0 0 0 / 0.1),
-    0 0 1px 2px rgba(0 0 0 / 0.3);
-
-  --shadow-checked-focused:
-    inset 0 0 0 1px var(--color-default-background), inset 0 0 0 8px var(--color-accent-background);
-
-  --shadow-switch-focused:
-    inset 0 0 0 1px var(--color-default-background), inset 0 0 0 8px var(--color-default-foreground);
+/* Modal styles */
+@layer components {
+  .modal__header {
+    @apply grid;
+    grid-template-rows: minmax(2.5rem, auto);
+    grid-template-areas: "title . close" "input input input";
+  }
 
-  --animate-spinner-spin-shape1: spinner-spin-shape1 2s linear 0s infinite normal;
-  --animate-spinner-spin-shape2: spinner-spin-shape2 2s linear 0s infinite normal;
-  --animate-spinner-spin-shape3: spinner-spin-shape3 2s linear 0s infinite normal;
-  --animate-spinner-spin-shape4: spinner-spin-shape4 2s linear 0s infinite normal;
-  --animate-spinner-bounce-left: spinner-bounce-left 0.5s infinite alternate ease;
-  --animate-spinner-bounce-right: spinner-bounce-right 0.5s infinite alternate ease;
-  --animate-indeterminate-bar: indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395)
-    infinite normal none running;
+  .modal__header--action {
+    grid-template-columns: auto 1fr 2.5rem;
+  }
 }