@sheinx/shineout-style 3.0.0-alpha.1

package/esm/popover/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "popoverStyle", {
+  enumerable: true,
+  get: function get() {
+    return _popover.default;
+  }
+});
+exports.usePopoverStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _popover = _interopRequireDefault(require("./popover"));
+var usePopoverStyle = (0, _jssStyle.styled)(_popover.default, 'popover');
+exports.usePopoverStyle = usePopoverStyle;
+var _default = usePopoverStyle;
+exports.default = _default;

package/esm/popover/popover.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type PopoverClass = 'wrapper' | 'wrapperOpen' | 'arrow' | 'content' | 'text' | 'confirm' | 'mention' | 'footer';
+declare const popoverStyle: JsStyles<PopoverClass>;
+export default popoverStyle;

package/esm/popover/popover.js

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var arrowGap = 12;
+var arrowMargin = '8px';
+var popoverStyle = {
+  wrapper: {
+    display: 'none',
+    cursor: 'pointer',
+    position: 'absolute',
+    boxShadow: _theme.default.popoverShadow,
+    backgroundColor: _theme.default.popoverBackgroundColor,
+    borderRadius: _theme.default.popoverRadius,
+    border: "1px solid ".concat(_theme.default.popoverBorderColor),
+    '& $arrow': {
+      'z-index': 1,
+      position: 'absolute',
+      content: '" "',
+      display: 'block',
+      border: "inherit",
+      width: '8.4px',
+      height: '8.4px',
+      boxSizing: 'content-box',
+      background: 'inherit',
+      borderLeft: 'none',
+      borderBottom: 'none'
+    },
+    '&[data-soui-position^="bottom"]': {
+      marginTop: arrowGap - 2,
+      '& $arrow': {
+        top: '0',
+        transform: 'translate(0, -50%) rotate(-45deg)',
+        left: '0',
+        right: '0',
+        margin: 'auto'
+      },
+      '&::after': {
+        top: arrowGap * -1,
+        left: '0',
+        right: '0',
+        content: '" "',
+        display: 'block',
+        height: arrowGap,
+        position: 'absolute'
+      }
+    },
+    '&[data-soui-position^="top"]': {
+      marginTop: (arrowGap - 2) * -1,
+      '& $arrow': {
+        bottom: '0',
+        transform: 'translate(0, 50%) rotate(135deg)',
+        left: '0',
+        right: '0',
+        margin: 'auto'
+      },
+      '&::after': {
+        bottom: arrowGap * -1,
+        left: '0',
+        right: '0',
+        content: '" "',
+        display: 'block',
+        height: arrowGap,
+        position: 'absolute'
+      }
+    },
+    '&[data-soui-position^="left"]': {
+      marginLeft: (arrowGap - 2) * -1,
+      '& $arrow': {
+        right: _theme.default.popoverBorderWidth,
+        transform: 'translate(50%, 0) rotate(45deg)',
+        top: '0',
+        bottom: '0',
+        margin: 'auto'
+      },
+      '&::after': {
+        left: arrowGap * -1,
+        top: '0',
+        bottom: '0',
+        content: '" "',
+        display: 'block',
+        width: arrowGap,
+        position: 'absolute'
+      }
+    },
+    '&[data-soui-position^="right"]': {
+      marginLeft: arrowGap - 2,
+      '& $arrow': {
+        left: '0',
+        transform: 'translate(-50%, 0) rotate(-135deg)',
+        top: '0',
+        bottom: '0',
+        margin: 'auto'
+      },
+      '&::after': {
+        left: arrowGap * -1,
+        top: '0',
+        bottom: '0',
+        content: '" "',
+        display: 'block',
+        width: arrowGap,
+        position: 'absolute'
+      }
+    },
+    '&&[data-soui-position$="-left"] $arrow': {
+      left: arrowMargin,
+      right: 'auto'
+    },
+    '&&[data-soui-position$="-right"] $arrow': {
+      right: arrowMargin,
+      left: 'auto'
+    },
+    '&&[data-soui-position$="-top"] $arrow': {
+      top: arrowMargin,
+      bottom: 'auto'
+    },
+    '&&[data-soui-position$="-bottom"] $arrow': {
+      bottom: arrowMargin,
+      top: 'auto'
+    },
+    '&[data-soui-type="danger"]': {
+      borderColor: _theme.default.popoverDangerBorderColor,
+      backgroundColor: _theme.default.popoverDangerBackgroundColor
+    },
+    '&[data-soui-type="info"]': {
+      borderColor: _theme.default.popoverInfoBorderColor,
+      backgroundColor: _theme.default.popoverInfoBackgroundColor
+    },
+    '&[data-soui-type="warning"]': {
+      borderColor: _theme.default.popoverWarningBorderColor,
+      backgroundColor: _theme.default.popoverWarningBackgroundColor
+    },
+    '&[data-soui-type="success"]': {
+      borderColor: _theme.default.popoverSuccessBorderColor,
+      backgroundColor: _theme.default.popoverSuccessBackgroundColor
+    },
+    '&[data-soui-type="error"]': {
+      borderColor: _theme.default.popoverErrorBorderColor,
+      backgroundColor: _theme.default.popoverErrorBackgroundColor,
+      '& $content': {
+        color: _theme.default.popoverErrorFontColor
+      }
+    }
+  },
+  wrapperOpen: {
+    display: 'block'
+  },
+  arrow: {},
+  content: {
+    position: 'relative',
+    zIndex: 2,
+    fontSize: _theme.default.popoverFontSize,
+    color: _theme.default.popoverFontColor,
+    background: 'inherit',
+    borderRadius: 'inherit'
+  },
+  text: {
+    display: 'inline-block',
+    maxWidth: '320px',
+    padding: "".concat(_theme.default.popoverPaddingY, " ").concat(_theme.default.popoverPaddingX)
+  },
+  confirm: {
+    padding: "".concat(_theme.default.popoverConfirmPaddingY, " ").concat(_theme.default.popoverConfirmPaddingX)
+  },
+  mention: {
+    '$confirm &': {
+      backgroundColor: 'transparent',
+      border: 0,
+      padding: 0,
+      marginBottom: _theme.default.popoverConfirmPaddingY
+    }
+  },
+  footer: {
+    textAlign: 'right'
+  }
+};
+var _default = popoverStyle;
+exports.default = _default;

package/esm/progress/index.d.ts

@@ -0,0 +1,4 @@
+import progressStyle from './progress';
+declare const useProgressStyle: (data?: undefined) => import("jss").Classes<keyof import("./progress").ProgressClasses>;
+export { progressStyle, useProgressStyle };
+export default useProgressStyle;

package/esm/progress/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "progressStyle", {
+  enumerable: true,
+  get: function get() {
+    return _progress.default;
+  }
+});
+exports.useProgressStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _progress = _interopRequireDefault(require("./progress"));
+var useProgressStyle = (0, _jssStyle.styled)(_progress.default, 'progress');
+exports.useProgressStyle = useProgressStyle;
+var _default = useProgressStyle;
+exports.default = _default;

package/esm/progress/progress.d.ts

@@ -0,0 +1,26 @@
+import { JsStyles } from '../jss-style';
+export interface ProgressClasses {
+    wrapper: string;
+    wrapperSuccess: string;
+    wrapperInfo: string;
+    wrapperWarning: string;
+    wrapperDanger: string;
+    line: string;
+    linePop: string;
+    lineInner: string;
+    content: string;
+    lineBg: string;
+    lineFront: string;
+    lineDefault: string;
+    lineInnerRight: string;
+    linePopWrapper: string;
+    linePopValue: string;
+    linePopArrow: string;
+    icon: string;
+    circle: string;
+    circleBg: string;
+    circleFront: string;
+}
+export declare type ProgressClassType = keyof ProgressClasses;
+declare const progressStyle: JsStyles<ProgressClassType>;
+export default progressStyle;

package/esm/progress/progress.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var progressStyle = {
+  wrapper: {
+    fontSize: _theme.default.progressFontSize,
+    color: _theme.default.progressFontColor,
+    lineHeight: _theme.default.lineHeightDynamic
+  },
+  wrapperSuccess: {},
+  wrapperInfo: {},
+  wrapperWarning: {},
+  wrapperDanger: {},
+  line: {
+    display: 'flex',
+    alignItems: 'center',
+    '& $icon': {
+      width: _theme.default.progressLineIconSize,
+      height: _theme.default.progressLineIconSize,
+      marginLeft: _theme.default.progressLineGap
+    }
+  },
+  lineDefault: {},
+  linePop: {
+    position: 'relative',
+    paddingTop: '38px'
+  },
+  lineInner: {
+    fontSize: _theme.default.progressLineInnerFontSize
+  },
+  lineInnerRight: {},
+  lineBg: {
+    flex: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+    '$lineDefault &': {
+      height: _theme.default.progressLineHeight,
+      borderRadius: _theme.default.progressLineHeight
+    },
+    '$lineInner &': {
+      height: _theme.default.progressLineInnerHeight,
+      borderRadius: _theme.default.progressLineInnerHeight
+    },
+    background: _theme.default.progressBackground
+  },
+  lineFront: {
+    position: 'relative',
+    transition: 'width 0.32s linear',
+    left: 0,
+    top: 0,
+    height: '100%',
+    boxSizing: 'border-box',
+    borderRadius: 'inherit',
+    '$lineInner &': {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    '$wrapperSuccess &': {
+      backgroundColor: _theme.default.progressSuccessFrontBackgroundColor
+    },
+    '$wrapperWarning &': {
+      backgroundColor: _theme.default.progressWarningFrontBackgroundColor
+    },
+    '$wrapperInfo &': {
+      backgroundColor: _theme.default.progressInfoFrontBackgroundColor
+    },
+    '$wrapperDanger &': {
+      backgroundColor: _theme.default.progressDangerFrontBackgroundColor
+    }
+  },
+  content: {
+    '$lineDefault &': {
+      marginLeft: _theme.default.progressLineGap
+    },
+    '$lineInner &': {
+      marginLeft: 'auto',
+      padding: "0 ".concat(_theme.default.progressLineInnerPaddingX),
+      color: _theme.default.progressLineInnerFontColor
+    },
+    '$lineInnerRight &&': {
+      marginLeft: _theme.default.progressLineInnerPaddingX,
+      position: 'absolute',
+      left: '100%',
+      color: _theme.default.progressLineInnerRightFontColor
+    }
+  },
+  linePopWrapper: {
+    display: 'inline-block',
+    position: 'absolute',
+    transition: 'all 0.32s linear',
+    top: 0,
+    background: '#fff',
+    padding: '4px 8px',
+    borderRadius: '2px',
+    boxShadow: '0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05)'
+  },
+  linePopValue: {},
+  linePopArrow: {
+    background: '#fff',
+    position: 'absolute',
+    display: 'block',
+    width: '6px',
+    height: '6px',
+    left: '50%',
+    bottom: 0,
+    transform: 'translate(-50%,50%) rotate(45deg)'
+  },
+  icon: {
+    '$wrapperSuccess &': {
+      color: _theme.default.progressSuccessFrontBackgroundColor
+    },
+    '$wrapperWarning &': {
+      color: _theme.default.progressWarningFrontBackgroundColor
+    },
+    '$wrapperInfo &': {
+      color: _theme.default.progressInfoFrontBackgroundColor
+    },
+    '$wrapperDanger &': {
+      color: _theme.default.progressDangerFrontBackgroundColor
+    },
+    lineHeight: 1
+  },
+  circle: {
+    position: 'relative',
+    display: 'inline-block',
+    '& $content, & $icon': {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%,-50%)'
+    },
+    '& $icon': {
+      width: '37.5%',
+      height: '37.5%'
+    }
+  },
+  circleBg: {
+    stroke: _theme.default.progressBackground
+  },
+  circleFront: {
+    transition: 'stroke-dashoffset .32s ease 0s,stroke-dasharray .32s ease 0s,stroke .32s,stroke-width .06s ease .32s',
+    '$wrapperSuccess &': {
+      stroke: _theme.default.progressSuccessFrontBackgroundColor
+    },
+    '$wrapperWarning &': {
+      stroke: _theme.default.progressWarningFrontBackgroundColor
+    },
+    '$wrapperInfo &': {
+      stroke: _theme.default.progressInfoFrontBackgroundColor
+    },
+    '$wrapperDanger &': {
+      stroke: _theme.default.progressDangerFrontBackgroundColor
+    }
+  }
+};
+var _default = progressStyle;
+exports.default = _default;

package/esm/radio/index.d.ts

@@ -0,0 +1,4 @@
+import radioStyle from './radio';
+declare const useRadioStyle: (data?: undefined) => import("jss").Classes<import("./radio").RadioClass>;
+export { radioStyle, useRadioStyle };
+export default useRadioStyle;

package/esm/radio/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "radioStyle", {
+  enumerable: true,
+  get: function get() {
+    return _radio.default;
+  }
+});
+exports.useRadioStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _radio = _interopRequireDefault(require("./radio"));
+var useRadioStyle = (0, _jssStyle.styled)(_radio.default, 'radio');
+exports.useRadioStyle = useRadioStyle;
+var _default = useRadioStyle;
+exports.default = _default;

package/esm/radio/radio.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type RadioClass = 'wrapper' | 'wrapperSmall' | 'wrapperLarge' | 'wrapperDisabled' | 'wrapperChecked' | 'indicatorWrapper' | 'indicator' | 'desc' | 'group' | 'groupBlock' | 'groupButton';
+declare const radioStyle: JsStyles<RadioClass>;
+export default radioStyle;

package/esm/radio/radio.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var radioStyle = {
+  // '@keyframes so-checkinput-focus': {
+  //   '0%': {
+  //     boxShadow: `0 0 0 0 ${cssVars.primaryColorFade50}`,
+  //   },
+  //   '50%': {
+  //     boxShadow: `0 0 0 4px ${cssVars.primaryColorFade0}`,
+  //   },
+  //   '100%': {
+  //     boxShadow: `0 0 0 8px ${cssVars.primaryColorFade0}`,
+  //   },
+  // },
+  wrapper: {
+    display: 'inline-flex',
+    position: 'relative',
+    alignItems: 'center',
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    marginRight: _theme.default.radioGap
+  },
+  wrapperSmall: {},
+  wrapperLarge: {},
+  wrapperChecked: {},
+  wrapperDisabled: {
+    cursor: 'not-allowed'
+  },
+  indicatorWrapper: {
+    display: 'block',
+    position: 'relative',
+    boxSizing: 'border-box',
+    width: _theme.default.radioIconWidth,
+    height: _theme.default.radioIconWidth,
+    '$wrapperSmall &': {
+      width: _theme.default.radioSmallIconWidth,
+      height: _theme.default.radioSmallIconWidth
+    },
+    '$wrapperLarge &': {
+      width: _theme.default.radioLargeIconWidth,
+      height: _theme.default.radioLargeIconWidth
+    },
+    marginRight: _theme.default.radioIconGap,
+    verticalAlign: 'middle',
+    '&::before': {
+      content: '" "',
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      padding: _theme.default.iconCirclePadding,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      boxSizing: 'content-box',
+      background: 'transparent',
+      borderRadius: '50%'
+    },
+    '$wrapper:not($wrapperChecked):not($wrapperDisabled):hover &': {
+      '&::before': {
+        background: _theme.default.radioIconWrapperFill
+      },
+      '& $indicator': {
+        backgroundColor: _theme.default.radioIconWrapperFill
+      }
+    }
+  },
+  indicator: {
+    position: 'absolute',
+    boxSizing: 'border-box',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    borderRadius: '50%',
+    display: 'inline-block',
+    '& > svg': {
+      width: '100%',
+      height: '100%'
+    },
+    color: _theme.default.radioIconColor,
+    backgroundColor: _theme.default.radioIconBackgroundColor,
+    border: '1px solid currentColor',
+    '$wrapperChecked &': {
+      backgroundColor: _theme.default.radioIconCheckedBackgroundColor,
+      color: _theme.default.radioIconCheckedColor,
+      '&::after': {
+        content: '" "',
+        display: 'block',
+        width: '50%',
+        height: '50%',
+        borderRadius: '50%',
+        backgroundColor: 'currentcolor',
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)'
+      }
+    },
+    '$wrapperDisabled &': {
+      backgroundColor: _theme.default.radioIconDisabledBackgroundColor,
+      color: _theme.default.radioIconDisabledColor
+    },
+    '$wrapperDisabled$wrapperChecked &, $wrapperDisabled &': {
+      backgroundColor: _theme.default.radioIconCheckedDisabledBackgroundColor,
+      color: _theme.default.radioIconCheckedDisabledColor
+    }
+  },
+  desc: {
+    verticalAlign: 'middle',
+    boxSizing: 'border-box',
+    fontSize: _theme.default.radioLabelFontSize,
+    lineHeight: _theme.default.lineHeightDynamic,
+    '$wrapperSmall &': {
+      fontSize: _theme.default.radioSmallLabelFontSize
+    },
+    '$wrapperLarge &': {
+      fontSize: _theme.default.radioLargeLabelFontSize
+    }
+  },
+  group: {},
+  groupBlock: {
+    '& $wrapper': {
+      display: 'flex',
+      marginBottom: _theme.default.radioBlockGap
+    }
+  },
+  groupButton: {
+    '& $indicatorWrapper': {
+      display: 'none'
+    },
+    '& $desc': {
+      padding: 0,
+      display: 'inline-block'
+    },
+    '& $wrapper': {
+      margin: 0
+    }
+  }
+};
+var _default = radioStyle;
+exports.default = _default;

package/esm/rate/index.d.ts

@@ -0,0 +1,4 @@
+import rateStyle from './rate';
+declare const useRateStyle: (data?: undefined) => import("jss").Classes<keyof import("./rate").RateClasses>;
+export { rateStyle, useRateStyle };
+export default useRateStyle;

package/esm/rate/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "rateStyle", {
+  enumerable: true,
+  get: function get() {
+    return _rate.default;
+  }
+});
+exports.useRateStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _rate = _interopRequireDefault(require("./rate"));
+var useRateStyle = (0, _jssStyle.styled)(_rate.default, 'rate');
+exports.useRateStyle = useRateStyle;
+var _default = useRateStyle;
+exports.default = _default;

package/esm/rate/rate.d.ts

@@ -0,0 +1,17 @@
+import { JsStyles } from '../jss-style';
+export declare type RateClasses = {
+    wrapper: string;
+    inner: string;
+    item: string;
+    itemBg: string;
+    itemFront: string;
+    itemHalf: string;
+    itemChecked: string;
+    itemCheckedHalf: string;
+    text: string;
+    itemDisabled: string;
+    itemAnimation: string;
+};
+export declare type RateClassType = keyof RateClasses;
+declare const rateStyle: JsStyles<RateClassType>;
+export default rateStyle;