@acorex/styles 21.0.3-next.33 → 21.0.3-next.35

package/components/{_action-item.scss → _action-item.css}

@@ -1,10 +1,8 @@
 .ax-action-list {
   display: flex;
   gap: 0.25rem;
-
   &.ax-action-list-horizontal {
     flex-direction: row;
-
     ax-divider {
       width: 0px;
       height: auto;
@@ -13,23 +11,14 @@
   }
   &.ax-action-list-vertical {
     flex-direction: column;
-
-    .ax-action-item {
-      & > div {
-        &.ax-action-item-prefix {
-          ax-prefix {
-            min-width: 1rem;
-          }
-        }
-      }
+    .ax-action-item > div.ax-action-item-prefix ax-prefix {
+      min-width: 1rem;
     }
-
     ax-divider {
       height: 1px;
       width: 100%;
     }
   }
-
   ax-title {
     opacity: 0.5;
     display: block;
@@ -43,16 +32,13 @@
       calc(var(--ax-comp-action-item-padding-inline, 0.875rem) / 3 * 2)
     );
   }
-
   ax-divider {
     display: block;
     background-color: rgba(var(--ax-sys-color-border-lightest-surface));
   }
-
   ax-text {
     white-space: nowrap;
   }
-
   .ax-action-item {
     display: flex;
     align-items: center;
@@ -67,38 +53,30 @@
       cursor: not-allowed;
       opacity: 0.5;
     }
-
-    &:hover {
-      &:not(&.ax-state-disabled, &.ax-state-selected) {
-        background-color: rgba(var(--ax-sys-color-surface));
-        ax-prefix,
-        ax-suffix {
-          opacity: 1;
-        }
+    &:hover:not(.ax-state-disabled, .ax-state-selected) {
+      background-color: rgba(var(--ax-sys-color-surface));
+      ax-prefix,
+      ax-suffix {
+        opacity: 1;
       }
     }
-
     & > div {
       display: flex;
       align-items: center;
-      justify-content: start;
+      justify-content: center;
       &.ax-action-item-prefix,
       &.ax-action-item-suffix {
-        gap: 1rem;
+        gap: 0.5rem;
       }
     }
-
     ax-prefix {
       display: flex;
       gap: 0.5rem;
     }
-
-    ax-suffix {
-      ax-text {
-        color: rgba(var(--ax-sys-body-text-color));
-        opacity: 0.5;
-        font-weight: lighter;
-      }
+    ax-suffix ax-text {
+      color: rgba(var(--ax-sys-body-text-color));
+      opacity: 0.5;
+      font-weight: lighter;
     }
   }
 }

package/components/{_actionsheet.scss → _actionsheet.css}

@@ -1,21 +1,28 @@
 .ax-action-sheet-panel {
+  @apply fixed! top-auto! right-auto! bottom-0! left-1/2! block! h-auto! w-auto! max-w-none!;
+  transform: translateX(-50%) !important;
+  align-items: unset !important;
+  justify-content: unset !important;
   --ax-comp-action-sheet-border-radius-size: var(--ax-sys-border-radius);
-
   overflow: hidden;
   border-top-left-radius: var(--ax-comp-action-sheet-border-radius-size);
   border-top-right-radius: var(--ax-comp-action-sheet-border-radius-size);
   background-color: rgba(var(--ax-sys-color-surface-lowest));
   --ax-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);
-  box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
-
+  box-shadow:
+    var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
   animation: 1s both ax-fadeInUp;
   animation-duration: var(--ax-sys-transition-duration);
+}
 
-  @keyframes ax-fadeInUp {
-    from {
-      transform: translate3d(0, 100%, 0);
-      opacity: 0;
-    }
+@keyframes ax-fadeInUp {
+  from {
+    transform: translate3d(0, 100%, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
   }
 }

package/components/{_check-box.scss → _check-box.css}

@@ -1,19 +1,19 @@
-@use '../mixins/index.scss';
-
 .ax-checkbox {
   margin: 0px;
-  height: 1rem /* 16px */;
-  min-width: 1rem /* 16px */;
+  height: 1rem;
+  /* 16px */
+  min-width: 1rem;
+  /* 16px */
   cursor: pointer;
   appearance: none;
-  border-radius: 0.25rem /* 4px */;
+  border-radius: 0.25rem;
+  /* 4px */
   border-width: 1px;
   border-color: rgba(var(--ax-sys-color-border-surface));
   background-color: rgba(var(--ax-sys-color-input-surface));
   vertical-align: middle;
   outline: 2px solid transparent;
   outline-offset: 2px;
-
   &:checked,
   &:indeterminate {
     border-color: rgba(var(--ax-sys-color-primary-500)) !important;
@@ -21,34 +21,18 @@
     background-size: contain;
     background-repeat: no-repeat;
   }
-
   &:checked {
     background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
   }
-
   &:indeterminate {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==');
+    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
   }
-
   &:focus-visible,
   &:focus {
-    box-shadow:
-      0px 0px 0px 2px rgba(var(--ax-sys-color-surface)),
-      0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
+    box-shadow: 0px 0px 0px 2px rgba(var(--ax-sys-color-surface)), 0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
   }
-
   &:disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
 }
-
-// @include darkMode() {
-//   .ax-checkbox {
-//     &:checked {
-//       border-color: rgba(var(--ax-sys-color-primary-200)) !important;
-//       background-color: rgba(var(--ax-sys-color-primary-200)) !important;
-//       background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-//     }
-//   }
-// }

package/components/{_conversation-picker-popup.scss → _conversation-picker-popup.css}

@@ -1,4 +1,3 @@
-/** Composer media picker popup opened from message-list drop/paste. */
 .ax-popup-overlay.ax-conversation-composer-picker-popup {
   .ax-popup {
     max-height: min(32rem, 90dvh);

package/components/{_drop-down.scss → _drop-down.css}

@@ -1,18 +1,16 @@
-@use '../variables/index.scss';
-@use '../mixins/' as mixins;
 .ax-drop-down {
   display: contents;
-
   .ax-dropdown-content {
     display: flex;
     flex: 1 1 0%;
     align-items: center;
     overflow-x: auto;
     overflow-y: hidden;
-    font-size: 0.875rem /* 14px */;
-    line-height: 1.25rem /* 20px */;
+    font-size: 0.875rem;
+    /* 14px */
+    line-height: 1.25rem;
+    /* 20px */
     text-transform: capitalize;
-
     &.ax-state-disabled {
       cursor: not-allowed;
       opacity: 0.5;
@@ -22,7 +20,7 @@
 
 .ax-overlay-pane {
   margin: 0.25rem 0;
-  // min-width: 10rem;
+  /* min-width: 10rem; */
   width: 100%;
   height: fit-content;
   overflow: hidden;
@@ -31,16 +29,18 @@
   background-color: rgba(var(--ax-sys-color-lightest-surface));
   --ax-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);
-  box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
+  box-shadow:
+    var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--ax-shadow);
   border-top-left-radius: var(--ax-comp-drop-down-border-top-left-radius, var(--ax-sys-border-radius));
   border-top-right-radius: var(--ax-comp-drop-down-border-top-right-radius, var(--ax-sys-border-radius));
   border-bottom-left-radius: var(--ax-comp-drop-down-border-bottom-left-radius, var(--ax-sys-border-radius));
   border-bottom-right-radius: var(--ax-comp-drop-down-border-bottom-right-radius, var(--ax-sys-border-radius));
-
+  /* Replace the @include mixin with a normal media query */
   ax-header,
   ax-footer {
     background-color: rgba(var(--ax-sys-color-lightest-surface));
-    padding: 0.75rem /* 12px */;
+    padding: 0.75rem;
+    /* 12px */
   }
 
   &.ax-overlay-center {
@@ -49,21 +49,16 @@
     max-width: 90vh;
   }
 
-  &.ax-overlay-full {
-    width: 100vw;
-    height: 100vh;
-  }
-
   &.ax-overlay-actionsheet {
     height: auto;
     max-height: 85vh;
     width: 100vw;
     background-color: rgba(var(--ax-sys-color-lightest-surface));
-    outline: rgba(0, 0, 0, 0.5) solid 100vmax;
+    outline: 1000vmax solid rgba(0, 0, 0, 0.5);
   }
 }
 
-@include mixins.darkMode() {
+.dark {
   .ax-overlay-pane {
     background-color: rgba(var(--ax-sys-color-darker-surface));
     border-color: rgba(var(--ax-sys-color-border-darker-surface));

package/components/_editor-container.css

@@ -0,0 +1,69 @@
+@import '../themes/default.css';
+
+@layer base {
+  .ax-editor-container {
+    @apply h-9 min-h-9 px-3 py-3 text-sm;
+    .ax-content {
+      @apply text-sm;
+    }
+  }
+
+  .ax-editor-container {
+    @apply rounded-default relative flex h-9 min-h-9 items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
+
+    .ax-editor-container {
+      @apply p-0;
+      .ax-input,
+      .ax-editor {
+        @apply p-0;
+      }
+    }
+
+    .ax-input,
+    .ax-editor {
+      font-size: inherit;
+
+      @apply w-full flex-1 py-2 outline-0 outline-transparent;
+    }
+    .ax-placeholder {
+      @apply opacity-50;
+    }
+
+    &.ax-state-error {
+      @apply border-danger-600! focus-within:ring-danger-600/30!;
+    }
+
+    &:has(.ax-general-button-control, .ax-general-button-icon) {
+      @apply pe-2;
+    }
+
+    &:has(ax-prefix ax-button) {
+      @apply ps-0;
+    }
+
+    &:has(ax-suffix ax-button) {
+      @apply pe-0;
+    }
+
+    ax-prefix > ax-button {
+      @apply rounded-e-none!;
+    }
+
+    ax-suffix > ax-button {
+      @apply rounded-s-none!;
+    }
+
+    ax-suffix > ax-icon,
+    ax-prefix > ax-icon {
+      @apply text-muted;
+    }
+
+    ax-prefix,
+    ax-suffix {
+      @apply flex items-center gap-2;
+    }
+    ax-prefix {
+      @apply pe-2;
+    }
+  }
+}

package/components/_general-button.css

@@ -0,0 +1,62 @@
+@import '../themes/default.css';
+
+@layer base {
+  .ax-general-button,
+  .ax-general-button-icon {
+    @apply rounded-default inline-flex cursor-pointer items-center justify-center transition select-none;
+    @apply disabled:cursor-not-allowed disabled:opacity-50;
+    @apply text-text-default/50 hover:text-text-default/70;
+    @apply hover:bg-bg-default/10;
+    @apply focus-visible:ring-primary/30 focus-visible:ring-3 focus-visible:outline-none;
+    * {
+      @apply cursor-[inherit];
+    }
+  }
+
+  .ax-general-button {
+    @apply px-2 py-1 text-sm;
+
+    &.ax-xs {
+      @apply p-1.5 text-xs;
+    }
+
+    &.ax-sm {
+      @apply p-2 text-sm;
+    }
+
+    &.ax-md {
+      @apply p-2 text-sm;
+    }
+
+    &.ax-lg {
+      @apply p-2.5 text-lg;
+    }
+
+    &.ax-xl {
+      @apply p-2.5 text-xl;
+    }
+  }
+  .ax-general-button-icon {
+    @apply size-6 px-2 py-1 text-sm;
+
+    &.ax-xs {
+      @apply size-5 p-1.5 text-xs;
+    }
+
+    &.ax-sm {
+      @apply size-6 p-2 text-sm;
+    }
+
+    &.ax-md {
+      @apply size-6 p-2 text-sm;
+    }
+
+    &.ax-lg {
+      @apply size-8 p-2.5 text-lg;
+    }
+
+    &.ax-xl {
+      @apply size-9 p-2.5 text-xl;
+    }
+  }
+}

package/components/{_list.scss → _list.css}

@@ -1,27 +1,22 @@
-@use '../mixins/index.scss' as mixins;
-@include mixins.darkMode() {
+.dark {
   .ax-list-item {
     &.ax-state-selected {
       background-color: rgba(var(--ax-sys-color-primary-800)) !important;
       color: rgba(var(--ax-sys-color-on-primary)) !important;
-
-      // .ax-selected-icon {
-      //
-      //   color: rgba(var(--ax-sys-color-on-primary));
-      // }
     }
   }
 }
+
 .ax-list {
   display: flex;
   height: 100%;
   flex-direction: column;
   overflow: hidden;
   background-color: rgba(var(--ax-sys-color-surface));
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
-  @include mixins.media('md') {
-    max-height: 20rem /* 320px */;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  .ax-md {
+    max-height: 20rem;
   }
   ax-header,
   ax-footer {
@@ -34,13 +29,13 @@
   ax-header {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-color-border-lightest-surface), var(--tw-border-opacity));
-    padding: 1rem /* 16px */;
-    font-size: 1rem /* 16px */;
-    line-height: 1.5rem /* 24px */;
+    padding: 1rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
     font-weight: 500;
-    @include mixins.media('md') {
-      font-size: 1.125rem /* 18px */;
-      line-height: 1.75rem /* 28px */;
+    .ax-md {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
     }
     ax-prefix,
     ax-suffix {
@@ -55,53 +50,44 @@
       align-items: flex-end;
     }
   }
-
   ax-footer {
     border-top-width: 1px;
   }
-
   .ax-content {
     flex: 1 1 0%;
     overflow-y: auto;
     overflow-x: hidden;
-
     &.ax-list-items-container {
       height: 100%;
       overflow-y: auto;
-      padding-top: 0.5rem /* 8px */;
-      padding-bottom: 0.5rem /* 8px */;
-
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
       &.ax-vertical {
         display: grid;
         grid-template-columns: repeat(1, minmax(0, 1fr));
-
         &.ax-divide {
           border-top-width: 1px;
           border-bottom-width: 1px;
         }
       }
-
       &.ax-default {
         cursor: pointer;
-
         .ax-list-item-group {
           & > span {
             display: flex;
             align-items: center;
-            padding: 0.75rem /* 12px */;
+            padding: 0.75rem;
             font-weight: 500;
           }
-
           & > ul {
-            padding-left: 0.75rem /* 12px */;
-            padding-right: 0.75rem /* 12px */;
+            padding-left: 0.75rem;
+            padding-right: 0.75rem;
           }
           .ax-list-item {
-            margin-bottom: 0.25rem /* 4px */;
+            margin-bottom: 0.25rem;
             border-radius: var(--ax-sys-border-radius);
           }
         }
-
         .ax-list-item {
           position: relative;
           display: flex;
@@ -109,10 +95,10 @@
           user-select: none;
           align-items: center;
           justify-content: space-between;
-          padding-inline-end: 1rem /* 16px */;
-          padding-inline-start: 0.75rem /* 12px */;
-          font-size: 1rem /* 16px */;
-          line-height: 1.5rem /* 24px */;
+          padding-inline-end: 1rem;
+          padding-inline-start: 0.75rem;
+          font-size: 1rem;
+          line-height: 1.5rem;
           &:focus,
           &:focus-visible {
             outline-width: 2px;
@@ -120,31 +106,17 @@
           }
           &.ax-state-checkbox {
             .ax-checkbox-label {
-              margin-inline-start: 0.5rem /* 8px */;
+              margin-inline-start: 0.5rem;
             }
           }
           &.ax-state-selected {
             background-color: rgba(var(--ax-sys-color-primary-500), var(--tw-bg-opacity)) !important;
             color: rgba(var(--ax-sys-color-on-primary), var(--tw-text-opacity)) !important;
-
-            // .ax-selected-icon {
-            //
-            //   font-size: 1.5rem /* 24px */;
-            //   line-height: 2rem /* 32px */;
-            //   color: rgba(var(--ax-sys-color-primary-500));
-            // }
           }
-
-          // &:not(.ax-check-box) {
-          //     &.ax-state-selected {
-          //     }
-          // }
-
           &.ax-state-disabled {
             cursor: not-allowed;
             opacity: 0.5;
           }
-
           &:focus-visible,
           &:hover {
             background-color: rgba(var(--ax-sys-color-surface));
@@ -154,18 +126,15 @@
           }
         }
       }
-
       .ax-list-loading-container {
         display: flex;
         justify-content: center;
-        padding: 0.5rem /* 8px */;
+        padding: 0.5rem;
       }
     }
   }
-
   .ax-search-box-container {
-    padding: 0.5rem /* 8px */;
-
+    padding: 0.5rem;
     &.ax-state-hidden {
       display: none;
     }

package/components/_radio.css

@@ -0,0 +1,33 @@
+.ax-radio {
+  margin: 0px;
+  height: 1rem;
+  min-height: 1rem;
+  min-width: 1rem;
+  width: 1rem;
+  cursor: pointer;
+  appearance: none;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: rgba(var(--ax-sys-color-border-surface));
+  background-color: rgba(var(--ax-sys-color-input-surface));
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  &:checked {
+    border-color: rgba(var(--ax-sys-color-primary-500)) !important;
+    background-color: rgba(var(--ax-sys-color-primary-500)) !important;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  &:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  }
+  &:focus-visible,
+  &:focus {
+    box-shadow: 0px 0px 0px 2px rgba(var(--ax-sys-color-surface)), 0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

package/components/{_ripple.scss → _ripple.css}

@@ -1,13 +1,13 @@
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
 .ax-ripple {
+  position: absolute;
   transform: scale(0);
   animation: ripple 500ms linear;
-  position: absolute;
   border-radius: 9999rem !important;
-
-  @keyframes ripple {
-    to {
-      transform: scale(4);
-      opacity: 0;
-    }
-  }
 }