@uzum-tech/ui 0.1.0 → 0.1.2

package/lib/_styles/common/light.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const seemly_1 = require("seemly");
+const _common_1 = __importDefault(require("./_common"));
+const base = {
+    neutralBase: '#FFF',
+    neutralInvertBase: '#000',
+    neutralTextBase: '#000',
+    neutralPopover: '#fff',
+    neutralCard: '#fff',
+    neutralModal: '#fff',
+    neutralBody: '#fff',
+    neutralContainer: '#F3F4F6',
+    alpha1: '0.82',
+    alpha2: '0.72',
+    alpha3: '0.38',
+    alpha4: '0.24',
+    alpha5: '0.18',
+    alphaClose: '0.6',
+    alphaDisabled: '0.5',
+    alphaDisabledInput: '0.02',
+    alphaPending: '0.05',
+    alphaTablePending: '0.02',
+    alphaPressed: '0.07',
+    alphaAvatar: '0.2',
+    alphaRail: '0.14',
+    alphaProgressRail: '.08',
+    alphaBorder: '0.12',
+    alphaDivider: '0.06',
+    alphaInput: '0',
+    alphaAction: '0.02',
+    alphaTab: '0.04',
+    alphaScrollbar: '0.25',
+    alphaScrollbarHover: '0.4',
+    alphaCode: '0.05',
+    alphaTag: '0.02',
+    // primary
+    primaryHover: '#5B34C1',
+    primaryDefault: '#7000FF',
+    primaryActive: '#7000FF',
+    primarySuppl: '#5B34C1',
+    // info
+    infoHover: '#54B8F9',
+    infoDefault: '#90DDFB',
+    infoActive: '#90DDFB',
+    infoSuppl: '#54B8F9',
+    // error
+    errorHover: '#EA3E68',
+    errorDefault: '#F24835',
+    errorActive: '#EC616A',
+    errorSuppl: '#EA3E68',
+    // warning
+    warningHover: '#fcb040',
+    warningDefault: '#f0a020',
+    warningActive: '#c97c10',
+    warningSuppl: '#fcb040',
+    // success
+    successHover: '#09B849',
+    successDefault: '#00C853',
+    successActive: '#00C853',
+    successSuppl: '#09B849',
+    // tertiary
+    tertiaryHover: '#4E4D4D',
+    tertiaryDefault: '#101010',
+    tertiaryActive: '#4E4D4D',
+    tertiarySuppl: '#C5C7CA'
+};
+const baseBackgroundRgb = (0, seemly_1.rgba)(base.neutralBase);
+const baseInvertBackgroundRgb = (0, seemly_1.rgba)(base.neutralInvertBase);
+const overlayPrefix = 'rgba(' + baseInvertBackgroundRgb.slice(0, 3).join(', ') + ', ';
+function overlay(alpha) {
+    return overlayPrefix + String(alpha) + ')';
+}
+function neutral(alpha) {
+    const overlayRgba = Array.from(baseInvertBackgroundRgb);
+    overlayRgba[3] = Number(alpha);
+    return (0, seemly_1.composite)(baseBackgroundRgb, overlayRgba);
+}
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { baseColor: base.neutralBase, 
+    // primary color
+    primaryColor: base.primaryDefault, primaryColorHover: base.primaryHover, primaryColorPressed: base.primaryActive, primaryColorSuppl: base.primarySuppl, 
+    // info color
+    infoColor: base.infoDefault, infoColorHover: base.infoHover, infoColorPressed: base.infoActive, infoColorSuppl: base.infoSuppl, 
+    // success color
+    successColor: base.successDefault, successColorHover: base.successHover, successColorPressed: base.successActive, successColorSuppl: base.successSuppl, 
+    // warning color
+    warningColor: base.warningDefault, warningColorHover: base.warningHover, warningColorPressed: base.warningActive, warningColorSuppl: base.warningSuppl, 
+    // error color
+    errorColor: base.errorDefault, errorColorHover: base.errorHover, errorColorPressed: base.errorActive, errorColorSuppl: base.errorSuppl, 
+    // tertiary color
+    tertiaryColor: base.tertiaryDefault, tertiaryColorHover: base.tertiaryHover, tertiaryColorActive: base.tertiaryActive, tertiaryColorSuppl: base.tertiarySuppl, tertiaryElements: base.neutralContainer, 
+    // text color
+    textColorBase: base.neutralTextBase, textColor1: 'rgb(31, 34, 37)', textColor2: base.tertiaryDefault, textColor3: 'rgb(118, 124, 130)', textTertiary: '#999999', 
+    // textColor4: neutral(base.alpha4), // disabled, placeholder, icon
+    // textColor5: neutral(base.alpha5),
+    // Box Shadow colors
+    boxShadowHover: 'rgba(197, 199, 202, 0.25)', boxShadowFocus: 'rgba(197, 199, 202, 0.36)', boxShadowHoverChecked: 'rgba(187, 162, 253, 0.25)', boxShadowFocusChecked: 'rgba(187, 162, 253, 0.36)', textColorDisabled: neutral(base.alpha4), placeholderColor: neutral(base.alpha4), placeholderColorDisabled: neutral(base.alpha5), iconColor: neutral(base.alpha4), iconColorHover: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.75 }), iconColorPressed: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.9 }), iconColorDisabled: neutral(base.alpha5), opacity1: base.alpha1, opacity2: base.alpha2, opacity3: base.alpha3, opacity4: base.alpha4, opacity5: base.alpha5, dividerColor: 'rgb(239, 239, 245)', borderColor: 'rgb(224, 224, 230)', borderTagColor: '#C5C7CA', 
+    // close
+    closeIconColor: neutral(Number(base.alphaClose)), closeIconColorHover: neutral(Number(base.alphaClose)), closeIconColorPressed: neutral(Number(base.alphaClose)), closeColorHover: 'rgba(0, 0, 0, .09)', closeColorPressed: 'rgba(0, 0, 0, .13)', 
+    // clear
+    clearColor: neutral(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.75 }), clearColorPressed: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.9 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: neutral(base.alphaProgressRail), railColor: 'rgb(219, 219, 223)', popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: base.neutralContainer, avatarColor: base.neutralContainer, avatarTextColor: '#808080', avatarIconColor: base.tertiaryDefault, invertedColor: 'rgb(0, 20, 40)', tooltipColor: neutral('0.79'), inputColor: neutral(base.alphaInput), codeColor: 'rgb(244, 244, 248)', tabColor: 'rgb(247, 247, 250)', actionColor: 'rgb(250, 250, 252)', tableHeaderColor: 'rgb(250, 250, 252)', hoverColor: 'rgb(243, 243, 245)', 
+    // use color with alpha since it can be nested with header filter & sorter effect
+    tableColorHover: 'rgba(0, 0, 100, 0.03)', tableColorStriped: 'rgba(0, 0, 100, 0.02)', pressedColor: 'rgb(237, 237, 239)', opacityDisabled: base.alphaDisabled, inputColorDisabled: 'rgb(250, 250, 252)', 
+    // secondary button color
+    // can also be used in tertiary button & quaternary button
+    buttonColor2: base.neutralContainer, buttonColor2Hover: '#E7E8EA', buttonColor2Pressed: base.neutralContainer, boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)', boxShadow2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
+exports.default = derived;

package/lib/_styles/global/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/_styles/global/index.cssr.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../_utils/cssr");
+const _common_1 = __importDefault(require("../common/_common"));
+const {
+  fontSize,
+  fontFamily,
+  lineHeight
+} = _common_1.default;
+// All the components need the style
+// It is static and won't be changed in the app's lifetime
+// If user want to overrides it they need to use `u-global-style` is provided
+//
+// Technically we can remove font-size & font-family & line-height to make
+// it pure. However the coding cost doesn't worth it.
+//
+// -webkit-tap-hilight-color:
+// https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
+// In some android devices, there will be the style.
+exports.default = (0, cssr_1.c)('body', `
+ margin: 0;
+ font-size: ${fontSize};
+ font-family: ${fontFamily};
+ line-height: ${lineHeight};
+ -webkit-text-size-adjust: 100%;
+ -webkit-tap-highlight-color: transparent;
+`, [(0, cssr_1.c)('input', `
+ font-family: inherit;
+ font-size: inherit;
+ `)]);

package/lib/_styles/transitions/fade-down.cssr.d.ts

@@ -0,0 +1,11 @@
+import type { CNode } from 'css-render';
+interface FadeDownTransitionOptions {
+    name?: string;
+    fromOffset?: string;
+    enterDuration?: string;
+    leaveDuration?: string;
+    enterCubicBezier?: string;
+    leaveCubicBezier?: string;
+}
+export declare function fadeDownTransition({ name, fromOffset, enterDuration, leaveDuration, enterCubicBezier, leaveCubicBezier }?: FadeDownTransitionOptions): CNode[];
+export {};

package/lib/_styles/transitions/fade-down.cssr.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fadeDownTransition = void 0;
+const cssr_1 = require("../../_utils/cssr");
+const _common_1 = __importDefault(require("../common/_common"));
+const {
+  cubicBezierEaseInOut
+} = _common_1.default;
+function fadeDownTransition({
+  name = 'fade-down',
+  fromOffset = '-4px',
+  enterDuration = '.3s',
+  leaveDuration = '.3s',
+  enterCubicBezier = cubicBezierEaseInOut,
+  leaveCubicBezier = cubicBezierEaseInOut
+} = {}) {
+  return [(0, cssr_1.c)(`&.${name}-transition-enter-from, &.${name}-transition-leave-to`, {
+    opacity: 0,
+    transform: `translateY(${fromOffset})`
+  }), (0, cssr_1.c)(`&.${name}-transition-enter-to, &.${name}-transition-leave-from`, {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }), (0, cssr_1.c)(`&.${name}-transition-leave-active`, {
+    transition: `opacity ${leaveDuration} ${leaveCubicBezier}, transform ${leaveDuration} ${leaveCubicBezier}`
+  }), (0, cssr_1.c)(`&.${name}-transition-enter-active`, {
+    transition: `opacity ${enterDuration} ${enterCubicBezier}, transform ${enterDuration} ${enterCubicBezier}`
+  })];
+}
+exports.fadeDownTransition = fadeDownTransition;

package/lib/_styles/transitions/fade-in-height-expand.cssr.d.ts

@@ -0,0 +1,13 @@
+import type { CNode } from 'css-render';
+interface FadeInHeightExpandTransitionOption {
+    overflow?: string;
+    duration?: string;
+    originalTransition?: string;
+    leavingDelay?: string;
+    foldPadding?: boolean;
+    enterToProps?: Record<string, string | number> | undefined;
+    leaveToProps?: Record<string, string | number> | undefined;
+    reverse?: boolean;
+}
+export declare function fadeInHeightExpandTransition({ overflow, duration, originalTransition, leavingDelay, foldPadding, enterToProps, leaveToProps, reverse }?: FadeInHeightExpandTransitionOption): CNode[];
+export {};

package/lib/_styles/transitions/fade-in-height-expand.cssr.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fadeInHeightExpandTransition = void 0;
+const cssr_1 = require("../../_utils/cssr");
+const _common_1 = __importDefault(require("../common/_common"));
+const {
+  cubicBezierEaseInOut,
+  cubicBezierEaseOut,
+  cubicBezierEaseIn
+} = _common_1.default;
+function fadeInHeightExpandTransition({
+  overflow = 'hidden',
+  duration = '.3s',
+  originalTransition = '',
+  leavingDelay = '0s',
+  foldPadding = false,
+  enterToProps = undefined,
+  leaveToProps = undefined,
+  reverse = false
+} = {}) {
+  const enterClass = reverse ? 'leave' : 'enter';
+  const leaveClass = reverse ? 'enter' : 'leave';
+  return [(0, cssr_1.c)(`&.fade-in-height-expand-transition-${leaveClass}-from,
+ &.fade-in-height-expand-transition-${enterClass}-to`, Object.assign(Object.assign({}, enterToProps), {
+    opacity: 1
+  })), (0, cssr_1.c)(`&.fade-in-height-expand-transition-${leaveClass}-to,
+ &.fade-in-height-expand-transition-${enterClass}-from`, Object.assign(Object.assign({}, leaveToProps), {
+    opacity: 0,
+    marginTop: '0 !important',
+    marginBottom: '0 !important',
+    paddingTop: foldPadding ? '0 !important' : undefined,
+    paddingBottom: foldPadding ? '0 !important' : undefined
+  })), (0, cssr_1.c)(`&.fade-in-height-expand-transition-${leaveClass}-active`, `
+ overflow: ${overflow};
+ transition:
+ max-height ${duration} ${cubicBezierEaseInOut} ${leavingDelay},
+ opacity ${duration} ${cubicBezierEaseOut} ${leavingDelay},
+ margin-top ${duration} ${cubicBezierEaseInOut} ${leavingDelay},
+ margin-bottom ${duration} ${cubicBezierEaseInOut} ${leavingDelay},
+ padding-top ${duration} ${cubicBezierEaseInOut} ${leavingDelay},
+ padding-bottom ${duration} ${cubicBezierEaseInOut} ${leavingDelay}
+ ${originalTransition ? ',' + originalTransition : ''}
+ `), (0, cssr_1.c)(`&.fade-in-height-expand-transition-${enterClass}-active`, `
+ overflow: ${overflow};
+ transition:
+ max-height ${duration} ${cubicBezierEaseInOut},
+ opacity ${duration} ${cubicBezierEaseIn},
+ margin-top ${duration} ${cubicBezierEaseInOut},
+ margin-bottom ${duration} ${cubicBezierEaseInOut},
+ padding-top ${duration} ${cubicBezierEaseInOut},
+ padding-bottom ${duration} ${cubicBezierEaseInOut}
+ ${originalTransition ? ',' + originalTransition : ''}
+ `)];
+}
+exports.fadeInHeightExpandTransition = fadeInHeightExpandTransition;

package/lib/_styles/transitions/fade-in-scale-up.cssr.d.ts

@@ -0,0 +1,10 @@
+import type { CNode } from 'css-render';
+interface FadeInScaleUpTransitionOptions {
+    transformOrigin?: string;
+    duration?: string;
+    enterScale?: string;
+    originalTransform?: string;
+    originalTransition?: string;
+}
+export declare function fadeInScaleUpTransition({ transformOrigin, duration, enterScale, originalTransform, originalTransition }?: FadeInScaleUpTransitionOptions): CNode[];
+export {};

package/lib/_styles/transitions/fade-in-scale-up.cssr.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fadeInScaleUpTransition = void 0;
+const cssr_1 = require("../../_utils/cssr");
+const _common_1 = __importDefault(require("../common/_common"));
+const {
+  cubicBezierEaseIn,
+  cubicBezierEaseOut
+} = _common_1.default;
+function fadeInScaleUpTransition({
+  transformOrigin = 'inherit',
+  duration = '.2s',
+  enterScale = '.9',
+  originalTransform = '',
+  originalTransition = ''
+} = {}) {
+  return [(0, cssr_1.c)('&.fade-in-scale-up-transition-leave-active', {
+    transformOrigin,
+    transition: `opacity ${duration} ${cubicBezierEaseIn}, transform ${duration} ${cubicBezierEaseIn} ${originalTransition && ',' + originalTransition}`
+  }), (0, cssr_1.c)('&.fade-in-scale-up-transition-enter-active', {
+    transformOrigin,
+    transition: `opacity ${duration} ${cubicBezierEaseOut}, transform ${duration} ${cubicBezierEaseOut} ${originalTransition && ',' + originalTransition}`
+  }), (0, cssr_1.c)('&.fade-in-scale-up-transition-enter-from, &.fade-in-scale-up-transition-leave-to', {
+    opacity: 0,
+    transform: `${originalTransform} scale(${enterScale})`
+  }), (0, cssr_1.c)('&.fade-in-scale-up-transition-leave-from, &.fade-in-scale-up-transition-enter-to', {
+    opacity: 1,
+    transform: `${originalTransform} scale(1)`
+  })];
+}
+exports.fadeInScaleUpTransition = fadeInScaleUpTransition;

package/lib/_styles/transitions/fade-in-width-expand.cssr.d.ts

@@ -0,0 +1,7 @@
+import type { CNode } from 'css-render';
+interface FadeInWidthExpandTransition {
+    duration?: string;
+    delay?: string;
+}
+export declare function fadeInWidthExpandTransition({ duration, delay }?: FadeInWidthExpandTransition): CNode[];
+export {};

package/lib/_styles/transitions/fade-in-width-expand.cssr.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fadeInWidthExpandTransition = void 0;
+const cssr_1 = require("../../_utils/cssr");
+const _common_1 = __importDefault(require("../common/_common"));
+const {
+  cubicBezierEaseInOut
+} = _common_1.default;
+function fadeInWidthExpandTransition({
+  duration = '.2s',
+  delay = '.1s'
+} = {}) {
+  return [(0, cssr_1.c)('&.fade-in-width-expand-transition-leave-from, &.fade-in-width-expand-transition-enter-to', {
+    opacity: 1
+  }), (0, cssr_1.c)('&.fade-in-width-expand-transition-leave-to, &.fade-in-width-expand-transition-enter-from', `
+ opacity: 0!important;
+ margin-left: 0!important;
+ margin-right: 0!important;
+ `), (0, cssr_1.c)('&.fade-in-width-expand-transition-leave-active', `
+ overflow: hidden;
+ transition:
+ opacity ${duration} ${cubicBezierEaseInOut},
+ max-width ${duration} ${cubicBezierEaseInOut} ${delay},
+ margin-left ${duration} ${cubicBezierEaseInOut} ${delay},
+ margin-right ${duration} ${cubicBezierEaseInOut} ${delay};
+ `), (0, cssr_1.c)('&.fade-in-width-expand-transition-enter-active', `
+ overflow: hidden;
+ transition:
+ opacity ${duration} ${cubicBezierEaseInOut} ${delay},
+ max-width ${duration} ${cubicBezierEaseInOut},
+ margin-left ${duration} ${cubicBezierEaseInOut},
+ margin-right ${duration} ${cubicBezierEaseInOut};
+ `)];
+}
+exports.fadeInWidthExpandTransition = fadeInWidthExpandTransition;

package/lib/_styles/transitions/fade-in.cssr.d.ts

@@ -0,0 +1,10 @@
+import type { CNode } from 'css-render';
+interface FadeInTransitionOptions {
+    name?: string;
+    enterDuration?: string;
+    leaveDuration?: string;
+    enterCubicBezier?: string;
+    leaveCubicBezier?: string;
+}
+export declare function fadeInTransition({ name, enterDuration, leaveDuration, enterCubicBezier, leaveCubicBezier }?: FadeInTransitionOptions): CNode[];
+export {};

package/lib/_styles/transitions/fade-in.cssr.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fadeInTransition = void 0;
+const cssr_1 = require("../../_utils/cssr");
+const _common_1 = __importDefault(require("../common/_common"));
+const {
+  cubicBezierEaseInOut
+} = _common_1.default;
+function fadeInTransition({
+  name = 'fade-in',
+  enterDuration = '0.2s',
+  leaveDuration = '0.2s',
+  enterCubicBezier = cubicBezierEaseInOut,
+  leaveCubicBezier = cubicBezierEaseInOut
+} = {}) {
+  return [(0, cssr_1.c)(`&.${name}-transition-enter-active`, {
+    transition: `all ${enterDuration} ${enterCubicBezier}!important`
+  }), (0, cssr_1.c)(`&.${name}-transition-leave-active`, {
+    transition: `all ${leaveDuration} ${leaveCubicBezier}!important`
+  }), (0, cssr_1.c)(`&.${name}-transition-enter-from, &.${name}-transition-leave-to`, {
+    opacity: 0
+  }), (0, cssr_1.c)(`&.${name}-transition-leave-from, &.${name}-transition-enter-to`, {
+    opacity: 1
+  })];
+}
+exports.fadeInTransition = fadeInTransition;

package/lib/_styles/transitions/fade-up-width-expand.cssr.d.ts

@@ -0,0 +1,6 @@
+import type { CNode } from 'css-render';
+interface FadeUpWidthExpandTransition {
+    duration?: string;
+}
+export declare function fadeUpWidthExpandTransition({ duration }?: FadeUpWidthExpandTransition): CNode[];
+export {};

package/lib/_styles/transitions/fade-up-width-expand.cssr.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fadeUpWidthExpandTransition = void 0;
+const cssr_1 = require("../../_utils/cssr");
+const _common_1 = __importDefault(require("../common/_common"));
+const {
+  cubicBezierEaseOut
+} = _common_1.default;
+function fadeUpWidthExpandTransition({
+  duration = '.2s'
+} = {}) {
+  return [(0, cssr_1.c)('&.fade-up-width-expand-transition-leave-active', {
+    transition: `
+ opacity ${duration} ${cubicBezierEaseOut},
+ max-width ${duration} ${cubicBezierEaseOut},
+ transform ${duration} ${cubicBezierEaseOut}
+ `
+  }), (0, cssr_1.c)('&.fade-up-width-expand-transition-enter-active', {
+    transition: `
+ opacity ${duration} ${cubicBezierEaseOut},
+ max-width ${duration} ${cubicBezierEaseOut},
+ transform ${duration} ${cubicBezierEaseOut}
+ `
+  }), (0, cssr_1.c)('&.fade-up-width-expand-transition-enter-to', {
+    opacity: 1,
+    transform: 'translateX(0) translateY(0)'
+  }), (0, cssr_1.c)('&.fade-up-width-expand-transition-enter-from', {
+    maxWidth: '0 !important',
+    opacity: 0,
+    transform: 'translateY(60%)'
+  }), (0, cssr_1.c)('&.fade-up-width-expand-transition-leave-from', {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }), (0, cssr_1.c)('&.fade-up-width-expand-transition-leave-to', {
+    maxWidth: '0 !important',
+    opacity: 0,
+    transform: 'translateY(60%)'
+  })];
+}
+exports.fadeUpWidthExpandTransition = fadeUpWidthExpandTransition;

package/lib/_styles/transitions/icon-switch.cssr.d.ts

@@ -0,0 +1,9 @@
+import type { CNode } from 'css-render';
+interface IconSwitchTransitionOptions {
+    originalTransform?: string;
+    left?: string | number;
+    top?: string | number;
+    transition?: string;
+}
+export declare function iconSwitchTransition({ originalTransform, left, top, transition }?: IconSwitchTransitionOptions): CNode[];
+export {};

package/lib/_styles/transitions/icon-switch.cssr.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconSwitchTransition = void 0;
+const cssr_1 = require("../../_utils/cssr");
+const _common_1 = __importDefault(require("../common/_common"));
+const {
+  cubicBezierEaseInOut
+} = _common_1.default;
+function iconSwitchTransition({
+  originalTransform = '',
+  left = 0,
+  top = 0,
+  transition = `all .3s ${cubicBezierEaseInOut} !important`
+} = {}) {
+  return [(0, cssr_1.c)('&.icon-switch-transition-enter-from, &.icon-switch-transition-leave-to', {
+    transform: originalTransform + ' scale(0.75)',
+    left,
+    top,
+    opacity: 0
+  }), (0, cssr_1.c)('&.icon-switch-transition-enter-to, &.icon-switch-transition-leave-from', {
+    transform: `scale(1) ${originalTransform}`,
+    left,
+    top,
+    opacity: 1
+  }), (0, cssr_1.c)('&.icon-switch-transition-enter-active, &.icon-switch-transition-leave-active', {
+    transformOrigin: 'center',
+    position: 'absolute',
+    left,
+    top,
+    transition
+  })];
+}
+exports.iconSwitchTransition = iconSwitchTransition;

package/lib/_styles/transitions/slide-in-from-bottom.d.ts

@@ -0,0 +1,8 @@
+import type { CNode } from 'css-render';
+interface SlideInFromBottomTransitionOptions {
+    duration?: string;
+    leaveDuration?: string;
+    name?: string;
+}
+export declare function slideInFromBottomTransition({ duration, leaveDuration, name }?: SlideInFromBottomTransitionOptions): CNode[];
+export {};

package/lib/_styles/transitions/slide-in-from-bottom.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slideInFromBottomTransition = void 0;
+const cssr_1 = require("../../_utils/cssr");
+const _common_1 = __importDefault(require("../common/_common"));
+const { cubicBezierEaseIn, cubicBezierEaseOut } = _common_1.default;
+function slideInFromBottomTransition({ duration = '0.3s', leaveDuration = '0.2s', name = 'slide-in-from-bottom' } = {}) {
+    return [
+        (0, cssr_1.c)(`&.${name}-transition-leave-active`, {
+            transition: `transform ${leaveDuration} ${cubicBezierEaseIn}`
+        }),
+        (0, cssr_1.c)(`&.${name}-transition-enter-active`, {
+            transition: `transform ${duration} ${cubicBezierEaseOut}`
+        }),
+        (0, cssr_1.c)(`&.${name}-transition-enter-to`, {
+            transform: 'translateY(0)'
+        }),
+        (0, cssr_1.c)(`&.${name}-transition-enter-from`, {
+            transform: 'translateY(100%)'
+        }),
+        (0, cssr_1.c)(`&.${name}-transition-leave-from`, {
+            transform: 'translateY(0)'
+        }),
+        (0, cssr_1.c)(`&.${name}-transition-leave-to`, {
+            transform: 'translateY(100%)'
+        })
+    ];
+}
+exports.slideInFromBottomTransition = slideInFromBottomTransition;

package/lib/_styles/transitions/slide-in-from-left.d.ts

@@ -0,0 +1,8 @@
+import type { CNode } from 'css-render';
+interface SlideInFromLeftTransitionOptions {
+    duration?: string;
+    leaveDuration?: string;
+    name?: string;
+}
+export declare function slideInFromLeftTransition({ duration, leaveDuration, name }?: SlideInFromLeftTransitionOptions): CNode[];
+export {};

package/lib/_styles/transitions/slide-in-from-left.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slideInFromLeftTransition = void 0;
+const cssr_1 = require("../../_utils/cssr");
+const _common_1 = __importDefault(require("../common/_common"));
+const { cubicBezierEaseIn, cubicBezierEaseOut } = _common_1.default;
+function slideInFromLeftTransition({ duration = '0.3s', leaveDuration = '0.2s', name = 'slide-in-from-left' } = {}) {
+    return [
+        (0, cssr_1.c)(`&.${name}-transition-leave-active`, {
+            transition: `transform ${leaveDuration} ${cubicBezierEaseIn}`
+        }),
+        (0, cssr_1.c)(`&.${name}-transition-enter-active`, {
+            transition: `transform ${duration} ${cubicBezierEaseOut}`
+        }),
+        (0, cssr_1.c)(`&.${name}-transition-enter-to`, {
+            transform: 'translateX(0)'
+        }),
+        (0, cssr_1.c)(`&.${name}-transition-enter-from`, {
+            transform: 'translateX(-100%)'
+        }),
+        (0, cssr_1.c)(`&.${name}-transition-leave-from`, {
+            transform: 'translateX(0)'
+        }),
+        (0, cssr_1.c)(`&.${name}-transition-leave-to`, {
+            transform: 'translateX(-100%)'
+        })
+    ];
+}
+exports.slideInFromLeftTransition = slideInFromLeftTransition;

package/lib/_styles/transitions/slide-in-from-right.d.ts

@@ -0,0 +1,8 @@
+import type { CNode } from 'css-render';
+interface SlideInFromRightTransitionOptions {
+    duration?: string;
+    leaveDuration?: string;
+    name?: string;
+}
+export declare function slideInFromRightTransition({ duration, leaveDuration, name }?: SlideInFromRightTransitionOptions): CNode[];
+export {};