@996-design/996-components 1.0.0

package/lib/typography/style/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareComponentToken = exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _style = require("../../style");
+var _internal = require("../../theme/internal");
+var _mixins = require("./mixins");
+var genTypographyStyle = function genTypographyStyle(token) {
+  var componentCls = token.componentCls,
+    titleMarginTop = token.titleMarginTop;
+  return (0, _defineProperty2.default)({}, componentCls, (0, _objectSpread5.default)((0, _objectSpread5.default)((0, _objectSpread5.default)((0, _objectSpread5.default)((0, _objectSpread5.default)((0, _objectSpread5.default)((0, _objectSpread5.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    color: token.colorText,
+    wordBreak: 'break-word',
+    lineHeight: token.lineHeight
+  }, "&".concat(componentCls, "-secondary, &").concat(componentCls, "-link").concat(componentCls, "-secondary"), {
+    color: token.colorTextDescription
+  }), "&".concat(componentCls, "-success, &").concat(componentCls, "-link").concat(componentCls, "-success"), {
+    color: token.colorSuccessText
+  }), "&".concat(componentCls, "-warning, &").concat(componentCls, "-link").concat(componentCls, "-warning"), {
+    color: token.colorWarningText
+  }), "&".concat(componentCls, "-danger, &").concat(componentCls, "-link").concat(componentCls, "-danger"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    color: token.colorErrorText
+  }, "&".concat(componentCls, "-link:active, &").concat(componentCls, "-link:focus"), {
+    color: token.colorErrorTextActive
+  }), "&".concat(componentCls, "-link:hover"), {
+    color: token.colorErrorTextHover
+  })), "&".concat(componentCls, "-disabled"), {
+    color: token.colorTextDisabled,
+    cursor: 'not-allowed',
+    userSelect: 'none'
+  }), 'div&, p', {
+    marginBottom: '1em'
+  }), (0, _mixins.getTitleStyles)(token)), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "& + h1".concat(componentCls, ", & + h2").concat(componentCls, ", & + h3").concat(componentCls, ", & + h4").concat(componentCls, ", & + h5").concat(componentCls), {
+    marginTop: titleMarginTop
+  }), 'div, ul, li, p, h1, h2, h3, h4, h5', {
+    '+ h1, + h2, + h3, + h4, + h5': {
+      marginTop: titleMarginTop
+    }
+  }), (0, _mixins.getResetStyles)(token)), (0, _mixins.getLinkStyles)(token)), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(componentCls, "-actions"), {
+    display: 'inline'
+  }), "\n        ".concat(componentCls, "-expand,\n        ").concat(componentCls, "-collapse,\n        ").concat(componentCls, "-edit,\n        ").concat(componentCls, "-copy\n      "), (0, _objectSpread5.default)((0, _objectSpread5.default)({}, (0, _style.operationUnit)(token)), {}, {
+    marginInlineStart: token.marginXXS
+  })), "".concat(componentCls, "-actions-start"), (0, _defineProperty2.default)({}, "\n          ".concat(componentCls, "-expand,\n          ").concat(componentCls, "-collapse,\n          ").concat(componentCls, "-edit,\n          ").concat(componentCls, "-copy:not(").concat(componentCls, "-copy-icon-only)\n        "), {
+    marginInlineStart: 0,
+    marginInlineEnd: token.marginXXS
+  })), (0, _mixins.getEditableStyles)(token)), (0, _mixins.getCopyableStyles)(token)), (0, _mixins.getEllipsisStyles)()), {}, {
+    '&-rtl': {
+      direction: 'rtl'
+    }
+  }));
+};
+var prepareComponentToken = exports.prepareComponentToken = function prepareComponentToken() {
+  return {
+    titleMarginTop: '1.2em',
+    titleMarginBottom: '0.5em'
+  };
+};
+// ============================== Export ==============================
+var _default = exports.default = (0, _internal.genStyleHooks)('Typography', genTypographyStyle, prepareComponentToken);

package/lib/typography/style/mixins.d.ts

@@ -0,0 +1,9 @@
+import type { CSSObject } from '@996-design/996-cssinjs';
+import type { TypographyToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+export declare const getTitleStyles: GenerateStyle<TypographyToken, CSSObject>;
+export declare const getLinkStyles: GenerateStyle<TypographyToken, CSSObject>;
+export declare const getResetStyles: GenerateStyle<TypographyToken, CSSObject>;
+export declare const getEditableStyles: GenerateStyle<TypographyToken, CSSObject>;
+export declare const getCopyableStyles: GenerateStyle<TypographyToken, CSSObject>;
+export declare const getEllipsisStyles: () => CSSObject;

package/lib/typography/style/mixins.js

@@ -0,0 +1,263 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTitleStyles = exports.getResetStyles = exports.getLinkStyles = exports.getEllipsisStyles = exports.getEditableStyles = exports.getCopyableStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _colors = require("@996-design/996-colors");
+var _cssinjs = require("@996-design/996-cssinjs");
+var _style = require("../../style");
+/*
+.typography-title(@fontSize; @fontWeight; @lineHeight; @headingColor; @headingMarginBottom;) {
+ margin-bottom: @headingMarginBottom;
+ color: @headingColor;
+ font-weight: @fontWeight;
+ fontSize: @fontSize;
+ line-height: @lineHeight;
+}
+*/
+
+var getTitleStyle = function getTitleStyle(fontSize, lineHeight, color, token) {
+  var titleMarginBottom = token.titleMarginBottom,
+    fontWeightStrong = token.fontWeightStrong;
+  return {
+    marginBottom: titleMarginBottom,
+    color: color,
+    fontWeight: fontWeightStrong,
+    fontSize: fontSize,
+    lineHeight: lineHeight
+  };
+};
+var getTitleStyles = exports.getTitleStyles = function getTitleStyles(token) {
+  var headings = [1, 2, 3, 4, 5];
+  var styles = {};
+  headings.forEach(function (headingLevel) {
+    styles["\n      h".concat(headingLevel, "&,\n      div&-h").concat(headingLevel, ",\n      div&-h").concat(headingLevel, " > textarea,\n      h").concat(headingLevel, "\n    ")] = getTitleStyle(token["fontSizeHeading".concat(headingLevel)], token["lineHeightHeading".concat(headingLevel)], token.colorTextHeading, token);
+  });
+  return styles;
+};
+var getLinkStyles = exports.getLinkStyles = function getLinkStyles(token) {
+  var componentCls = token.componentCls;
+  var linkCls = "".concat(componentCls, "-link");
+  return (0, _defineProperty2.default)({}, "&".concat(linkCls), (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _style.operationUnit)(token)), {}, (0, _defineProperty2.default)({
+    userSelect: 'text'
+  }, "&[disabled], &".concat(componentCls, "-disabled"), {
+    color: token.colorTextDisabled,
+    cursor: 'not-allowed',
+    '&:active, &:hover': {
+      color: token.colorTextDisabled
+    },
+    '&:active': (0, _defineProperty2.default)({
+      pointerEvents: 'none'
+    }, "".concat(componentCls, "-actions"), {
+      pointerEvents: 'auto'
+    })
+  })));
+};
+var getResetStyles = exports.getResetStyles = function getResetStyles(token) {
+  return {
+    code: {
+      margin: '0 0.2em',
+      paddingInline: '0.4em',
+      paddingBlock: '0.2em 0.1em',
+      fontSize: '85%',
+      fontFamily: token.fontFamilyCode,
+      background: 'rgba(150, 150, 150, 0.1)',
+      border: '1px solid rgba(100, 100, 100, 0.2)',
+      borderRadius: 3
+    },
+    kbd: {
+      margin: '0 0.2em',
+      paddingInline: '0.4em',
+      paddingBlock: '0.15em 0.1em',
+      fontSize: '90%',
+      fontFamily: token.fontFamilyCode,
+      background: 'rgba(150, 150, 150, 0.06)',
+      border: '1px solid rgba(100, 100, 100, 0.2)',
+      borderBottomWidth: 2,
+      borderRadius: 3
+    },
+    mark: {
+      padding: 0,
+      // FIXME hardcode in v4
+      backgroundColor: _colors.gold[2]
+    },
+    'u, ins': {
+      textDecoration: 'underline',
+      textDecorationSkipInk: 'auto'
+    },
+    's, del': {
+      textDecoration: 'line-through'
+    },
+    strong: {
+      fontWeight: token.fontWeightStrong
+    },
+    // list
+    'ul, ol': {
+      marginInline: 0,
+      marginBlock: '0 1em',
+      padding: 0,
+      li: {
+        marginInline: '20px 0',
+        marginBlock: 0,
+        paddingInline: '4px 0',
+        paddingBlock: 0
+      }
+    },
+    ul: {
+      listStyleType: 'circle',
+      ul: {
+        listStyleType: 'disc'
+      }
+    },
+    ol: {
+      listStyleType: 'decimal'
+    },
+    // pre & block
+    'pre, blockquote': {
+      margin: '1em 0'
+    },
+    pre: {
+      padding: '0.4em 0.6em',
+      whiteSpace: 'pre-wrap',
+      wordWrap: 'break-word',
+      background: 'rgba(150, 150, 150, 0.1)',
+      border: '1px solid rgba(100, 100, 100, 0.2)',
+      borderRadius: 3,
+      fontFamily: token.fontFamilyCode,
+      // Compatible for marked
+      code: {
+        display: 'inline',
+        margin: 0,
+        padding: 0,
+        fontSize: 'inherit',
+        fontFamily: 'inherit',
+        background: 'transparent',
+        border: 0
+      }
+    },
+    blockquote: {
+      paddingInline: '0.6em 0',
+      paddingBlock: 0,
+      borderInlineStart: '4px solid rgba(100, 100, 100, 0.2)',
+      opacity: 0.85
+    },
+    // table - Follow Table component default style
+    table: {
+      width: '100%',
+      textAlign: 'start',
+      borderCollapse: 'separate',
+      borderSpacing: 0,
+      marginBlock: '1em',
+      'th, td': {
+        padding: (0, _cssinjs.unit)(token.padding),
+        overflowWrap: 'break-word',
+        borderBottom: "".concat((0, _cssinjs.unit)(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorSplit)
+      },
+      'thead > tr:first-child > th:first-child': {
+        borderStartStartRadius: token.borderRadiusLG
+      },
+      'thead > tr:first-child > th:last-child': {
+        borderStartEndRadius: token.borderRadiusLG
+      },
+      'thead > tr > th': {
+        textAlign: 'start',
+        position: 'relative',
+        color: token.colorTextHeading,
+        fontWeight: token.fontWeightStrong,
+        backgroundColor: token.colorFillAlter,
+        transition: "background-color ".concat(token.motionDurationMid, " ease"),
+        '&:not(:last-child)::before': {
+          position: 'absolute',
+          top: '50%',
+          insetInlineEnd: 0,
+          width: 1,
+          height: '1.6em',
+          backgroundColor: token.colorSplit,
+          transform: 'translateY(-50%)',
+          content: '""'
+        }
+      },
+      'tbody > tr': {
+        '> th, > td': {
+          transition: "background-color ".concat(token.motionDurationMid, " ease")
+        },
+        '&:hover > th, &:hover > td': {
+          backgroundColor: token.colorFillAlter
+        }
+      }
+    }
+  };
+};
+var getEditableStyles = exports.getEditableStyles = function getEditableStyles(token) {
+  var componentCls = token.componentCls,
+    paddingSM = token.paddingSM;
+  var inputShift = paddingSM;
+  return {
+    '&-edit-content': (0, _defineProperty2.default)((0, _defineProperty2.default)({
+      position: 'relative',
+      'div&': {
+        insetInlineStart: token.calc(token.paddingSM).mul(-1).equal(),
+        insetBlockStart: token.calc(inputShift).div(-2).add(1).equal(),
+        marginBottom: token.calc(inputShift).div(2).sub(2).equal()
+      }
+    }, "".concat(componentCls, "-edit-content-confirm"), {
+      position: 'absolute',
+      insetInlineEnd: token.calc(token.marginXS).add(2).equal(),
+      insetBlockEnd: token.marginXS,
+      color: token.colorIcon,
+      // default style
+      fontWeight: 'normal',
+      fontSize: token.fontSize,
+      fontStyle: 'normal',
+      pointerEvents: 'none'
+    }), "textarea", {
+      margin: '0!important',
+      // Fix Editable Textarea flash in Firefox
+      MozTransition: 'none',
+      height: '1em'
+    })
+  };
+};
+var getCopyableStyles = exports.getCopyableStyles = function getCopyableStyles(token) {
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.componentCls, "-copy-success"), {
+    '&, &:hover, &:focus': {
+      color: token.colorSuccess
+    }
+  }), "".concat(token.componentCls, "-copy-icon-only"), {
+    marginInlineStart: 0
+  });
+};
+var getEllipsisStyles = exports.getEllipsisStyles = function getEllipsisStyles() {
+  return {
+    'a&-ellipsis, span&-ellipsis': {
+      display: 'inline-block',
+      maxWidth: '100%'
+    },
+    '&-ellipsis-single-line': (0, _objectSpread3.default)((0, _objectSpread3.default)({}, _style.textEllipsis), {}, {
+      // https://blog.csdn.net/iefreer/article/details/50421025
+      'a&, span&': {
+        verticalAlign: 'bottom'
+      },
+      '> code': {
+        paddingBlock: 0,
+        maxWidth: 'calc(100% - 1.2em)',
+        display: 'inline-block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        verticalAlign: 'bottom',
+        // https://github.com/ant-design/ant-design/issues/45953
+        boxSizing: 'content-box'
+      }
+    }),
+    '&-ellipsis-multiple-line': {
+      display: '-webkit-box',
+      overflow: 'hidden',
+      WebkitLineClamp: 3,
+      WebkitBoxOrient: 'vertical'
+    }
+  };
+};

package/lib/typography/style.d.ts

@@ -0,0 +1,2 @@
+export * from './style/index';
+export { default } from './style/index';

package/lib/typography/style.js

@@ -0,0 +1 @@
+module.exports = require('./style/index.js');

package/lib/typography.d.ts

@@ -0,0 +1,2 @@
+export * from './typography/index';
+export { default } from './typography/index';

package/lib/typography.js

@@ -0,0 +1 @@
+module.exports = require('./typography/index.js');

package/lib/upload/Dragger.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { UploadProps } from './interface';
+import type { UploadRef } from './Upload';
+export type DraggerProps<T = any> = UploadProps<T> & {
+    height?: number;
+};
+type DraggerType = (<T = any>(props: DraggerProps<T> & React.RefAttributes<UploadRef<T>>) => React.ReactElement | null) & {
+    displayName?: string;
+};
+declare const Dragger: DraggerType;
+export default Dragger;

package/lib/upload/Dragger.js

@@ -0,0 +1,36 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _Upload = _interopRequireDefault(require("./Upload"));
+var _excluded = ["style", "height", "hasControlInside", "children"];
+var Dragger = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var style = props.style,
+    height = props.height,
+    _props$hasControlInsi = props.hasControlInside,
+    hasControlInside = _props$hasControlInsi === void 0 ? false : _props$hasControlInsi,
+    children = props.children,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var mergedStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
+    height: height
+  });
+  return /*#__PURE__*/React.createElement(_Upload.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    ref: ref,
+    hasControlInside: hasControlInside
+  }, restProps), {}, {
+    style: mergedStyle,
+    type: "drag"
+  }), children);
+});
+if (process.env.NODE_ENV !== 'production') {
+  Dragger.displayName = 'Dragger';
+}
+var _default = exports.default = Dragger;

package/lib/upload/Upload.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { UploadProps as RcUploadProps } from '@rc-component/upload';
+import RcUpload from '@rc-component/upload';
+import type { RcFile, UploadFile, UploadProps } from './interface';
+export declare const LIST_IGNORE: string;
+export type { UploadProps };
+export interface UploadRef<T = any> {
+    onBatchStart: RcUploadProps['onBatchStart'];
+    onSuccess: (response: any, file: RcFile, xhr: any) => void;
+    onProgress: (e: {
+        percent: number;
+    }, file: RcFile) => void;
+    onError: (error: Error, response: any, file: RcFile) => void;
+    fileList: UploadFile<T>[];
+    upload: RcUpload | null;
+    /**
+     * Get native element for wrapping upload
+     * @since 5.17.0
+     */
+    nativeElement: HTMLSpanElement | null;
+}
+declare const Upload: React.ForwardRefExoticComponent<UploadProps<any> & React.RefAttributes<UploadRef<any>>>;
+export default Upload;