@trionesdev/antd-taro-react 0.0.1-beta.3

package/dist/Form/demo/base.js

@@ -0,0 +1,76 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { DemoBlock } from "../../DemoBlock";
+import React from "react";
+import Form from "../index";
+import Input from "../../Input";
+import Button from "../../Button";
+export default (function () {
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    verticalForm = _Form$useForm2[0];
+  var _Form$useForm3 = Form.useForm(),
+    _Form$useForm4 = _slicedToArray(_Form$useForm3, 1),
+    horizontalForm = _Form$useForm4[0];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u6C34\u5E73\u8868\u5355"
+  }, /*#__PURE__*/React.createElement(Form, {
+    form: verticalForm,
+    labelWidth: 80
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: '姓名',
+    name: 'name',
+    required: true,
+    rules: [{
+      required: true,
+      message: '请输入姓名'
+    }]
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "\u8BF7\u8F93\u5165\u59D3\u540D"
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    label: '地址',
+    name: 'address',
+    required: true,
+    rules: [{
+      required: true,
+      message: '请输入地址'
+    }]
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "\u8BF7\u8F93\u5165\u5730\u5740"
+  }))), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    block: true,
+    onClick: function onClick() {
+      verticalForm.validateFields().then(function (values) {
+        console.log(values);
+      });
+    }
+  }, "\u63D0\u4EA4")), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u5782\u76F4\u8868\u5355"
+  }, /*#__PURE__*/React.createElement(Form, {
+    layout: "vertical",
+    form: horizontalForm
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    label: '姓名',
+    name: 'name'
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "\u8BF7\u8F93\u5165\u59D3\u540D"
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    label: '地址',
+    name: 'address'
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "\u8BF7\u8F93\u5165\u5730\u5740"
+  }))), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    block: true,
+    onClick: function onClick() {
+      horizontalForm.validateFields().then(function (values) {
+        console.log(values);
+      });
+    }
+  }, "\u63D0\u4EA4")));
+});

package/dist/Form/form.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import { useWatch } from "rc-field-form";
+import type { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
+import type { FormRef } from 'rc-field-form/lib/interface';
+import { FormInstance } from "./interface";
+import "./style.scss";
+export type RequiredMark = boolean | 'optional' | ((labelNode: React.ReactNode, info: {
+    required: boolean;
+}) => React.ReactNode);
+export type FormLayout = 'horizontal' | 'inline' | 'vertical';
+export type FormItemLayout = 'horizontal' | 'vertical';
+export type FormLayoutAlign = 'left' | 'right';
+export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form' | 'component'> {
+    /**
+     * @description 配置 Form.Item 的 colon 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效)
+     * @default true
+     */
+    colon?: boolean;
+    /**
+     * @description 布局
+     * @default horizontal
+     */
+    layout?: FormLayout;
+    /**
+     * @description 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建
+     * @default
+     */
+    form?: FormInstance<Values>;
+    /**
+     * @description 标签
+     * @default horizontal
+     */
+    labelAlign?: FormLayoutAlign;
+    labelWidth?: number;
+    requiredMark?: RequiredMark;
+}
+export declare const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps>;
+export { useWatch };
+export default InternalForm;

package/dist/Form/form.js

@@ -0,0 +1,28 @@
+var _excluded = ["children", "layout", "labelAlign", "labelWidth", "requiredMark"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from "react";
+import FieldForm, { useWatch } from "rc-field-form";
+import { FormContext } from "./context";
+import "./style.scss";
+export var InternalForm = function InternalForm(_ref, ref) {
+  var children = _ref.children,
+    layout = _ref.layout,
+    labelAlign = _ref.labelAlign,
+    labelWidth = _ref.labelWidth,
+    requiredMark = _ref.requiredMark,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(FormContext.Provider, {
+    value: {
+      layout: layout || 'horizontal',
+      labelAlign: labelAlign || 'left',
+      labelWidth: labelWidth,
+      requiredMark: requiredMark || true
+    }
+  }, /*#__PURE__*/React.createElement(FieldForm, _extends({}, props, {
+    component: false
+  }), children));
+};
+export { useWatch };
+export default InternalForm;

package/dist/Form/hooks/useForm.d.ts

@@ -0,0 +1,2 @@
+import { FormInstance } from '../interface';
+export default function useForm<Values = any>(form?: FormInstance<Values>): [FormInstance<Values>];

package/dist/Form/hooks/useForm.js

@@ -0,0 +1,24 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from 'react';
+import { useForm as useRcForm } from 'rc-field-form';
+export default function useForm(form) {
+  var _useRcForm = useRcForm(),
+    _useRcForm2 = _slicedToArray(_useRcForm, 1),
+    rcForm = _useRcForm2[0];
+  var itemsRef = React.useRef({});
+  var wrapForm = React.useMemo(function () {
+    return form !== null && form !== void 0 ? form : _objectSpread({}, rcForm);
+  }, [form, rcForm]);
+  return [wrapForm];
+}

package/dist/Form/hooks/useFormContext.d.ts

@@ -0,0 +1,2 @@
+import { FormContextProps } from "../context";
+export declare function useFormContext(): FormContextProps;

package/dist/Form/hooks/useFormContext.js

@@ -0,0 +1,6 @@
+import { FormContext } from "../context";
+import React from "react";
+export function useFormContext() {
+  var formContext = React.useContext(FormContext);
+  return formContext;
+}

package/dist/Form/index.d.ts

@@ -0,0 +1,12 @@
+import InternalForm, { FormProps, useWatch } from "./form";
+import FormItem, { FormItemProps } from "./FormItem";
+import useForm from "./hooks/useForm";
+type InternalFormType = typeof InternalForm;
+type CompoundedComponent = InternalFormType & {
+    useForm: typeof useForm;
+    Item: typeof FormItem;
+    useWatch: typeof useWatch;
+};
+declare const Form: CompoundedComponent;
+export type { FormProps, FormItemProps };
+export default Form;

package/dist/Form/index.js

@@ -0,0 +1,8 @@
+import InternalForm, { useWatch } from "./form";
+import FormItem from "./FormItem";
+import useForm from "./hooks/useForm";
+var Form = InternalForm;
+Form.useForm = useForm;
+Form.Item = FormItem;
+Form.useWatch = useWatch;
+export default Form;

package/dist/Form/interface.d.ts

@@ -0,0 +1,3 @@
+import type { FormInstance as RcFormInstance } from 'rc-field-form';
+export interface FormInstance<Values = any> extends RcFormInstance<Values> {
+}

package/dist/Form/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/Form/style.scss

@@ -0,0 +1,42 @@
+$cls-prefix-form: 'triones-antm-form';
+$cls-prefix-form-item: 'triones-antm-form-item';
+
+.#{$cls-prefix-form}{
+
+}
+
+.#{$cls-prefix-form-item}{
+  &-label{
+    font-size: 14Px;
+    //line-height: 1.5;
+    color: #6F6F6F;
+    &-left{}
+    &-right{
+      text-align: right;
+    }
+    &-required-mark{
+      display: inline-block;
+      color: red;
+      margin-right: 4Px;
+    }
+  }
+  &-input{
+    .#{$cls-prefix-form-item}{
+      &-error{
+        font-size: 12Px;
+        color: red;
+      }
+    }
+  }
+  &-horizontal{
+    display: flex;
+    .#{$cls-prefix-form-item}{
+      &-label{
+        padding: 4Px;
+      }
+      &-input{
+        flex: auto 1;
+      }
+    }
+  }
+}

package/dist/Grid/demo/base.d.ts

@@ -0,0 +1,7 @@
+/**
+ * compact: true
+ */
+import React from 'react';
+import './base.scss';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Grid/demo/base.js

@@ -0,0 +1,46 @@
+/**
+ * compact: true
+ */
+import React from 'react';
+import { DemoBlock } from "../../DemoBlock";
+import "./base.scss";
+import Grid from "../index";
+export default (function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u7528\u6CD5"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    columns: 3,
+    gap: 8
+  }, /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo-item-block"
+  }, "A")), /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo-item-block"
+  }, "B")), /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo-item-block"
+  }, "C")), /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo-item-block"
+  }, "D")), /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo-item-block"
+  }, "E")))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u63A7\u5236\u683C\u5B50\u7684\u8DE8\u5EA6"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    columns: 3,
+    gap: 8
+  }, /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo-item-block"
+  }, "A")), /*#__PURE__*/React.createElement(Grid.Item, {
+    span: 2
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo-item-block"
+  }, "B")), /*#__PURE__*/React.createElement(Grid.Item, {
+    span: 2
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo-item-block"
+  }, "C")), /*#__PURE__*/React.createElement(Grid.Item, null, /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo-item-block"
+  }, "D")), /*#__PURE__*/React.createElement(Grid.Item, {
+    span: 3
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid-demo-item-block"
+  }, "E")))));
+});

package/dist/Grid/demo/base.scss

@@ -0,0 +1,7 @@
+.grid-demo-item-block {
+  border: solid 1px #999;
+  background: #f5f5f5;
+  text-align: center;
+  color: #999;
+  height: 100%;
+}

package/dist/Grid/grid.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../utils/native-props';
+import './style.scss';
+export type GridProps = {
+    columns: number;
+    gap?: number | string | [number | string, number | string];
+    children?: ReactNode;
+} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
+export declare const Grid: FC<GridProps>;
+export type GridItemProps = {
+    span?: number;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: ReactNode;
+} & NativeProps;
+export declare const GridItem: FC<GridItemProps>;

package/dist/Grid/grid.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { toCSSLength, withNativeProps } from "../utils/native-props";
+import "./style.scss";
+import { mergeProps } from "../utils/with-default-props";
+var classPrefix = "triones-antm-grid";
+export var Grid = function Grid(props) {
+  var style = {
+    '--columns': props.columns.toString()
+  };
+  var gap = props.gap;
+  if (gap !== undefined) {
+    if (Array.isArray(gap)) {
+      style['--gap-horizontal'] = toCSSLength(gap[0]);
+      style['--gap-vertical'] = toCSSLength(gap[1]);
+    } else {
+      style['--gap'] = toCSSLength(gap);
+    }
+  }
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix,
+    style: style
+  }, props.children));
+};
+export var GridItem = function GridItem(p) {
+  var props = mergeProps({
+    span: 1
+  }, p);
+  var itemStyle = {
+    '--item-span': props.span
+  };
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-item"),
+    style: itemStyle,
+    onClick: props.onClick
+  }, props.children));
+};

package/dist/Grid/index.d.ts

@@ -0,0 +1,7 @@
+import { Grid as InternalGrid, GridItem } from './grid';
+export type { GridProps, GridItemProps } from './grid';
+type CompoundedComponent = typeof InternalGrid & {
+    Item: typeof GridItem;
+};
+declare const Grid: CompoundedComponent;
+export default Grid;

package/dist/Grid/index.js

@@ -0,0 +1,4 @@
+import { Grid as InternalGrid, GridItem } from "./grid";
+var Grid = InternalGrid;
+Grid.Item = GridItem;
+export default Grid;

package/dist/Grid/style.scss

@@ -0,0 +1,17 @@
+$class-prefix-grid: 'triones-antm-grid';
+/* prettier-ignore */
+.#{$class-prefix-grid} {
+  --gap: 0;
+  --gap-horizontal: var(--gap);
+  --gap-vertical: var(--gap);
+
+  display: grid;
+  grid-gap: 10PX;
+  column-gap: var(--gap-horizontal);
+  row-gap: var(--gap-vertical);
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  align-items: stretch;
+  &-item {
+    grid-column-end: span var(--item-span);
+  }
+}

package/dist/Icon/check-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../utils/native-props';
+export declare const CheckIcon: React.NamedExoticComponent<NativeProps>;

package/dist/Icon/check-icon.js

@@ -0,0 +1,10 @@
+import React, { memo } from 'react';
+import { withNativeProps } from "../utils/native-props";
+export var CheckIcon = /*#__PURE__*/memo(function (props) {
+  return withNativeProps(props, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 40 40"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M31.5541766,15 L28.0892433,15 L28.0892434,15 C27.971052,15 27.8576674,15.044522 27.7740471,15.1239792 L18.2724722,24.1625319 L13.2248725,19.3630279 L13.2248725,19.3630279 C13.1417074,19.2834412 13.0287551,19.2384807 12.9107898,19.2380079 L9.44474455,19.2380079 L9.44474454,19.2380079 C9.19869815,19.2384085 8.99957935,19.4284738 9,19.66253 C9,19.7747587 9.04719253,19.8823283 9.13066188,19.9616418 L17.0907466,27.5338228 C17.4170809,27.8442545 17.8447695,28 18.2713393,28 L18.2980697,28 C18.7168464,27.993643 19.133396,27.8378975 19.4530492,27.5338228 L31.8693384,15.7236361 L31.8693384,15.7236361 C32.0434167,15.5582251 32.0435739,15.2898919 31.8696892,15.1242941 C31.7860402,15.0446329 31.6725052,15 31.5541421,15 L31.5541766,15 Z",
+    fill: "currentColor"
+  })));
+});

package/dist/Icon/demo/base.d.ts

@@ -0,0 +1,6 @@
+/**
+ * compact: true
+ */
+import React from "react";
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Icon/demo/base.js

@@ -0,0 +1,41 @@
+/**
+ * compact: true
+ */
+import React from "react";
+import * as icons from "@trionesdev/antd-taro-icons-react";
+import _ from "lodash";
+import { DemoBlock } from "../../DemoBlock";
+export default (function () {
+  return /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u56FE\u6807"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 20,
+      flexWrap: 'wrap'
+    }
+  }, _.map(_.omit(icons, 'Icon'), function (icon, name) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: name,
+      style: {
+        width: '40%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        marginTop: 30
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(icon, {
+      key: name,
+      style: {
+        fontSize: 48
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 14,
+        marginTop: 5
+      }
+    }, name));
+  })));
+});

package/dist/Images/broken-image-icon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BrokenImageIcon: () => React.JSX.Element;

package/dist/Images/broken-image-icon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export var BrokenImageIcon = function BrokenImageIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 48 48",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.233 6.233 17.42 9.08l-10.817.001a.665.665 0 0 0-.647.562l-.007.096V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.415 2.415 0 0 1 1.807.625l.126.127 4.182 4.525 2.267-3.292 5.461 7.841-4.065 7.375H6.604c-1.86 0-3.382-1.47-3.482-3.317l-.005-.192V9.744c0-1.872 1.461-3.405 3.296-3.505l.19-.005h12.63Zm22.163 0c1.86 0 3.382 1.472 3.482 3.314l.005.192v29.14a3.507 3.507 0 0 1-3.3 3.505l-.191.006H27.789l3.63-6.587.06-.119a1.87 1.87 0 0 0-.163-1.853l-6.928-9.949 3.047-4.422a2.374 2.374 0 0 1 1.96-1.01 2.4 2.4 0 0 1 1.86.87l.106.14L42.05 34.89V9.74a.664.664 0 0 0-.654-.658H21.855l1.812-2.848h17.73Zm-28.305 5.611c.794 0 1.52.298 2.07.788l-.843 1.325-.067.114a1.87 1.87 0 0 0 .11 1.959l.848 1.217c-.556.515-1.3.83-2.118.83a3.122 3.122 0 0 1-3.117-3.116 3.119 3.119 0 0 1 3.117-3.117Z",
+    fill: "#DBDBDB",
+    fillRule: "nonzero"
+  }));
+};

package/dist/Images/demo/base.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './base.scss';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Images/demo/base.js

@@ -0,0 +1,101 @@
+/**
+ * compact: true
+ */
+import { DemoBlock } from "../../DemoBlock";
+import React from 'react';
+import "./base.scss";
+import Space from "../../Space";
+import Image from "../index";
+var demoSrc = 'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60';
+var demoSrc2 = 'https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80';
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      userSelect: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u7528\u6CD5"
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u591A\u79CD\u586B\u5145\u6A21\u5F0F"
+  }, /*#__PURE__*/React.createElement(Space, {
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc,
+    width: 100,
+    height: 100,
+    fit: "fill"
+  }), /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc,
+    width: 100,
+    height: 100,
+    fit: "contain"
+  }), /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc,
+    width: 100,
+    height: 100,
+    fit: "cover"
+  }), /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc,
+    width: 100,
+    height: 100,
+    fit: "scale-down"
+  }), /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc,
+    width: 100,
+    height: 100,
+    fit: "none"
+  }))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u81EA\u5B9A\u4E49\u5706\u89D2"
+  }, /*#__PURE__*/React.createElement(Space, {
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc,
+    width: 64,
+    height: 64,
+    fit: "cover",
+    style: {
+      borderRadius: 4
+    }
+  }), /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc,
+    width: 64,
+    height: 64,
+    fit: "cover",
+    style: {
+      borderRadius: 8
+    }
+  }), /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc,
+    width: 64,
+    height: 64,
+    fit: "cover",
+    style: {
+      borderRadius: 32
+    }
+  }))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u901A\u8FC7 CSS \u53D8\u91CF\u7EDF\u4E00\u8BBE\u7F6E\u56FE\u7247\u5927\u5C0F"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "imagesContainer"
+  }, /*#__PURE__*/React.createElement(Space, {
+    wrap: true
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc
+  }), /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc
+  }), /*#__PURE__*/React.createElement(Image, {
+    src: demoSrc
+  })))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u52A0\u8F7D\u5931\u8D25"
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: "/404",
+    width: 100,
+    height: 100
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u61D2\u52A0\u8F7D"
+  }, /*#__PURE__*/React.createElement(Image, {
+    lazy: true,
+    src: demoSrc2
+  })));
+});

package/dist/Images/demo/base.scss

@@ -0,0 +1,4 @@
+.imagesContainer {
+  --triones-antm-image-width: 90px;
+  --triones-antm-image-height: 60px;
+}

package/dist/Images/image-icon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ImageIcon: () => React.JSX.Element;

package/dist/Images/image-icon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export var ImageIcon = function ImageIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 48 48",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M41.396 6.234c1.923 0 3.487 1.574 3.487 3.505v29.14c0 1.937-1.568 3.51-3.491 3.51H6.604c-1.923 0-3.487-1.573-3.487-3.51V9.745c0-1.936 1.564-3.51 3.487-3.51Zm0 2.847H6.604c-.355 0-.654.3-.654.658V34.9l5.989-8.707a2.373 2.373 0 0 1 1.801-1.005 2.405 2.405 0 0 1 1.933.752l4.182 4.525 7.58-11.005a2.374 2.374 0 0 1 1.96-1.01c.79 0 1.532.38 1.966 1.01L42.05 34.89V9.74a.664.664 0 0 0-.654-.658Zm-28.305 2.763a3.119 3.119 0 0 1 3.117 3.117 3.119 3.119 0 0 1-3.117 3.117 3.122 3.122 0 0 1-3.117-3.117 3.119 3.119 0 0 1 3.117-3.117Z",
+    fill: "#DBDBDB",
+    fillRule: "nonzero"
+  }));
+};

package/dist/Images/image.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { NativeProps } from '../utils/native-props';
+export type ImageProps = {
+    src?: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    placeholder?: ReactNode;
+    fallback?: ReactNode;
+    lazy?: boolean;
+    draggable?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
+    onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onContainerClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
+} & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap' | 'id'>;
+export declare const Image: React.FC<ImageProps>;