@tiny-design/react 1.0.4

package/es/form/types.d.ts

@@ -0,0 +1,67 @@
+import { BaseProps, DirectionType } from "../_utils/props.js";
+import { FormErrors, FormInstance, FormValues } from "./form-instance.js";
+import React from "react";
+
+//#region src/form/types.d.ts
+type Rule = {
+  type?: 'string' | 'number' | 'boolean';
+  message?: string;
+  max?: number;
+  min?: number;
+  required?: boolean;
+  enum?: any[];
+  len?: number;
+  pattern?: RegExp;
+  transform?: (value: any) => any;
+  validator?: (value: any) => boolean | Promise<boolean>;
+  whitespace?: boolean;
+};
+interface FormItemProps extends BaseProps {
+  name?: string;
+  required?: boolean;
+  colon?: boolean;
+  label?: React.ReactNode;
+  rules?: Rule[];
+  helper?: React.ReactNode;
+  notice?: React.ReactNode;
+  valuePropName?: string;
+  valueGetter?: (...args: any[]) => any;
+  labelCol?: number | {
+    span: number;
+    offset: number;
+  };
+  wrapperCol?: number | {
+    span: number;
+    offset: number;
+  };
+  children?: React.ReactNode;
+}
+type FormLayout = DirectionType | 'inline';
+type ValidateTrigger = 'onChange' | 'onBlur' | 'onSubmit';
+interface FormOptionsProps {
+  labelCol: number | {
+    span: number;
+    offset: number;
+  };
+  wrapperCol: number | {
+    span: number;
+    offset: number;
+  };
+  validateTrigger: ValidateTrigger;
+  layout: FormLayout;
+}
+interface FormProps extends BaseProps, Partial<FormOptionsProps>, React.PropsWithRef<JSX.IntrinsicElements['form']> {
+  form?: FormInstance;
+  initialValues?: FormValues;
+  onFinish?: (values: FormValues) => void;
+  onFinishFailed?: ({
+    values,
+    errors
+  }: {
+    values: FormValues;
+    errors: FormErrors;
+  }) => void;
+}
+//#endregion
+export { FormItemProps, FormProps, Rule };
+//# sourceMappingURL=types.d.ts.map

package/es/form/use-form.d.ts

@@ -0,0 +1,7 @@
+import { FormInstance, FormValues } from "./form-instance.js";
+
+//#region src/form/use-form.d.ts
+declare function useForm(initialValues?: FormValues): [FormInstance];
+//#endregion
+export { useForm };
+//# sourceMappingURL=use-form.d.ts.map

package/es/form/use-form.js

@@ -0,0 +1,9 @@
+import FormInstance from "./form-instance.js";
+//#region src/form/use-form.ts
+function useForm(initialValues = {}) {
+	return [new FormInstance(initialValues)];
+}
+//#endregion
+export { useForm as default };
+
+//# sourceMappingURL=use-form.js.map

package/es/form/use-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-form.js","names":[],"sources":["../../src/form/use-form.ts"],"sourcesContent":["import FormInstance, { FormValues } from './form-instance';\n\nexport default function useForm(initialValues: FormValues = {}): [FormInstance] {\n  return [new FormInstance(initialValues)];\n}\n"],"mappings":";;AAEA,SAAwB,QAAQ,gBAA4B,EAAE,EAAkB;AAC9E,QAAO,CAAC,IAAI,aAAa,cAAc,CAAC"}

package/es/grid/col.d.ts

@@ -0,0 +1,8 @@
+import { ColProps } from "./types.js";
+import React from "react";
+
+//#region src/grid/col.d.ts
+declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Col };
+//# sourceMappingURL=col.d.ts.map

package/es/grid/col.js

@@ -0,0 +1,48 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/grid/col.tsx
+const ScreenTypes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"xxl"
+];
+const Col = React.forwardRef((props, ref) => {
+	const { span = 24, offset = 0, order = 0, prefixCls: customisedCls, className, style, children, ...otherProps } = props;
+	const prefixCls = getPrefixCls("col", useContext(ConfigContext).prefixCls, customisedCls);
+	let sizeClassObj = {};
+	ScreenTypes.forEach((size) => {
+		let sizeProps = {};
+		const propSize = props[size];
+		if (typeof propSize === "number") sizeProps.span = propSize;
+		else if (typeof propSize === "object") sizeProps = propSize || {};
+		sizeClassObj = {
+			...sizeClassObj,
+			[`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== void 0,
+			[`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
+			[`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0
+		};
+	});
+	const cls = classNames(prefixCls, className, {
+		[`${prefixCls}-${span}`]: span,
+		[`${prefixCls}-offset-${offset}`]: offset,
+		[`${prefixCls}-order-${order}`]: order
+	}, sizeClassObj);
+	return /* @__PURE__ */ jsx("div", {
+		...otherProps,
+		ref,
+		className: cls,
+		style,
+		children
+	});
+});
+Col.displayName = "Col";
+//#endregion
+export { Col as default };
+
+//# sourceMappingURL=col.js.map

package/es/grid/col.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"col.js","names":[],"sources":["../../src/grid/col.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { ColProps, ColSize } from './types';\n\nconst ScreenTypes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];\n\nconst Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {\n  const {\n    span = 24,\n    offset = 0,\n    order = 0,\n    prefixCls: customisedCls,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('col', configContext.prefixCls, customisedCls);\n\n  let sizeClassObj = {};\n  ScreenTypes.forEach((size) => {\n    let sizeProps: ColSize = {};\n    // Prevent the error that expression of type 'string' can't be used to index type 'ColProps'.\n    const propSize = (props as any)[size];\n    if (typeof propSize === 'number') {\n      sizeProps.span = propSize;\n    } else if (typeof propSize === 'object') {\n      sizeProps = propSize || {};\n    }\n    sizeClassObj = {\n      ...sizeClassObj,\n      [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,\n      [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,\n      [`${prefixCls}-${size}-offset-${sizeProps.offset}`]:\n        sizeProps.offset || sizeProps.offset === 0,\n    };\n  });\n  const cls = classNames(\n    prefixCls,\n    className,\n    {\n      [`${prefixCls}-${span}`]: span,\n      [`${prefixCls}-offset-${offset}`]: offset,\n      [`${prefixCls}-order-${order}`]: order,\n    },\n    sizeClassObj\n  );\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={style}>\n      {children}\n    </div>\n  );\n});\n\nCol.displayName = 'Col';\n\nexport default Col;\n"],"mappings":";;;;;;AAMA,MAAM,cAAc;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;AAEzD,MAAM,MAAM,MAAM,YAAsC,OAAO,QAAQ;CACrE,MAAM,EACJ,OAAO,IACP,SAAS,GACT,QAAQ,GACR,WAAW,eACX,WACA,OACA,UACA,GAAG,eACD;CAEJ,MAAM,YAAY,aAAa,OADT,WAAW,cAAc,CACK,WAAW,cAAc;CAE7E,IAAI,eAAe,EAAE;AACrB,aAAY,SAAS,SAAS;EAC5B,IAAI,YAAqB,EAAE;EAE3B,MAAM,WAAY,MAAc;AAChC,MAAI,OAAO,aAAa,SACtB,WAAU,OAAO;WACR,OAAO,aAAa,SAC7B,aAAY,YAAY,EAAE;AAE5B,iBAAe;GACb,GAAG;IACF,GAAG,UAAU,GAAG,KAAK,GAAG,UAAU,SAAS,UAAU,SAAS,KAAA;IAC9D,GAAG,UAAU,GAAG,KAAK,SAAS,UAAU,UAAU,UAAU,SAAS,UAAU,UAAU;IACzF,GAAG,UAAU,GAAG,KAAK,UAAU,UAAU,WACxC,UAAU,UAAU,UAAU,WAAW;GAC5C;GACD;CACF,MAAM,MAAM,WACV,WACA,WACA;GACG,GAAG,UAAU,GAAG,SAAS;GACzB,GAAG,UAAU,UAAU,WAAW;GAClC,GAAG,UAAU,SAAS,UAAU;EAClC,EACD,aACD;AAED,QACE,oBAAC,OAAD;EAAK,GAAI;EAAiB;EAAK,WAAW;EAAY;EACnD;EACG,CAAA;EAER;AAEF,IAAI,cAAc"}

package/es/grid/row.d.ts

@@ -0,0 +1,8 @@
+import { RowProps } from "./types.js";
+import React from "react";
+
+//#region src/grid/row.d.ts
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Row };
+//# sourceMappingURL=row.d.ts.map

package/es/grid/row.js

@@ -0,0 +1,52 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import React, { useContext } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/grid/row.tsx
+const Row = React.forwardRef((props, ref) => {
+	const { gutter = 0, gutterSide = false, prefixCls: customisedCls, align, justify, className, style, children, ...otherProps } = props;
+	const prefixCls = getPrefixCls("row", useContext(ConfigContext).prefixCls, customisedCls);
+	const cls = classNames(prefixCls, className, {
+		[`${prefixCls}_align-${align}`]: align,
+		[`${prefixCls}_justify-${justify}`]: justify
+	});
+	const getGutter = () => {
+		return Array.isArray(gutter) ? gutter : [gutter, gutter];
+	};
+	const normalisedGutter = getGutter();
+	const rowGutterStyle = gutter ? {
+		marginLeft: gutterSide ? 0 : -normalisedGutter[0] / 2,
+		marginRight: gutterSide ? 0 : -normalisedGutter[0] / 2,
+		rowGap: normalisedGutter[1] || void 0
+	} : {};
+	return /* @__PURE__ */ jsx("div", {
+		...otherProps,
+		ref,
+		className: cls,
+		style: {
+			...style,
+			...rowGutterStyle
+		},
+		children: React.Children.map(children, (child) => {
+			const childElement = child;
+			if (childElement.type.displayName === "Col") {
+				const gutterStyle = gutter ? {
+					paddingLeft: normalisedGutter[0] / 2,
+					paddingRight: normalisedGutter[0] / 2
+				} : {};
+				const childProps = { style: {
+					...child.props.style,
+					...gutterStyle
+				} };
+				return React.cloneElement(childElement, childProps);
+			}
+			return childElement;
+		})
+	});
+});
+Row.displayName = "Row";
+//#endregion
+export { Row as default };
+
+//# sourceMappingURL=row.js.map

package/es/grid/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","names":[],"sources":["../../src/grid/row.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { ColProps, RowProps } from './types';\n\nconst Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {\n  const {\n    gutter = 0,\n    gutterSide = false,\n    prefixCls: customisedCls,\n    align,\n    justify,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('row', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_align-${align}`]: align,\n    [`${prefixCls}_justify-${justify}`]: justify,\n  });\n\n  const getGutter = (): [number, number] => {\n    return Array.isArray(gutter) ? gutter : [gutter, gutter];\n  };\n\n  const normalisedGutter = getGutter();\n\n  const rowGutterStyle = gutter\n    ? {\n        marginLeft: gutterSide ? 0 : -normalisedGutter[0] / 2,\n        marginRight: gutterSide ? 0 : -normalisedGutter[0] / 2,\n        rowGap: normalisedGutter[1] || undefined,\n      }\n    : {};\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={{ ...style, ...rowGutterStyle }}>\n      {React.Children.map(children, (child) => {\n        const childElement = child as React.FunctionComponentElement<ColProps>;\n        if (childElement.type.displayName === 'Col') {\n          const gutterStyle = gutter\n            ? {\n                paddingLeft: normalisedGutter[0] / 2,\n                paddingRight: normalisedGutter[0] / 2,\n              }\n            : {};\n          const childProps: Partial<ColProps> = {\n            style: {\n              ...child.props.style,\n              ...gutterStyle,\n            },\n          };\n          return React.cloneElement(childElement, childProps);\n        }\n        return childElement;\n      })}\n    </div>\n  );\n});\n\nRow.displayName = 'Row';\n\nexport default Row;\n"],"mappings":";;;;;;AAMA,MAAM,MAAM,MAAM,YAAsC,OAAO,QAAQ;CACrE,MAAM,EACJ,SAAS,GACT,aAAa,OACb,WAAW,eACX,OACA,SACA,WACA,OACA,UACA,GAAG,eACD;CAEJ,MAAM,YAAY,aAAa,OADT,WAAW,cAAc,CACK,WAAW,cAAc;CAC7E,MAAM,MAAM,WAAW,WAAW,WAAW;GAC1C,GAAG,UAAU,SAAS,UAAU;GAChC,GAAG,UAAU,WAAW,YAAY;EACtC,CAAC;CAEF,MAAM,kBAAoC;AACxC,SAAO,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,QAAQ,OAAO;;CAG1D,MAAM,mBAAmB,WAAW;CAEpC,MAAM,iBAAiB,SACnB;EACE,YAAY,aAAa,IAAI,CAAC,iBAAiB,KAAK;EACpD,aAAa,aAAa,IAAI,CAAC,iBAAiB,KAAK;EACrD,QAAQ,iBAAiB,MAAM,KAAA;EAChC,GACD,EAAE;AAEN,QACE,oBAAC,OAAD;EAAK,GAAI;EAAiB;EAAK,WAAW;EAAK,OAAO;GAAE,GAAG;GAAO,GAAG;GAAgB;YAClF,MAAM,SAAS,IAAI,WAAW,UAAU;GACvC,MAAM,eAAe;AACrB,OAAI,aAAa,KAAK,gBAAgB,OAAO;IAC3C,MAAM,cAAc,SAChB;KACE,aAAa,iBAAiB,KAAK;KACnC,cAAc,iBAAiB,KAAK;KACrC,GACD,EAAE;IACN,MAAM,aAAgC,EACpC,OAAO;KACL,GAAG,MAAM,MAAM;KACf,GAAG;KACJ,EACF;AACD,WAAO,MAAM,aAAa,cAAc,WAAW;;AAErD,UAAO;IACP;EACE,CAAA;EAER;AAEF,IAAI,cAAc"}

package/es/grid/style/_index.scss

@@ -0,0 +1,90 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row wrap;
+
+  &_justify {
+    &-start {
+      justify-content: flex-start;
+    }
+
+    &-center {
+      justify-content: center;
+    }
+
+    &-end {
+      justify-content: flex-end;
+    }
+
+    &-space-around {
+      justify-content: space-around;
+    }
+
+    &-space-between {
+      justify-content: space-between;
+    }
+
+    &-space-evenly {
+      justify-content: space-evenly;
+    }
+  }
+
+  &_align {
+    &-top {
+      align-items: flex-start;
+    }
+
+    &-center {
+      align-items: center;
+    }
+
+    &-bottom {
+      align-items: flex-end;
+    }
+
+    &-baseline {
+      align-items: baseline;
+    }
+  }
+}
+
+.#{$prefix}-col {
+  @mixin grid($size: '') {
+    @for $i from 1 through 24 {
+      &#{$size}-#{$i} {
+        width: calc(100% / (24 / $i));
+      }
+
+      &#{$size}-offset-#{$i} {
+        margin-left: calc(100% / (24 / $i));
+      }
+
+      &#{$size}-order-#{$i} {
+        order: $i;
+      }
+    }
+  }
+
+  box-sizing: border-box;
+  display: block;
+  @include grid();
+  @include grid('-xs');
+
+  @media screen and (min-width: $size-sm) {
+    @include grid('-sm');
+  }
+  @media screen and (min-width: $size-md) {
+    @include grid('-md');
+  }
+  @media screen and (min-width: $size-lg) {
+    @include grid('-lg');
+  }
+  @media screen and (min-width: $size-xl) {
+    @include grid('-xl');
+  }
+  @media screen and (min-width: $size-xxl) {
+    @include grid('-xxl');
+  }
+}