@acorex/styles 5.0.41 → 5.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acorex/styles",
-    "version": "5.0.41",
+    "version": "5.0.44",
     "description": "",
     "main": "index.js",
     "scripts": {

package/src/components/_alert.scss

@@ -11,7 +11,7 @@
             opacity: 1;
         }
         .ax-alert-icon {
-            @apply ax-text-xl ax-self-baseline;
+            @apply ax-text-xl ax-self-baseline ax-me-2;
            
         }
         .ax-alert-body {

package/src/components/_button.scss

@@ -217,114 +217,114 @@
         }
         // twotone
         &.ax-primary-twotone {
-            @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
+            @apply ax-bg-primary-50 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-primary-200 ax-text-primary-700;
+                    @apply ax-bg-primary-100 ax-text-primary-700;
                 }
                 &:active {
-                    @apply ax-bg-primary-300 ax-text-primary-700;
+                    @apply ax-bg-primary-200 ax-text-primary-700;
                 }
             }
 
             &.ax-state-selected {
-                @apply ax-bg-primary-300 ax-text-primary-700;
+                @apply ax-bg-primary-200 ax-text-primary-700;
             }
         }
         &.ax-secondary-twotone {
-            @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
+            @apply ax-bg-secondary-50 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-secondary-200 ax-text-secondary-700;
+                    @apply ax-bg-secondary-100 ax-text-secondary-700;
                 }
                 &:active {
-                    @apply ax-bg-secondary-300 ax-text-secondary-700;
+                    @apply ax-bg-secondary-200 ax-text-secondary-700;
                 }
             }
 
             &.ax-state-selected {
-                @apply ax-bg-secondary-300 ax-text-secondary-700;
+                @apply ax-bg-secondary-200 ax-text-secondary-700;
             }
         }
         &.ax-warning-twotone {
-            @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
+            @apply ax-bg-warning-50 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-warning-200 ax-text-warning-700;
+                    @apply ax-bg-warning-100 ax-text-warning-700;
                 }
                 &:active {
-                    @apply ax-bg-warning-300 ax-text-warning-700;
+                    @apply ax-bg-warning-200 ax-text-warning-700;
                 }
             }
 
             &.ax-state-selected {
-                @apply ax-bg-warning-300 ax-text-warning-700;
+                @apply ax-bg-warning-200 ax-text-warning-700;
             }
         }
         &.ax-danger-twotone {
-            @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
+            @apply ax-bg-danger-50 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-danger-200 ax-text-danger-700;
+                    @apply ax-bg-danger-100 ax-text-danger-700;
                 }
                 &:active {
-                    @apply ax-bg-danger-300 ax-text-danger-700;
+                    @apply ax-bg-danger-200 ax-text-danger-700;
                 }
             }
 
             &.ax-state-selected {
-                @apply ax-bg-danger-300 ax-text-danger-700;
+                @apply ax-bg-danger-200 ax-text-danger-700;
             }
         }
         &.ax-success-twotone {
-            @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
+            @apply ax-bg-success-50 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-success-200 ax-text-success-700;
+                    @apply ax-bg-success-100 ax-text-success-700;
                 }
                 &:active {
-                    @apply ax-bg-success-300 ax-text-success-700;
+                    @apply ax-bg-success-200 ax-text-success-700;
                 }
             }
 
             &.ax-state-selected {
-                @apply ax-bg-success-300 ax-text-success-700;
+                @apply ax-bg-success-200 ax-text-success-700;
             }
         }
         &.ax-info-twotone {
-            @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
+            @apply ax-bg-info-50 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
             &:not(.ax-state-disabled) {
                 &:hover,
                 &:focus {
-                    @apply ax-bg-info-200 ax-text-info-700;
+                    @apply ax-bg-info-100 ax-text-info-700;
                 }
                 &:active {
-                    @apply ax-bg-info-300 ax-text-info-700;
+                    @apply ax-bg-info-200 ax-text-info-700;
                 }
             }
 
             &.ax-state-selected {
-                @apply ax-bg-info-300 ax-text-primary-700;
+                @apply ax-bg-info-200 ax-text-primary-700;
             }
         }
         &.ax-dark-twotone {
-            @apply ax-bg-dark-100 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
+            @apply ax-bg-dark-50 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
             &:not(.ax-state-disabled) {
                 &:hover {
                 }
                 &:focus {
-                    @apply ax-bg-dark-200 ax-text-dark-700;
+                    @apply ax-bg-dark-100 ax-text-dark-700;
                 }
                 &:active {
-                    @apply ax-bg-dark-300 ax-text-dark-700;
+                    @apply ax-bg-dark-200 ax-text-dark-700;
                 }
                 &.ax-state-selected {
-                    @apply ax-bg-dark-300 ax-text-dark-fore;
+                    @apply ax-bg-dark-200 ax-text-dark-fore;
                 }
             }
         }

package/src/components/_checkbox.scss

@@ -31,7 +31,7 @@
 
         input[type="checkbox"] {
             @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
-            @include control-dark("editor");
+            @include control-states("editor");
 
             &:checked,
             &:indeterminate {

package/src/components/_dialog.scss

@@ -1,7 +1,7 @@
 @layer components {
     .ax-dialog {
         @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-px-6 ax-py-5 ax-relative ax-bg-white ax-shadow-md ax-border ax-border-solid ax-border-light-300 ax-rounded-lg ax-outline-none ax-overflow-hidden;
-        @include control-dark('surface');
+        @include control-states('surface');
         @screen sm {
             width: 98vw;
         }
@@ -33,27 +33,27 @@
         }
         &.ax-primary-default {
             .ax-dialog-icon {
-                @apply ax-text-primary-500 ax-bg-primary-200;
+                @apply ax-text-primary-500 ax-bg-primary-50;
             }
         }
         &.ax-success-default {
             .ax-dialog-icon {
-                @apply ax-text-success-500 ax-bg-success-200;
+                @apply ax-text-success-500 ax-bg-success-50;
             }
         }
         &.ax-danger-default {
             .ax-dialog-icon {
-                @apply ax-text-danger-500 ax-bg-danger-200;
+                @apply ax-text-danger-500 ax-bg-danger-50;
             }
         }
         &.ax-warning-default {
             .ax-dialog-icon {
-                @apply ax-text-warning-500 ax-bg-warning-200;
+                @apply ax-text-warning-500 ax-bg-warning-50;
             }
         }
         &.ax-info-default {
             .ax-dialog-icon {
-                @apply ax-text-info-500 ax-bg-info-200;
+                @apply ax-text-info-500 ax-bg-info-50;
             }
         }
      

package/src/components/_dropdown.scss

@@ -5,6 +5,9 @@
 
         .ax-dropdown-content {
             @apply ax-flex ax-flex-auto ax-text-sm ax-overflow-y-hidden ax-overscroll-x-auto;
+            &.ax-state-disabled {
+                @include control-states("editor-disabled");
+            }
         }
     }
 
@@ -17,8 +20,15 @@
     }
 
     .ax-overlay-pane {
-        @apply ax-bg-white ax-border ax-rounded ax-border-light-200;
-        @include control-dark("surface");
+        @apply ax-bg-white ax-border ax-rounded ax-border-light-300;
+        @include control-states("surface");
+
+
+        // &:focus,
+        // &:focus-within
+        // {
+        //     @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-50 ax-border-transparent;
+        // }
 
         &.ax-overlay-center {
             @apply ax-h-fit;

package/src/components/_editor-container.scss

@@ -3,7 +3,7 @@
         height: calc(var(--ax-base-size) * var(--ax-base-ratio));
         line-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
         @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
-        @include control-dark("editor");
+        @include control-states("editor");
 
         @screen md {
             @apply ax-text-sm;
@@ -17,6 +17,13 @@
             @apply ax-px-2;
         }
 
+        .ax-placeholder 
+        {
+            @apply ax-flex ax-mx-2;
+            --tw-placeholder-opacity: 1;
+            color: rgb(var(--ax-color-placeholder) / var(--tw-placeholder-opacity));
+        }
+
         &:first-child {
         }
 
@@ -36,7 +43,16 @@
                 box-shadow: none;
             }
         }
+        .ax-textarea{
+            width: 1%;
+            text-align: inherit;
+            font: inherit;
+            @apply ax-w-full ax-flex-1 ax-bg-transparent ax-border-none ax-p-2.5 ax-rounded;
 
+            &:focus {
+                box-shadow: none;
+            }
+        }
         ax-prefix {
             *,
             ax-button,
@@ -86,7 +102,7 @@
         }
 
         &.ax-state-disabled {
-            @include control-dark("editor-disabled");
+            @include control-states("editor-disabled");
         }
 
         &.ax-state-error {
@@ -113,17 +129,11 @@
             }
         }
 
-        // &.ax-sm {
-        //     height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
-        //     .ax-input {
-        //         @apply ax-text-xs;
-        //     }
-        // }
-        // &.ax-lg {
-        //     height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
-        //     .ax-input {
-        //         @apply ax-text-lg;
-        //     }
-        // }
+        ax-button {
+            &.ax-state-disabled {
+                @apply ax-bg-light-100 ax-text-light-fore ax-opacity-100 #{!important};
+            }
+        }
     }
+   
 }

package/src/components/_input.scss

@@ -1,12 +1,14 @@
 @layer components {
-    .ax-input {
+    .ax-input,
+    .ax-textarea {
         @apply ax-outline-none ax-p-0;
-        font-size:inherit;
+        font-size: inherit;
         &:focus {
             @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent ax-rounded-md;
         }
         &.ax-state-disabled {
-            @include control-dark("editor-disabled");
+            @include control-states("editor-disabled");
         }
     }
-}
+   
+}

package/src/components/_list.scss

@@ -18,26 +18,32 @@
             &.ax-default {
                 @apply ax-cursor-pointer;
 
+                .ax-list-item-group {
+                    &>span {
+                        @apply ax-font-bold  ax-flex ax-items-center ax-px-3 ax-text-sm ax-text-light-900;
+                        height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
+                    }
+                    &>ul {
+                        @apply ax-px-3;
+                    }
+                }
+
                 .ax-list-item {
                     height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
-                    @apply ax-text-sm ax-flex ax-items-center ax-px-3;
+                    @apply ax-text-sm ax-flex ax-items-center ax-px-3 ax-text-light-700;
 
                     &:focus,
                     &:focus-visible {
                         @apply ax-outline-none;
                     }
 
-                    &:hover {
-                        @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-white/[0.09] dark:ax-text-light-50;
-                    }
                     &.ax-state-selected {
-                        @apply ax-text-primary-500 ax-font-medium dark:ax-text-primary-50;
+                        @apply ax-bg-light-200 ax-text-light-900 ax-font-medium dark:ax-text-primary-50;
                     }
-                    
-                    &:not(.ax-check-box)
-                    {
+
+                    &:not(.ax-check-box) {
                         &.ax-state-selected {
-                            @apply ax-bg-primary-50 dark:ax-bg-white/[0.16];
+                            @apply ax-bg-light-200 ax-text-light-900 dark:ax-bg-white/[0.16];
                         }
                     }
 
@@ -46,9 +52,10 @@
                     }
 
                     &:focus,
+                    &:hover,
                     &.ax-state-focus {
                         &:not(.ax-state-selected) {
-                            @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-white/[0.16] dark:ax-text-white;
+                            @apply ax-outline-none ax-bg-light-100 dark:ax-bg-white/[0.16] dark:ax-text-white;
                         }
                     }
                 }

package/src/components/_menu.scss

@@ -0,0 +1,43 @@
+@layer components {
+
+    ax-menu,
+    .ax-menu {
+        >ul {
+            @apply ax-border ax-border-solid ax-border-light-200 ax-flex ax-flex-col ax-text-sm;
+
+            li {
+                @apply ax-cursor-pointer ax-p-1;
+
+                a {
+                    @apply ax-no-underline ax-flex ax-justify-between ax-items-center ax-p-2  ax-animate-fadeIn ax-animate-faster;
+
+                    &.active {
+                        @apply ax-bg-primary-100 ax-text-primary-500;
+                    }
+
+                    .active-icon {
+                        @apply ax--rotate-90
+                    }
+
+                    &:hover {
+                        @apply ax-text-primary-500
+                    }
+
+                    ax-icon {
+                        @apply ax--rotate-180
+                    }
+                }
+
+                ul {
+                    @apply ax-ps-3;
+
+                }
+            }
+        }
+
+    }
+
+
+
+
+}

package/src/components/_popup.scss

@@ -22,7 +22,7 @@
 
     .ax-popup {
         @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit;
-        @include control-dark("surface");
+        @include control-states("surface");
 
         .ax-popup-header {
             @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center ax-cursor-move;
@@ -46,7 +46,7 @@
             
         }
         &.ax-popup-full {
-            @apply ax-w-screen ax-h-full ax-max-h-full;
+            @apply ax-w-screen ax-h-screen ax-max-h-screen;
         }
 
         &.ax-fit {

package/src/components/_radio.scss

@@ -4,7 +4,7 @@
       
         .ax-radio {
             @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
-            @include control-dark('editor');
+            @include control-states('editor');
 
             &:checked {
                 @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-current ax-bg-contain;

package/src/components/_skeleton.scss

@@ -1,5 +1,4 @@
 @layer utilities {
-    $shine-color: #eeeeee;
     .ax-skeleton {
         @apply ax-relative ax-overflow-hidden ax-bg-light-200 dark:ax-bg-light-700;
         &.ax-skeleton-animate {
@@ -7,7 +6,7 @@
                 content: "";
                 @apply ax-block ax-absolute ax-top-0 ax-h-full ax-w-52;
                 left: -200px;
-                background: linear-gradient(to right, transparent 0%, $shine-color 50%, transparent 100%);
+                background: linear-gradient(to right, transparent 0%, rgb(var(--ax-color-light-300)) 50%, transparent 100%);
                 animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
             }
         }

package/src/components/_switch copy.scss

@@ -10,7 +10,7 @@
 
             .ax-switch-slider {
                 @apply ax-absolute ax-cursor-pointer ax-left-0 ax-right-0 ax-bottom-0 ax-top-0 ax-bg-light-300 ax-rounded-full;
-                @include control-dark("editor");
+                @include control-states("editor");
                 -webkit-transition: 0.4s;
                 transition: 0.4s;
                 &::before {

package/src/components/_table.scss

@@ -1,20 +1,53 @@
-.ax-table {
-    @apply ax-w-full;
-    table {
-        border-collapse: collapse;
-        @apply ax-w-full;
-    }
-    td,
-    th {
-        @apply ax-p-4 ax-border ax-border-solid ax-border;
-        text-align: inherit;
-    }
-    &.ax-alternative {
-        tr {
-            @apply ax-bg-white;
-            &:nth-child(even) {
-                @apply ax-bg-light-50;
+@layer components {
+    .ax-table {
+        @apply ax-w-full ax-rounded-md ax-border-collapse ax-border ax-border-light-200 dark:ax-border-dark-400;
+        th {
+            @apply ax-py-3 ax-px-6 ax-bg-light-200 dark:ax-bg-dark-400/50 ax-text-start ax-font-normal ax-text-sm;
+        }
+
+        tr,
+        th,
+        td {
+            @apply ax-border-b ax-border-light-200 dark:ax-border-dark-400 ax-px-6 ax-py-4 ax-text-sm;
+        }
+        &.ax-table-alternate {
+            tr {
+                &:nth-child(even) {
+                    @apply ax-bg-light-100 dark:ax-bg-dark-400/20;
+                }
+            }
+        }
+        &.ax-table-responsive {
+            @media screen and (max-width: 640px) {
+                @apply ax-border-none #{!important};
+                thead tr {
+                    @apply ax-absolute ax-top-[-9999em] ax-left-[-9999em];
+                }
+
+                tr {
+                    @apply ax-block ax-border ax-border-light-200 dark:ax-border-dark-400 ax-p-0;
+                }
+
+                tr + tr {
+                    @apply ax-mt-6;
+                }
+                /* Get table cells to act like rows */
+
+                td {
+                    padding-inline-start: 50%;
+                    @apply ax-relative ax-flex ax-justify-start ax-items-center ax-border-b ax-border-light-200  dark:ax-border-dark-400 last:ax-border-0;
+                    &:before {
+                        @apply ax-font-normal ax-text-sm ax-inline-block ax-w-full ax-relative ax-z-10 ax-truncate;
+                        content: attr(data-label);
+                        margin-left: -100%;
+                    }
+
+                    &:after {
+                        @apply ax-bg-light-200 ax-absolute ax-start-0 ax-top-0 ax-z-0 ax-w-[45%] ax-h-full ax-border-b ax-border-white;
+                        content: "";
+                    }
+                }
             }
         }
     }
-}
+}

package/src/components/_tabs.scss

@@ -46,11 +46,11 @@
         &.ax-horizontal {
             &.ax-look-default {
                 @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
-                @include control-dark("editor");
+                @include control-states("editor");
 
                 ax-tab-item {
                     @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-text-light-200;
-                    @include control-dark("editor");
+                    @include control-states("editor");
 
                     border-bottom-color: transparent !important;
 
@@ -151,7 +151,7 @@
 
             &.ax-look-default {
                 @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
-                @include control-dark("editor");
+                @include control-states("editor");
 
                 ax-tab-item {
                     @apply ax-bg-white ax-border-s ax-border-solid ax-border-light-300 ax-border-b-0  dark:ax-text-light-200 ax-mb-1;

package/src/components/_textarea.scss

@@ -0,0 +1,41 @@
+@layer components {
+    ax-textarea,
+    .ax-textarea {
+        min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
+        @apply ax-relative ax-flex ax-flex-col ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-overflow-hidden ax-w-full;
+        &:focus-within {
+            @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
+        }
+        textarea {
+            min-height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
+            height: fit-content;
+            @apply ax-w-full ax-text-sm ax-p-1.5;
+            @include control-states("editor");
+            &:has(ax-prefix) {
+                bacground-color: #f00 !important;
+            }
+            &:focus {
+                @apply ax-outline-transparent;
+            }
+        }
+        > ax-prefix,
+        > ax-suffix {
+            @apply ax-mb-2 ax-p-1.5 ax-absolute;
+            @include control-states("editor");
+            ax-button {
+                @apply ax-text-sm;
+                --ax-base-size: 5px;
+            }
+        }
+        > ax-prefix {
+            @apply ax-top-0 ax-end-0;
+        }
+        > ax-suffix {
+            @apply ax-bottom-0 ax-end-0;
+        }
+
+        &.ax-state-disabled {
+            @include control-states("editor-disabled");
+        }
+    }
+}

package/src/components/_toast.scss

@@ -1,7 +1,7 @@
 @layer components {
     .ax-toast {
-        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-light-300 ax-border ax-border-solid ax-rounded-lg ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
-        @include control-dark('surface');
+        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-light-200 ax-border ax-border-solid ax-rounded-md ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
+        @include control-states('surface');
         @screen sm {
             width: 98vw;
         }

package/src/components/_treeview.scss

@@ -0,0 +1,55 @@
+@layer components {
+    ax-tree-view,
+    .ax-tree-view {
+        > ul {
+            li {
+                @apply ax-text-sm ax-relative;
+                span {
+                    @apply ax-flex ax-items-center ax-my-1;
+                }
+                ul {
+                    @apply ax-ps-8;
+                    li {
+                    }
+                }
+            }
+        }
+        & > ul {
+            &.ax-list-all {
+                li {
+                    ul {
+                        @apply ax-relative;
+
+                        &::before {
+                            content: "";
+                            width: 1px;
+                            @apply ax-absolute ax-bottom-0 ax-bg-light-200 ax-h-full ax-start-2;
+                        }
+                        li {
+                            &::before {
+                                position: absolute;
+                                top: 0;
+                                right: 12px;
+                                bottom: -4px;
+                                margin-left: -1px;
+                                border-right: 1px solid #d9d9d9;
+                                content: " ";
+                            }
+                            &::after {
+                                position: absolute;
+                                width: 10px;
+                                height: 14px;
+                                border-bottom: 1px solid #d9d9d9;
+                                content: " ";
+                            }
+                        }
+                    }
+                }
+            }
+            &.ax-list-node {
+            }
+            &.ax-list-none {
+            }
+        }
+    }
+}

package/src/components/index.scss

@@ -17,6 +17,7 @@
 @import "./list";
 @import "./numberbox";
 @import "./loading";
+@import "./menu";
 @import "./popup";
 @import "./radio";
 @import "./range-slider";
@@ -27,5 +28,7 @@
 @import "./switch";
 @import "./table";
 @import "./tabs";
+@import "./textarea";
 @import "./toast";
-@import "./tooltip";
+@import "./tooltip";
+@import "./treeview";

package/src/utility/_mixins.scss

@@ -37,14 +37,14 @@
     }
 }
 
-@mixin control-dark($type) {
+@mixin control-states($type) {
 
     @if($type == "editor"){
         @apply dark:ax-border-white/[0.06] dark:ax-bg-white/[0.06] dark:ax-backdrop-blur-3xl;
     }
-   
     @if($type == "editor-disabled"){
         @apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/[0.06] dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed;
+  
     }
     @if($type == "surface"){
         @apply dark:ax-bg-default-background dark:ax-border-white/[0.16] dark:ax-shadow-md;
@@ -52,3 +52,4 @@
 
 
 }
+

package/src/images/fill-loading.svg

@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 324">
-    <g id="Layer_2" data-name="Layer 2">
-        <g id="Layer_1-2" data-name="Layer 1">
-            <path
-                d="M162,0A162,162,0,1,0,324,162,162,162,0,0,0,162,0Zm0,52.64A109.36,109.36,0,0,0,52.64,162H22.21A139.79,139.79,0,0,1,162,22.21Z"
-                fill="#fff" />
-                
-        </g>
-    </g>
-</svg>

package/src/images/loading.svg

@@ -1,8 +0,0 @@
-<svg version="1.1" width="24" height="24" class="ax-stroke-current" stroke="inherit" fill="inherit" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve">
-        <path fill="current"
-        d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
-        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25"
-            dur="0.6s" repeatCount="indefinite" />
-        </path>
-</svg>