@fewangsit/wangsvue-presets 1.0.99 → 1.0.100-alpha.0

package/wangsvue/style.css

@@ -2,6 +2,19 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
 
+.icon{
+  display: flex;
+  height: 1em;
+  width: 1em;
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
 .ic-add {
   /* ri-add-line */
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z'/%3E%3C/svg%3E");
@@ -893,57 +906,6 @@
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 10h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1V9a7 7 0 0 1 14 0zM5 12v8h14v-8zm6 2h2v4h-2zm6-4V9A5 5 0 0 0 7 9v1z'/%3E%3C/svg%3E");
 }
 
-.container{
-  width: 100%;
-}
-
-@media (min-width: 640px){
-  .container{
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px){
-  .container{
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px){
-  .container{
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px){
-  .container{
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px){
-  .container{
-    max-width: 1536px;
-  }
-}
-
-.icon{
-  display: flex;
-  height: 1em;
-  width: 1em;
-  background-color: currentColor;
-  -webkit-mask-image: var(--svg);
-  mask-image: var(--svg);
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-}
-
-.\!pointer-events-none{
-  pointer-events: none !important;
-}
-
 .pointer-events-none{
   pointer-events: none;
 }
@@ -1177,10 +1139,18 @@
   margin: 0px !important;
 }
 
+.\!m-\[2px\]{
+  margin: 2px !important;
+}
+
 .m-0{
   margin: 0px;
 }
 
+.m-\[3px\]{
+  margin: 3px;
+}
+
 .\!mx-auto{
   margin-left: auto !important;
   margin-right: auto !important;
@@ -1421,6 +1391,10 @@
   display: inline;
 }
 
+.\!flex{
+  display: flex !important;
+}
+
 .flex{
   display: flex;
 }
@@ -1461,6 +1435,10 @@
   height: 10px !important;
 }
 
+.\!h-\[26px\]{
+  height: 26px !important;
+}
+
 .\!h-\[28px\]{
   height: 28px !important;
 }
@@ -1570,6 +1548,10 @@
   height: 21px;
 }
 
+.h-\[22px\]{
+  height: 22px;
+}
+
 .h-\[26px\]{
   height: 26px;
 }
@@ -1812,6 +1794,10 @@
   width: 18px;
 }
 
+.w-\[1px\]{
+  width: 1px;
+}
+
 .w-\[200px\]{
   width: 200px;
 }
@@ -1820,6 +1806,10 @@
   width: 224px;
 }
 
+.w-\[22px\]{
+  width: 22px;
+}
+
 .w-\[272px\]{
   width: 272px;
 }
@@ -2559,6 +2549,12 @@
   scroll-behavior: smooth;
 }
 
+.truncate{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .overflow-ellipsis{
   text-overflow: ellipsis;
 }
@@ -4321,6 +4317,12 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-\[-2px_2px_2px_rgba\(0\2c 0\2c 0\2c 0\.25\)\]{
+  --tw-shadow: -2px 2px 2px rgba(0,0,0,0.25);
+  --tw-shadow-colored: -2px 2px 2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-\[-4px_4px_20px_0px_\#0000001A\]{
   --tw-shadow: -4px 4px 20px 0px #0000001A;
   --tw-shadow-colored: -4px 4px 20px 0px var(--tw-shadow-color);
@@ -5557,6 +5559,10 @@ h6,
   background-color: rgb(248 247 238 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-50\/30:hover{
+  background-color: rgb(248 247 238 / 0.3);
+}
+
 .hover\:bg-primary-50\/80:hover{
   background-color: rgb(248 247 238 / 0.8);
 }
@@ -5719,6 +5725,11 @@ h6,
   --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity));
 }
 
+.hover\:ring-primary-500:hover{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(159 124 60 / var(--tw-ring-opacity));
+}
+
 .hover\:ring-primary-600:hover{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(133 103 50 / var(--tw-ring-opacity));
@@ -5743,6 +5754,10 @@ h6,
   background-color: rgb(248 247 238 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-primary-50\/30:focus{
+  background-color: rgb(248 247 238 / 0.3);
+}
+
 .focus\:bg-primary-600:focus{
   --tw-bg-opacity: 1;
   background-color: rgb(133 103 50 / var(--tw-bg-opacity));
@@ -6289,6 +6304,36 @@ h6,
   }
 }
 
+.dark\:bg-white:where(.dark, .dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.dark\:text-general-800:where(.dark, .dark *){
+  --tw-text-opacity: 1;
+  color: rgb(32 30 41 / var(--tw-text-opacity));
+}
+
+.dark\:ring-danger-500:where(.dark, .dark *){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(183 75 36 / var(--tw-ring-opacity));
+}
+
+.dark\:ring-general-200:where(.dark, .dark *){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(181 179 199 / var(--tw-ring-opacity));
+}
+
+.dark\:hover\:ring-primary-400:hover:where(.dark, .dark *){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(189 165 82 / var(--tw-ring-opacity));
+}
+
+.dark\:focus\:ring-primary-400:focus:where(.dark, .dark *){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(189 165 82 / var(--tw-ring-opacity));
+}
+
 .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{
   display: none;
 }
@@ -6382,6 +6427,14 @@ h6,
   width: 100%;
 }
 
+.\[\&\>\.icon\]\:\!h-4>.icon{
+  height: 1rem !important;
+}
+
+.\[\&\>\.icon\]\:\!w-4>.icon{
+  width: 1rem !important;
+}
+
 .\[\&\>\[data-pc-name\=badge\]\]\:h-4>[data-pc-name=badge]{
   height: 1rem;
 }

package/wangsvue/tabmenu/index.d.ts

@@ -1,57 +1,2 @@
-declare namespace _default {
-    namespace root {
-        let _class: string;
-        export { _class as class };
-        export let style: string;
-    }
-    namespace menu {
-        let _class_1: string[];
-        export { _class_1 as class };
-    }
-    namespace menuitem {
-        let _class_2: string;
-        export { _class_2 as class };
-    }
-    function action({ context, state }: {
-        context: any;
-        state: any;
-    }): {
-        class: (string | {
-            'bg-transparent ': boolean;
-            'text-grayscale-900': boolean;
-            'border-primary-400': boolean;
-            'border-primary-100': boolean;
-            'text-primary-500': boolean;
-            'focus-visible:border-primary-200 focus-visible:text-primary-400'?: undefined;
-            'pointer-events-none'?: undefined;
-            'opacity-60'?: undefined;
-        } | {
-            'focus-visible:border-primary-200 focus-visible:text-primary-400': boolean;
-            'bg-transparent '?: undefined;
-            'text-grayscale-900'?: undefined;
-            'border-primary-400'?: undefined;
-            'border-primary-100'?: undefined;
-            'text-primary-500'?: undefined;
-            'pointer-events-none'?: undefined;
-            'opacity-60'?: undefined;
-        } | {
-            'pointer-events-none': any;
-            'opacity-60': any;
-            'bg-transparent '?: undefined;
-            'text-grayscale-900'?: undefined;
-            'border-primary-400'?: undefined;
-            'border-primary-100'?: undefined;
-            'text-primary-500'?: undefined;
-            'focus-visible:border-primary-200 focus-visible:text-primary-400'?: undefined;
-        })[];
-    };
-    namespace icon {
-        let _class_3: string;
-        export { _class_3 as class };
-    }
-    namespace inkbar {
-        let _class_4: string;
-        export { _class_4 as class };
-    }
-}
+declare const _default: import("@wangs-ui/core/dist/types/themes/preset-definitions").ToRawPreset<import("@wangs-ui/core/dist/types/components/tabmenu/tabmenu.type").TabMenuPreset, import("@wangs-ui/core/dist/types/components/tabmenu/tabmenu.type").TabMenuPresetMethodOptions>;
 export default _default;

package/wangsvue/tabmenu/index.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
+var core_1 = require("@wangs-ui/core");
+exports.default = (0, core_1.definePreset)('WANGS-TAB-MENU', {
     root: {
         class: 'overflow-x-auto',
         style: 'scrollbar-width: none',
     },
-    menu: {
+    menu: function () { return ({
         class: [
             // Flexbox
             'flex flex-1',
@@ -16,13 +17,13 @@ exports.default = {
             // Colors
             'text-general-100',
         ],
-    },
+    }); },
     menuitem: {
         class: 'mr-0',
     },
     action: function (_a) {
         var _b, _c;
-        var context = _a.context, state = _a.state;
+        var context = _a.context;
         return ({
             class: [
                 'relative',
@@ -37,18 +38,18 @@ exports.default = {
                 'border-b-2',
                 // Colors and Conditions
                 {
-                    'bg-transparent ': state.d_activeIndex !== context.index,
-                    'text-grayscale-900': state.d_activeIndex !== context.index,
-                    'border-primary-400': state.d_activeIndex === context.index,
-                    'border-primary-100': state.d_activeIndex !== context.index,
-                    'text-primary-500': state.d_activeIndex === context.index,
+                    'bg-transparent ': !context.active,
+                    'text-grayscale-900': !context.active,
+                    'border-primary-400': context.active,
+                    'border-primary-100': !context.active,
+                    'text-primary-500': context.active,
                 },
                 // States
                 'hover:bg-primary-50',
                 'focus-visible:outline-none focus-visible:outline-offset-0',
                 'focus-visible:bg-primary-50',
                 {
-                    'focus-visible:border-primary-200 focus-visible:text-primary-400': state.d_activeIndex !== context.index,
+                    'focus-visible:border-primary-200 focus-visible:text-primary-400': !context.active,
                 },
                 // Disabled States
                 {
@@ -69,7 +70,13 @@ exports.default = {
     icon: {
         class: 'mr-2',
     },
-    inkbar: {
-        class: 'grow border-b-2 border-primary-100',
+    inkbar: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'grow border-b-2 border-primary-100',
+                { hidden: props.type === 'pill' || props.useTrailingLine === false },
+            ],
+        });
     },
-};
+});

package/wangsvue/timeline/index.d.ts

@@ -38,6 +38,26 @@ declare namespace _default {
         })[];
         'data-wv-section': string;
     };
+    function markerDot(item: any): {
+        class: string[];
+        'data-wv-section': string;
+    };
+    namespace contentHeader {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace contentDetailKey {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace contentDetailValue {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace contentDate {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
     function connector({ props }: {
         props: any;
     }): {

package/wangsvue/timeline/index.js

@@ -68,6 +68,22 @@ exports.default = {
         ],
         'data-wv-section': 'markerArrow',
     }); },
+    markerDot: function (item) { return ({
+        'class': ['hidden'],
+        'data-wv-section': 'markerDot',
+    }); },
+    contentHeader: {
+        class: ['leading-5 cursor-pointer truncate !text-xs'],
+    },
+    contentDetailKey: {
+        class: ['font-semibold whitespace-nowrap'],
+    },
+    contentDetailValue: {
+        class: ['text-xs'],
+    },
+    contentDate: {
+        class: [''],
+    },
     connector: function (_a) {
         var props = _a.props;
         return ({