@acorex/styles 5.0.42 → 5.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acorex/styles",
-    "version": "5.0.42",
+    "version": "5.0.43",
     "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/_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;
         }

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

@@ -20,24 +20,21 @@
 
                 .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)
                     {
                         &.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 +43,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;

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');
+        @include control-states('surface');
         @screen sm {
             width: 98vw;
         }

package/src/components/_treeview.scss

@@ -0,0 +1,23 @@
+@layer components {
+    ax-tree-view,
+    .ax-tree-view {
+        > ul {
+            li {
+                @apply ax-text-sm ax-relative;
+                // &::before {
+                //     content: "";
+                //     height: 1px;
+                //     transform: translateY(-50%);
+                //     @apply ax-absolute ax-start-8 ax-top-1/2 ax-bg-light-200 ax-w-8;
+                // }
+
+                span {
+                    @apply ax-flex ax-items-center ax-my-1;
+                }
+                ul {
+                    @apply ax-ps-8 ax-border-s ax-border-light-200 dark:ax-border-dark-400;
+                }
+            }
+        }
+    }
+}

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 @@
 
 
 }
+