@ng-nest/ui 20.1.6 → 20.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-nest/ui",
-  "version": "20.1.6",
+  "version": "20.2.0",
   "license": "MIT",
   "homepage": "https://www.ngnest.com",
   "author": "ng-nest",
@@ -41,13 +41,17 @@
       "types": "./alert/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-alert.mjs"
     },
+    "./anchor": {
+      "types": "./anchor/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-anchor.mjs"
+    },
     "./api": {
       "types": "./api/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-api.mjs"
     },
-    "./anchor": {
-      "types": "./anchor/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-anchor.mjs"
+    "./attachments": {
+      "types": "./attachments/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-attachments.mjs"
     },
     "./avatar": {
       "types": "./avatar/index.d.ts",
@@ -57,14 +61,14 @@
       "types": "./back-top/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-back-top.mjs"
     },
-    "./badge": {
-      "types": "./badge/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-badge.mjs"
-    },
     "./auto-complete": {
       "types": "./auto-complete/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-auto-complete.mjs"
     },
+    "./badge": {
+      "types": "./badge/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-badge.mjs"
+    },
     "./base-form": {
       "types": "./base-form/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-base-form.mjs"
@@ -161,14 +165,14 @@
       "types": "./empty/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-empty.mjs"
     },
-    "./find": {
-      "types": "./find/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-find.mjs"
-    },
     "./examples": {
       "types": "./examples/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-examples.mjs"
     },
+    "./find": {
+      "types": "./find/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-find.mjs"
+    },
     "./form": {
       "types": "./form/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-form.mjs"
@@ -181,14 +185,14 @@
       "types": "./i18n/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-i18n.mjs"
     },
-    "./image": {
-      "types": "./image/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-image.mjs"
-    },
     "./icon": {
       "types": "./icon/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-icon.mjs"
     },
+    "./image": {
+      "types": "./image/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-image.mjs"
+    },
     "./inner": {
       "types": "./inner/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-inner.mjs"
@@ -269,14 +273,14 @@
       "types": "./progress/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-progress.mjs"
     },
-    "./radio": {
-      "types": "./radio/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-radio.mjs"
-    },
     "./prompts": {
       "types": "./prompts/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-prompts.mjs"
     },
+    "./radio": {
+      "types": "./radio/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-radio.mjs"
+    },
     "./rate": {
       "types": "./rate/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-rate.mjs"
@@ -325,6 +329,10 @@
       "types": "./steps/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-steps.mjs"
     },
+    "./suggestion": {
+      "types": "./suggestion/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-suggestion.mjs"
+    },
     "./switch": {
       "types": "./switch/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-switch.mjs"
@@ -357,22 +365,18 @@
       "types": "./theme/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-theme.mjs"
     },
+    "./thought-chain": {
+      "types": "./thought-chain/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-thought-chain.mjs"
+    },
     "./time-ago": {
       "types": "./time-ago/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-time-ago.mjs"
     },
-    "./time-picker": {
-      "types": "./time-picker/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-time-picker.mjs"
-    },
     "./time-range": {
       "types": "./time-range/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-time-range.mjs"
     },
-    "./timeline": {
-      "types": "./timeline/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-timeline.mjs"
-    },
     "./tooltip": {
       "types": "./tooltip/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-tooltip.mjs"
@@ -381,18 +385,26 @@
       "types": "./transfer/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-transfer.mjs"
     },
-    "./tree": {
-      "types": "./tree/index.d.ts",
-      "default": "./fesm2022/ng-nest-ui-tree.mjs"
-    },
     "./tree-file": {
       "types": "./tree-file/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-tree-file.mjs"
     },
+    "./timeline": {
+      "types": "./timeline/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-timeline.mjs"
+    },
     "./tree-select": {
       "types": "./tree-select/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-tree-select.mjs"
     },
+    "./time-picker": {
+      "types": "./time-picker/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-time-picker.mjs"
+    },
+    "./tree": {
+      "types": "./tree/index.d.ts",
+      "default": "./fesm2022/ng-nest-ui-tree.mjs"
+    },
     "./typography": {
       "types": "./typography/index.d.ts",
       "default": "./fesm2022/ng-nest-ui-typography.mjs"

package/popover/index.d.ts

@@ -117,7 +117,8 @@ declare class XPopoverPortalComponent {
     portalHover: _angular_core.OutputEmitterRef<boolean>;
     mouseenter(): void;
     mouseleave(): void;
-    animation: boolean;
+    animateEnter: string;
+    animateLeave: string;
     classMap: _angular_core.Signal<{
         [x: string]: boolean;
     }>;

package/prompts/index.d.ts

@@ -32,13 +32,18 @@ declare class XPromptsProperty extends XPromptsProperty_base {
      * @en_US List vertical display
      */
     readonly vertical: i0.InputSignalWithTransform<boolean, XBoolean>;
+    /**
+     * @zh_CN wrap
+     * @en_US List wrap display
+     */
+    readonly wrap: i0.InputSignalWithTransform<boolean, XBoolean>;
     /**
      * @zh_CN Item 点击事件
      * @en_US Item click event
      */
     readonly itemClick: i0.OutputEmitterRef<XPromptsNode>;
     static ɵfac: i0.ɵɵFactoryDeclaration<XPromptsProperty, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<XPromptsProperty, "x-prompts-property", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XPromptsProperty, "x-prompts-property", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
 }
 /**
  * @zh_CN 提示词
@@ -49,12 +54,17 @@ interface XPromptsNode extends XIdentityProperty {
      * @zh_CN 描述
      * @en_US Description
      */
-    description: string;
+    description?: string;
     /**
      * @zh_CN 图标
      * @en_US Icon
      */
     icon?: string;
+    /**
+     * @zh_CN 节点样式
+     * @en_US Icon style
+     */
+    style?: XStyle;
     /**
      * @zh_CN 图标样式
      * @en_US Icon style
@@ -65,6 +75,11 @@ interface XPromptsNode extends XIdentityProperty {
      * @en_US Whether to disable
      */
     disabled?: boolean;
+    /**
+     * @zh_CN 自定义属性
+     * @en_US Custom attributes
+     */
+    [property: string]: any;
 }
 
 declare class XPromptsComponent extends XPromptsProperty {

package/select/index.d.ts

@@ -127,6 +127,13 @@ declare class XSelectProperty extends XSelectProperty_base {
      * @en_US Display Border
      */
     readonly bordered: _angular_core.InputSignalWithTransform<boolean, XBoolean>;
+    /**
+     * @zh_CN 输入框样式
+     * @en_US Input Style
+     */
+    readonly inputStyle: _angular_core.InputSignal<{
+        [style: string]: any;
+    } | undefined>;
     /**
      * @zh_CN 下拉框的最大高度
      * @en_US The biggest height of the drop-down box
@@ -295,7 +302,7 @@ declare class XSelectProperty extends XSelectProperty_base {
      */
     readonly inputValidator: _angular_core.InputSignal<((value: any) => boolean) | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<XSelectProperty, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XSelectProperty, "x-select-property", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "async": { "alias": "async"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "nodeTpl": { "alias": "nodeTpl"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "portalMaxHeight": { "alias": "portalMaxHeight"; "required": false; "isSignal": true; }; "portalHeight": { "alias": "portalHeight"; "required": false; "isSignal": true; }; "portalWidth": { "alias": "portalWidth"; "required": false; "isSignal": true; }; "portalClass": { "alias": "portalClass"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "maxTagContent": { "alias": "maxTagContent"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "allowInput": { "alias": "allowInput"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "valueTpl": { "alias": "valueTpl"; "required": false; "isSignal": true; }; "valueTplContext": { "alias": "valueTplContext"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<XSelectProperty, "x-select-property", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "async": { "alias": "async"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "selectAllText": { "alias": "selectAllText"; "required": false; "isSignal": true; }; "nodeTpl": { "alias": "nodeTpl"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "portalMaxHeight": { "alias": "portalMaxHeight"; "required": false; "isSignal": true; }; "portalHeight": { "alias": "portalHeight"; "required": false; "isSignal": true; }; "portalWidth": { "alias": "portalWidth"; "required": false; "isSignal": true; }; "portalClass": { "alias": "portalClass"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; "maxTagContent": { "alias": "maxTagContent"; "required": false; "isSignal": true; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; "isSignal": true; }; "allowInput": { "alias": "allowInput"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "floatFixed": { "alias": "floatFixed"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pointer": { "alias": "pointer"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "labelAlign": { "alias": "labelAlign"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "valueTpl": { "alias": "valueTpl"; "required": false; "isSignal": true; }; "valueTplContext": { "alias": "valueTplContext"; "required": false; "isSignal": true; }; "before": { "alias": "before"; "required": false; "isSignal": true; }; "after": { "alias": "after"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "inputValidator": { "alias": "inputValidator"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, never, never, true, never>;
 }
 /**
  * Select Option
@@ -533,7 +540,8 @@ type XSelectVariant = XVariant;
 declare const XSelectPortalPrefix = "x-select-portal";
 
 declare class XSelectPortalComponent implements OnInit {
-    get getPlacement(): XPlacement;
+    animateEnter: string;
+    animateLeave: string;
     done(): void;
     start(): void;
     destroy: _angular_core.WritableSignal<boolean>;
@@ -557,6 +565,7 @@ declare class XSelectPortalComponent implements OnInit {
     virtualScroll: _angular_core.InputSignal<boolean>;
     keywordText: _angular_core.InputSignal<any>;
     size: _angular_core.InputSignal<XSize | undefined>;
+    showPortal: _angular_core.WritableSignal<boolean>;
     animating: _angular_core.OutputEmitterRef<boolean>;
     nodeClick: _angular_core.OutputEmitterRef<{
         node: XSelectNode | null;
@@ -571,6 +580,7 @@ declare class XSelectPortalComponent implements OnInit {
     }>;
     getSelectAllText: _angular_core.Signal<string | undefined>;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     stopPropagation(event: Event): void;
     onNodeClick(node: XSelectNode): void;
     onSelectAll(_isSelectAll: boolean): void;

package/sender/index.d.ts

@@ -153,6 +153,7 @@ declare class XSenderProperty extends XSenderProperty_base {
 type XSenderSubmitType = 'enter' | 'shiftEnter';
 
 declare class XSenderComponent extends XSenderProperty {
+    elementRef: ElementRef<any>;
     textarea: _angular_core.Signal<ElementRef<HTMLTextAreaElement>>;
     focused: _angular_core.WritableSignal<boolean>;
     maxRowsComputed: _angular_core.Signal<number | undefined>;

package/style/animates/base.scss

@@ -0,0 +1,32 @@
+@use '../params/index.scss' as *;
+
+.x-base-enter {
+  animation: x-base-enter $x-animation-duration-base;
+  animation-timing-function: ease-in;
+}
+.x-base-leave {
+  animation: x-base-leave $x-animation-duration-base;
+  animation-timing-function: ease-out;
+}
+
+@keyframes x-base-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes x-base-leave {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}

package/style/animates/conect.scss

@@ -0,0 +1,32 @@
+@use '../params/index.scss' as *;
+
+.x-connect-enter {
+  animation: x-connect-enter $x-animation-duration-fast;
+  animation-timing-function: ease-in;
+}
+.x-connect-leave {
+  animation: x-connect-leave $x-animation-duration-fast;
+  animation-timing-function: ease-out;
+}
+
+@keyframes x-connect-enter {
+  from {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes x-connect-leave {
+  from {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+}

package/style/animates/fade.scss

@@ -0,0 +1,32 @@
+@use '../params/index.scss' as *;
+
+.x-fade-enter {
+  animation: x-fade-enter $x-animation-duration-fast;
+  animation-timing-function: ease-in;
+}
+.x-fade-leave {
+  animation: x-fade-leave $x-animation-duration-fast;
+  animation-timing-function: ease-out;
+}
+
+@keyframes x-fade-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes x-fade-leave {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}

package/style/animates/index.scss

@@ -0,0 +1,11 @@
+@use './base' as *;
+@use './conect' as *;
+@use './fade' as *;
+@use './slide' as *;
+@use './move' as *;
+@use './opacity' as *;
+
+.x-animate-disabled {
+  animation: none !important;
+  transition: none !important;
+}

package/style/animates/move.scss

@@ -0,0 +1,129 @@
+@use '../params/index.scss' as *;
+
+.x-move-top-start-enter,
+.x-move-top-enter,
+.x-move-top-end-enter,
+.x-move-center-enter {
+  animation: x-move-top-enter $x-animation-duration-base ease-in;
+}
+
+.x-move-top-start-leave,
+.x-move-top-leave,
+.x-move-top-end-leave,
+.x-move-center-leave {
+  animation: x-move-top-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-move-top-enter {
+  from {
+    transform: translateY(-2rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes x-move-top-leave {
+  from {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-2rem);
+    opacity: 0;
+  }
+}
+
+.x-move-left-enter {
+  animation: x-move-left-enter $x-animation-duration-base ease-in;
+}
+.x-move-left-leave {
+  animation: x-move-left-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-move-left-enter {
+  from {
+    transform: translateX(-2rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes x-move-left-leave {
+  from {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-2rem);
+    opacity: 0;
+  }
+}
+
+.x-move-right-enter {
+  animation: x-move-right-enter $x-animation-duration-base ease-in;
+}
+.x-move-right-leave {
+  animation: x-move-right-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-move-right-enter {
+  from {
+    transform: translateX(2rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes x-move-right-leave {
+  from {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(2rem);
+    opacity: 0;
+  }
+}
+
+.x-move-bottom-start-enter,
+.x-move-bottom-enter,
+.x-move-bottom-end-enter {
+  animation: x-move-bottom-enter $x-animation-duration-base ease-in;
+}
+
+.x-move-bottom-start-leave,
+.x-move-bottom-leave,
+.x-move-bottom-end-leave {
+  animation: x-move-bottom-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-move-bottom-enter {
+  from {
+    transform: translateY(2rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes x-move-bottom-leave {
+  from {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(2rem);
+    opacity: 0;
+  }
+}

package/style/animates/opacity.scss

@@ -0,0 +1,26 @@
+@use '../params/index.scss' as *;
+
+.x-opacity-enter {
+  animation: x-opacity-enter $x-animation-duration-slow ease-in;
+}
+.x-opacity-leave {
+  animation: x-opacity-leave $x-animation-duration-slow ease-out;
+}
+
+@keyframes x-opacity-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes x-opacity-leave {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/style/animates/slide.scss

@@ -0,0 +1,113 @@
+@use '../params/index.scss' as *;
+
+.x-slide-right-enter {
+  animation: x-right-enter $x-animation-duration-base ease-in;
+}
+.x-slide-right-leave {
+  animation: x-right-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-right-enter {
+  from {
+    transform: translateX(100%);
+    opacity: 0.8;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes x-right-leave {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0.8;
+  }
+}
+
+.x-slide-left-enter {
+  animation: x-left-enter $x-animation-duration-base ease-in;
+}
+.x-slide-left-leave {
+  animation: x-left-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-left-enter {
+  from {
+    transform: translateX(-100%);
+    opacity: 0.8;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes x-left-leave {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0.8;
+  }
+}
+
+.x-slide-top-enter {
+  animation: x-top-enter $x-animation-duration-base ease-in;
+}
+.x-slide-top-leave {
+  animation: x-top-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-top-enter {
+  from {
+    transform: translateY(-100%);
+    opacity: 0.8;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes x-top-leave {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-100%);
+    opacity: 0.8;
+  }
+}
+
+.x-slide-bottom-enter {
+  animation: x-bottom-enter $x-animation-duration-base ease-in;
+}
+.x-slide-bottom-leave {
+  animation: x-bottom-leave $x-animation-duration-base ease-out;
+}
+
+@keyframes x-bottom-enter {
+  from {
+    transform: translateY(100%);
+    opacity: 0.8;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes x-bottom-leave {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0.8;
+  }
+}