@tiny-design/react 1.0.4

package/lib/native-select/style/_index.scss

@@ -0,0 +1,65 @@
+@use '../../style/variables' as *;
+@use './mixin' as *;
+
+$select-arrow: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij4gIDxwYXRoIGZpbGw9IiMzOTNFNDgiIGQ9Ik0wLjIyMiw1LjYxMyBMNS40NTEsMC4yMjMgQzUuNzU2MjEyMDksLTAuMDc0MzYzMjMzMyA2LjI0Mjc4NzkxLC0wLjA3NDM2MzIzMzMgNi41NDgsMC4yMjMgTDExLjc3OCw1LjYxMyBDMTIuMTgsNi4wMjcgMTIuMDI1LDYuNjY3IDExLjQwNyw2LjY2NyBMMC41OTIsNi42NjcgQy0wLjAyNCw2LjY2NyAtMC4xOCw2LjAyNyAwLjIyMiw1LjYxMyBaIE0wLjU5Miw5LjMzMyBMMTEuNDA3LDkuMzMzIEMxMi4wMjUsOS4zMzMgMTIuMTgsOS45NzMgMTEuNzc3LDEwLjM4NyBMNi41NDcsMTUuNzc3IEM2LjI0MTkxMjU4LDE2LjA3MzcxNDMgNS43NTYwODc0MiwxNi4wNzM3MTQzIDUuNDUxLDE1Ljc3NyBMMC4yMjIsMTAuMzg3IEMtMC4xOCw5Ljk3MyAtMC4wMjQsOS4zMzMgMC41OTIsOS4zMzMgWiIvPjwvc3ZnPg==';
+
+.#{$prefix}-select-native {
+  display: inline-flex;
+  -webkit-appearance: none;
+  cursor: pointer;
+  color: var(--ty-color-text);
+  min-width: 200px;
+  margin: 0;
+  line-height: 18px;
+  vertical-align: middle;
+  box-sizing: border-box;
+  border: 1px solid var(--ty-input-border);
+  border-radius: $native-select-border-radius;
+  background-color: var(--ty-native-select-bg);
+  background-image: url($select-arrow);
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 0.62em auto, 100%;
+  transition: all 0.3s;
+  outline: none;
+
+  &:hover {
+    border-color: var(--ty-color-primary);
+  }
+
+  &:focus {
+    border-color: var(--ty-input-focus-border);
+    box-shadow: var(--ty-input-focus-shadow);
+  }
+
+  &_disabled {
+    background-image: url($select-arrow);
+    background-size: 0.52em auto, 100%;
+    background-color: var(--ty-native-select-disabled-bg);
+    opacity: 0.75;
+    color: var(--ty-native-select-disabled-color);
+    cursor: not-allowed;
+    resize: none;
+
+    &:hover {
+      border-color: transparent;
+    }
+
+    &:focus {
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  &_sm {
+    @include native-size($native-select-sm-padding, $native-select-sm-font-size);
+  }
+
+  &_md {
+    @include native-size($native-select-md-padding, $native-select-md-font-size);
+  }
+
+  &_lg {
+    @include native-size($native-select-lg-padding, $native-select-lg-font-size);
+  }
+}

package/lib/native-select/style/_mixin.scss

@@ -0,0 +1,4 @@
+@mixin native-size($padding, $font-size){
+  padding: $padding;
+  font-size: $font-size;
+}

package/lib/native-select/style/index.css

@@ -0,0 +1,55 @@
+.ty-select-native {
+  display: inline-flex;
+  -webkit-appearance: none;
+  cursor: pointer;
+  color: var(--ty-color-text);
+  min-width: 200px;
+  margin: 0;
+  line-height: 18px;
+  vertical-align: middle;
+  box-sizing: border-box;
+  border: 1px solid var(--ty-input-border);
+  border-radius: 2px;
+  background-color: var(--ty-native-select-bg);
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij4gIDxwYXRoIGZpbGw9IiMzOTNFNDgiIGQ9Ik0wLjIyMiw1LjYxMyBMNS40NTEsMC4yMjMgQzUuNzU2MjEyMDksLTAuMDc0MzYzMjMzMyA2LjI0Mjc4NzkxLC0wLjA3NDM2MzIzMzMgNi41NDgsMC4yMjMgTDExLjc3OCw1LjYxMyBDMTIuMTgsNi4wMjcgMTIuMDI1LDYuNjY3IDExLjQwNyw2LjY2NyBMMC41OTIsNi42NjcgQy0wLjAyNCw2LjY2NyAtMC4xOCw2LjAyNyAwLjIyMiw1LjYxMyBaIE0wLjU5Miw5LjMzMyBMMTEuNDA3LDkuMzMzIEMxMi4wMjUsOS4zMzMgMTIuMTgsOS45NzMgMTEuNzc3LDEwLjM4NyBMNi41NDcsMTUuNzc3IEM2LjI0MTkxMjU4LDE2LjA3MzcxNDMgNS43NTYwODc0MiwxNi4wNzM3MTQzIDUuNDUxLDE1Ljc3NyBMMC4yMjIsMTAuMzg3IEMtMC4xOCw5Ljk3MyAtMC4wMjQsOS4zMzMgMC41OTIsOS4zMzMgWiIvPjwvc3ZnPg==");
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 0.62em auto, 100%;
+  transition: all 0.3s;
+  outline: none;
+}
+.ty-select-native:hover {
+  border-color: var(--ty-color-primary);
+}
+.ty-select-native:focus {
+  border-color: var(--ty-input-focus-border);
+  box-shadow: var(--ty-input-focus-shadow);
+}
+.ty-select-native_disabled {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij4gIDxwYXRoIGZpbGw9IiMzOTNFNDgiIGQ9Ik0wLjIyMiw1LjYxMyBMNS40NTEsMC4yMjMgQzUuNzU2MjEyMDksLTAuMDc0MzYzMjMzMyA2LjI0Mjc4NzkxLC0wLjA3NDM2MzIzMzMgNi41NDgsMC4yMjMgTDExLjc3OCw1LjYxMyBDMTIuMTgsNi4wMjcgMTIuMDI1LDYuNjY3IDExLjQwNyw2LjY2NyBMMC41OTIsNi42NjcgQy0wLjAyNCw2LjY2NyAtMC4xOCw2LjAyNyAwLjIyMiw1LjYxMyBaIE0wLjU5Miw5LjMzMyBMMTEuNDA3LDkuMzMzIEMxMi4wMjUsOS4zMzMgMTIuMTgsOS45NzMgMTEuNzc3LDEwLjM4NyBMNi41NDcsMTUuNzc3IEM2LjI0MTkxMjU4LDE2LjA3MzcxNDMgNS43NTYwODc0MiwxNi4wNzM3MTQzIDUuNDUxLDE1Ljc3NyBMMC4yMjIsMTAuMzg3IEMtMC4xOCw5Ljk3MyAtMC4wMjQsOS4zMzMgMC41OTIsOS4zMzMgWiIvPjwvc3ZnPg==");
+  background-size: 0.52em auto, 100%;
+  background-color: var(--ty-native-select-disabled-bg);
+  opacity: 0.75;
+  color: var(--ty-native-select-disabled-color);
+  cursor: not-allowed;
+  resize: none;
+}
+.ty-select-native_disabled:hover {
+  border-color: transparent;
+}
+.ty-select-native_disabled:focus {
+  border-color: transparent;
+  box-shadow: none;
+}
+.ty-select-native_sm {
+  padding: 3px 25px 3px 7px;
+  font-size: 0.875rem;
+}
+.ty-select-native_md {
+  padding: 6px 25px 6px 7px;
+  font-size: 1rem;
+}
+.ty-select-native_lg {
+  padding: 9px 25px 9px 7px;
+  font-size: 1.25rem;
+}

package/lib/native-select/style/index.d.ts

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

package/lib/native-select/style/index.js

@@ -0,0 +1 @@
+require("./index.css");

package/lib/native-select/types.d.ts

@@ -0,0 +1,13 @@
+import { BaseProps, SizeType } from "../_utils/props.js";
+import React from "react";
+
+//#region src/native-select/types.d.ts
+type NativeSelectGroupProps = React.PropsWithRef<JSX.IntrinsicElements['optgroup']>;
+type NativeSelectOptionProps = React.PropsWithRef<JSX.IntrinsicElements['option']>;
+interface NativeSelectProps extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['select']>, 'size'> {
+  size?: SizeType;
+  children: React.ReactElement<NativeSelectGroupProps | NativeSelectOptionProps>;
+}
+//#endregion
+export { NativeSelectProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/notification/index.js

@@ -0,0 +1,8 @@
+require('../style/base.css');
+require('./style/index.css');
+//#region src/notification/index.tsx
+var notification_default = require("./notification-container.js").default;
+//#endregion
+exports.default = notification_default;
+
+//# sourceMappingURL=index.js.map

package/lib/notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["notificationContainer"],"sources":["../../src/notification/index.tsx"],"sourcesContent":["import notificationContainer from './notification-container';\n\nexport default notificationContainer;\n"],"mappings":";AAEA,IAAA,8DAAeA"}

package/lib/notification/notification-container.d.ts

@@ -0,0 +1,5 @@
+//#region src/notification/notification-container.d.ts
+declare const notificationContainer: any;
+//#endregion
+export { notificationContainer };
+//# sourceMappingURL=notification-container.d.ts.map

package/lib/notification/notification-container.js

@@ -0,0 +1,80 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_general = require("../_utils/general.js");
+const require_notification = require("./notification.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_dom_client = require("react-dom/client");
+//#region src/notification/notification-container.tsx
+const className = "ty-notification-container";
+const rootMap = /* @__PURE__ */ new Map();
+let offset;
+const unmountDom = (queryName, containerDiv, position, height, direction) => {
+	const root = rootMap.get(containerDiv);
+	if (root) {
+		root.unmount();
+		rootMap.delete(containerDiv);
+	}
+	document.body.removeChild(containerDiv);
+	requestAnimationFrame(() => {
+		const containers = document.querySelectorAll(`.${queryName}`);
+		const len = containers.length;
+		for (let i = 0; i < len; i++) {
+			const element = containers[i];
+			const elementPosition = parseInt(element.style[direction] || "0", 10);
+			elementPosition > position && (element.style[direction] = `${elementPosition - height - offset}px`);
+		}
+	});
+};
+const createComponent = (options, type) => {
+	const placement = options.placement || "topRight";
+	const queryName = `${className}_${require_general.camelCaseToDash(placement)}`;
+	const containers = document.querySelectorAll(`.${queryName}`);
+	const lastContainer = containers.length > 0 ? containers[containers.length - 1] : null;
+	const div = document.createElement("div");
+	div.className = `${className} ${queryName}`;
+	document.body.appendChild(div);
+	offset = options.offset || 24;
+	const direction = placement.includes("top") ? "top" : "bottom";
+	const position = lastContainer ? parseInt(lastContainer.style[direction] || "0", 10) + lastContainer.offsetHeight + offset : options.margin || 16;
+	div.style[direction] = `${position}px`;
+	const props = {
+		type,
+		title: options.title,
+		description: options.description,
+		footer: options.footer,
+		duration: options.duration,
+		onClose: options.onClose,
+		onClick: options.onClick,
+		icon: options.icon,
+		didMount: () => {
+			placement.includes("Right") ? div.style.right = `0px` : div.style.left = `0px`;
+		},
+		willUnmount: (height) => {
+			unmountDom(queryName, div, parseInt(div.style[direction] || "0", 10), height, direction);
+		}
+	};
+	const element = react.default.createElement(require_notification.default, props);
+	const root = (0, react_dom_client.createRoot)(div);
+	rootMap.set(div, root);
+	root.render(element);
+};
+const open = (options) => {
+	createComponent(options, void 0);
+};
+const notificationContainer = {};
+[
+	"success",
+	"error",
+	"warning",
+	"info"
+].forEach((type) => {
+	notificationContainer[type] = (options) => {
+		createComponent(options, type);
+	};
+});
+notificationContainer.open = open;
+notificationContainer.warn = notificationContainer.warning;
+//#endregion
+exports.default = notificationContainer;
+
+//# sourceMappingURL=notification-container.js.map

package/lib/notification/notification-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-container.js","names":["camelCaseToDash","React","Notification"],"sources":["../../src/notification/notification-container.tsx"],"sourcesContent":["import React, { ReactNode, MouseEventHandler } from 'react';\nimport { createRoot, Root } from 'react-dom/client';\nimport Notification from './notification';\nimport { camelCaseToDash } from '../_utils/general';\nimport { NotificationProps, NotificationType } from './types';\n\nconst className = 'ty-notification-container';\nconst rootMap = new Map<HTMLElement, Root>();\n\ntype Direction = 'top' | 'bottom';\ntype NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';\ntype Options = {\n  margin?: number;\n  offset?: number;\n  title?: ReactNode;\n  description?: ReactNode;\n  footer?: ReactNode;\n  duration?: number;\n  placement?: NotificationPlacement;\n  onClose?: MouseEventHandler;\n  onClick?: MouseEventHandler;\n  icon?: ReactNode;\n};\ntype UnmountDom = (\n  queryName: string,\n  containerDiv: HTMLElement,\n  position: number,\n  height: number,\n  direction: Direction\n) => void;\n\nlet offset: number;\n\nconst unmountDom: UnmountDom = (queryName, containerDiv, position, height, direction) => {\n  const root = rootMap.get(containerDiv);\n  if (root) {\n    root.unmount();\n    rootMap.delete(containerDiv);\n  }\n  document.body.removeChild(containerDiv);\n  requestAnimationFrame(() => {\n    const containers = document.querySelectorAll(`.${queryName}`);\n    const len = containers.length;\n    for (let i = 0; i < len; i++) {\n      const element = containers[i] as HTMLElement;\n      const elementPosition = parseInt((element as HTMLElement).style[direction] || '0', 10);\n      elementPosition > position &&\n        (element.style[direction] = `${elementPosition - height - offset}px`);\n    }\n  });\n};\n\nconst createComponent = (options: Options, type: NotificationType) => {\n  const placement = options.placement || 'topRight';\n  const queryName = `${className}_${camelCaseToDash(placement)}`;\n  const containers = document.querySelectorAll(`.${queryName}`);\n  const lastContainer =\n    containers.length > 0 ? (containers[containers.length - 1] as HTMLElement) : null;\n\n  const div = document.createElement('div');\n  div.className = `${className} ${queryName}`;\n  document.body.appendChild(div);\n\n  offset = options.offset || 24;\n  const direction: Direction = placement.includes('top') ? 'top' : 'bottom';\n  const position = lastContainer\n    ? parseInt(lastContainer.style[direction] || '0', 10) + lastContainer.offsetHeight + offset\n    : options.margin || 16;\n  div.style[direction] = `${position}px`;\n\n  const props: NotificationProps = {\n    type,\n    title: options.title,\n    description: options.description,\n    footer: options.footer,\n    duration: options.duration,\n    onClose: options.onClose,\n    onClick: options.onClick,\n    icon: options.icon,\n    didMount: () => {\n      placement.includes('Right') ? (div.style.right = `0px`) : (div.style.left = `0px`);\n    },\n    willUnmount: (height) => {\n      const updatedPosition = parseInt(div.style[direction] || '0', 10);\n      unmountDom(queryName, div, updatedPosition, height, direction);\n    },\n  };\n  const element = React.createElement(Notification, props);\n  const root = createRoot(div);\n  rootMap.set(div, root);\n  root.render(element);\n};\n\nconst open = (options: Options) => {\n  createComponent(options, undefined);\n};\n\nconst notificationContainer: any = {};\n\n['success', 'error', 'warning', 'info'].forEach((type) => {\n  notificationContainer[type] = (options: Options) => {\n    createComponent(options, type as NotificationType);\n  };\n});\n\nnotificationContainer.open = open;\nnotificationContainer.warn = notificationContainer.warning;\n\nexport default notificationContainer;\n"],"mappings":";;;;;;;AAMA,MAAM,YAAY;AAClB,MAAM,0BAAU,IAAI,KAAwB;AAwB5C,IAAI;AAEJ,MAAM,cAA0B,WAAW,cAAc,UAAU,QAAQ,cAAc;CACvF,MAAM,OAAO,QAAQ,IAAI,aAAa;AACtC,KAAI,MAAM;AACR,OAAK,SAAS;AACd,UAAQ,OAAO,aAAa;;AAE9B,UAAS,KAAK,YAAY,aAAa;AACvC,6BAA4B;EAC1B,MAAM,aAAa,SAAS,iBAAiB,IAAI,YAAY;EAC7D,MAAM,MAAM,WAAW;AACvB,OAAK,IAAI,IAAI,GAAG,IAAI,KAAK,KAAK;GAC5B,MAAM,UAAU,WAAW;GAC3B,MAAM,kBAAkB,SAAU,QAAwB,MAAM,cAAc,KAAK,GAAG;AACtF,qBAAkB,aACf,QAAQ,MAAM,aAAa,GAAG,kBAAkB,SAAS,OAAO;;GAErE;;AAGJ,MAAM,mBAAmB,SAAkB,SAA2B;CACpE,MAAM,YAAY,QAAQ,aAAa;CACvC,MAAM,YAAY,GAAG,UAAU,GAAGA,gBAAAA,gBAAgB,UAAU;CAC5D,MAAM,aAAa,SAAS,iBAAiB,IAAI,YAAY;CAC7D,MAAM,gBACJ,WAAW,SAAS,IAAK,WAAW,WAAW,SAAS,KAAqB;CAE/E,MAAM,MAAM,SAAS,cAAc,MAAM;AACzC,KAAI,YAAY,GAAG,UAAU,GAAG;AAChC,UAAS,KAAK,YAAY,IAAI;AAE9B,UAAS,QAAQ,UAAU;CAC3B,MAAM,YAAuB,UAAU,SAAS,MAAM,GAAG,QAAQ;CACjE,MAAM,WAAW,gBACb,SAAS,cAAc,MAAM,cAAc,KAAK,GAAG,GAAG,cAAc,eAAe,SACnF,QAAQ,UAAU;AACtB,KAAI,MAAM,aAAa,GAAG,SAAS;CAEnC,MAAM,QAA2B;EAC/B;EACA,OAAO,QAAQ;EACf,aAAa,QAAQ;EACrB,QAAQ,QAAQ;EAChB,UAAU,QAAQ;EAClB,SAAS,QAAQ;EACjB,SAAS,QAAQ;EACjB,MAAM,QAAQ;EACd,gBAAgB;AACd,aAAU,SAAS,QAAQ,GAAI,IAAI,MAAM,QAAQ,QAAU,IAAI,MAAM,OAAO;;EAE9E,cAAc,WAAW;AAEvB,cAAW,WAAW,KADE,SAAS,IAAI,MAAM,cAAc,KAAK,GAAG,EACrB,QAAQ,UAAU;;EAEjE;CACD,MAAM,UAAUC,MAAAA,QAAM,cAAcC,qBAAAA,SAAc,MAAM;CACxD,MAAM,QAAA,GAAA,iBAAA,YAAkB,IAAI;AAC5B,SAAQ,IAAI,KAAK,KAAK;AACtB,MAAK,OAAO,QAAQ;;AAGtB,MAAM,QAAQ,YAAqB;AACjC,iBAAgB,SAAS,KAAA,EAAU;;AAGrC,MAAM,wBAA6B,EAAE;AAErC;CAAC;CAAW;CAAS;CAAW;CAAO,CAAC,SAAS,SAAS;AACxD,uBAAsB,SAAS,YAAqB;AAClD,kBAAgB,SAAS,KAAyB;;EAEpD;AAEF,sBAAsB,OAAO;AAC7B,sBAAsB,OAAO,sBAAsB"}

package/lib/notification/notification.js

@@ -0,0 +1,85 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_components = require("../_utils/components.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/notification/notification.tsx
+const Notification = (props) => {
+	const { duration = 4500, title, description, footer, type, icon, willUnmount, didMount, onClick, onClose, className, prefixCls: customisedCls, ...otherProps } = props;
+	const prefixCls = require_general.getPrefixCls("notification", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, className);
+	const ref = (0, react.useRef)(null);
+	const timerRef = (0, react.useRef)();
+	const height = (0, react.useRef)(0);
+	const closeBtnOnClick = (e) => {
+		timerRef.current && window.clearTimeout(timerRef.current);
+		willUnmount(height.current);
+		onClose && onClose(e);
+	};
+	const renderIcon = () => {
+		if (react.default.isValidElement(icon)) return icon;
+		else if (typeof type === "string") {
+			const iconSize = 40;
+			switch (type) {
+				case "success": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.CheckCircle, {
+					size: iconSize,
+					className: `${prefixCls}__icon`
+				});
+				case "info": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.InfoCircle, {
+					size: iconSize,
+					className: `${prefixCls}__icon`
+				});
+				case "warning": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.WarningCircle, {
+					size: iconSize,
+					className: `${prefixCls}__icon`
+				});
+				case "error": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components.CloseCircle, {
+					size: iconSize,
+					className: `${prefixCls}__icon`
+				});
+			}
+		}
+		return null;
+	};
+	(0, react.useEffect)(() => {
+		didMount();
+		const node = ref.current;
+		height.current = node ? node.offsetHeight : 0;
+		if (duration !== 0) timerRef.current = window.setTimeout(() => {
+			willUnmount(height.current);
+		}, duration);
+	}, [
+		didMount,
+		duration,
+		willUnmount
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...otherProps,
+		className: cls,
+		onClick,
+		ref,
+		children: [renderIcon(), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefixCls}__title`,
+				children: title
+			}),
+			description,
+			footer,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: `${prefixCls}__close`,
+				onClick: closeBtnOnClick,
+				"aria-label": "Close",
+				children: "✕"
+			})
+		] })]
+	});
+};
+//#endregion
+exports.default = Notification;
+
+//# sourceMappingURL=notification.js.map

package/lib/notification/notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.js","names":["getPrefixCls","ConfigContext","React","CheckCircle","InfoCircle","WarningCircle","CloseCircle"],"sources":["../../src/notification/notification.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CheckCircle, CloseCircle, InfoCircle, WarningCircle } from '../_utils/components';\nimport { NotificationProps } from './types';\n\nconst Notification = (props: NotificationProps): JSX.Element => {\n  const {\n    duration = 4500,\n    title,\n    description,\n    footer,\n    type,\n    icon,\n    willUnmount,\n    didMount,\n    onClick,\n    onClose,\n    className,\n    prefixCls: customisedCls,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('notification', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const timerRef = useRef<number>();\n  const height = useRef(0);\n\n  const closeBtnOnClick = (e: React.MouseEvent): void => {\n    timerRef.current && window.clearTimeout(timerRef.current);\n    willUnmount(height.current);\n    onClose && onClose(e);\n  };\n\n  const renderIcon = (): React.ReactNode => {\n    if (React.isValidElement(icon)) {\n      return icon;\n    } else if (typeof type === 'string') {\n      const iconSize = 40;\n      switch (type) {\n        case 'success':\n          return <CheckCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'info':\n          return <InfoCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'warning':\n          return <WarningCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'error':\n          return <CloseCircle size={iconSize} className={`${prefixCls}__icon`} />;\n      }\n    }\n\n    return null;\n  };\n\n  useEffect(() => {\n    didMount();\n    const node = ref.current;\n    height.current = node ? node.offsetHeight : 0;\n\n    if (duration !== 0) {\n      timerRef.current = window.setTimeout(() => {\n        willUnmount(height.current);\n      }, duration);\n    }\n  }, [didMount, duration, willUnmount]);\n\n  return (\n    <div {...otherProps} className={cls} onClick={onClick} ref={ref}>\n      {renderIcon()}\n      <div>\n        <div className={`${prefixCls}__title`}>{title}</div>\n        {description}\n        {footer}\n        <button type=\"button\" className={`${prefixCls}__close`} onClick={closeBtnOnClick} aria-label=\"Close\">\n          ✕\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport default Notification;\n"],"mappings":";;;;;;;;;;AAOA,MAAM,gBAAgB,UAA0C;CAC9D,MAAM,EACJ,WAAW,MACX,OACA,aACA,QACA,MACA,MACA,aACA,UACA,SACA,SACA,WACA,WAAW,eACX,GAAG,eACD;CAEJ,MAAM,YAAYA,gBAAAA,aAAa,iBAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACc,WAAW,cAAc;CACtF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,UAAU;CAC5C,MAAM,OAAA,GAAA,MAAA,QAAoC,KAAK;CAC/C,MAAM,YAAA,GAAA,MAAA,SAA2B;CACjC,MAAM,UAAA,GAAA,MAAA,QAAgB,EAAE;CAExB,MAAM,mBAAmB,MAA8B;AACrD,WAAS,WAAW,OAAO,aAAa,SAAS,QAAQ;AACzD,cAAY,OAAO,QAAQ;AAC3B,aAAW,QAAQ,EAAE;;CAGvB,MAAM,mBAAoC;AACxC,MAAIC,MAAAA,QAAM,eAAe,KAAK,CAC5B,QAAO;WACE,OAAO,SAAS,UAAU;GACnC,MAAM,WAAW;AACjB,WAAQ,MAAR;IACE,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,aAAD;KAAa,MAAM;KAAU,WAAW,GAAG,UAAU;KAAW,CAAA;IACzE,KAAK,OACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;KAAY,MAAM;KAAU,WAAW,GAAG,UAAU;KAAW,CAAA;IACxE,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,eAAD;KAAe,MAAM;KAAU,WAAW,GAAG,UAAU;KAAW,CAAA;IAC3E,KAAK,QACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,aAAD;KAAa,MAAM;KAAU,WAAW,GAAG,UAAU;KAAW,CAAA;;;AAI7E,SAAO;;AAGT,EAAA,GAAA,MAAA,iBAAgB;AACd,YAAU;EACV,MAAM,OAAO,IAAI;AACjB,SAAO,UAAU,OAAO,KAAK,eAAe;AAE5C,MAAI,aAAa,EACf,UAAS,UAAU,OAAO,iBAAiB;AACzC,eAAY,OAAO,QAAQ;KAC1B,SAAS;IAEb;EAAC;EAAU;EAAU;EAAY,CAAC;AAErC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAc;EAAc;YAA5D,CACG,YAAY,EACb,iBAAA,GAAA,kBAAA,MAAC,OAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAAW;IAAY,CAAA;GACnD;GACA;GACD,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAAQ,MAAK;IAAS,WAAW,GAAG,UAAU;IAAU,SAAS;IAAiB,cAAW;cAAQ;IAE5F,CAAA;GACL,EAAA,CAAA,CACF"}

package/lib/notification/style/_index.scss

@@ -0,0 +1,66 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-notification {
+  position: relative;
+  padding: 16px 24px;
+  border-radius: 3px;
+  color: var(--ty-color-text-secondary);
+  font-size: $font-size-base;
+  box-shadow: var(--ty-shadow-modal);
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+
+  &-container {
+    width: $notification-width;
+    position: fixed;
+    background-color: var(--ty-notification-bg);
+    z-index: 999;
+    box-sizing: border-box;
+    transition: all 200ms;
+
+    &_top-right,
+    &_bottom-right {
+      right: -($notification-width + $notification-margin);
+      margin-right: $notification-margin;
+    }
+
+    &_top-left,
+    &_bottom-left {
+      left: -($notification-width + $notification-margin);
+      margin-left: $notification-margin;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    right: 24px;
+    top: 16px;
+    cursor: pointer;
+    color: var(--ty-notification-close-color);
+    user-select: none;
+    transition: all 300ms;
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+
+    &:hover {
+      color: var(--ty-notification-close-hover);
+    }
+  }
+
+  &__title {
+    padding-right: 24px;
+    margin-bottom: 5px;
+    color: var(--ty-color-text);
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  &__icon {
+    margin-right: 15px;
+    height: 30px;
+  }
+}

package/lib/notification/style/index.css

@@ -0,0 +1,57 @@
+.ty-notification {
+  position: relative;
+  padding: 16px 24px;
+  border-radius: 3px;
+  color: var(--ty-color-text-secondary);
+  font-size: 1rem;
+  box-shadow: var(--ty-shadow-modal);
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+}
+.ty-notification-container {
+  width: 380px;
+  position: fixed;
+  background-color: var(--ty-notification-bg);
+  z-index: 999;
+  box-sizing: border-box;
+  transition: all 200ms;
+}
+.ty-notification-container_top-right, .ty-notification-container_bottom-right {
+  right: -400px;
+  margin-right: 20px;
+}
+.ty-notification-container_top-left, .ty-notification-container_bottom-left {
+  left: -400px;
+  margin-left: 20px;
+}
+.ty-notification__close {
+  position: absolute;
+  right: 24px;
+  top: 16px;
+  cursor: pointer;
+  color: var(--ty-notification-close-color);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  transition: all 300ms;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+.ty-notification__close:hover {
+  color: var(--ty-notification-close-hover);
+}
+.ty-notification__title {
+  padding-right: 24px;
+  margin-bottom: 5px;
+  color: var(--ty-color-text);
+  font-size: 16px;
+  line-height: 24px;
+}
+.ty-notification__icon {
+  margin-right: 15px;
+  height: 30px;
+}

package/lib/notification/style/index.d.ts

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

package/lib/notification/style/index.js

@@ -0,0 +1 @@
+require("./index.css");

package/lib/overlay/index.js

@@ -0,0 +1,8 @@
+require('../style/base.css');
+require('./style/index.css');
+//#region src/overlay/index.tsx
+var overlay_default = require("./overlay.js").default;
+//#endregion
+exports.default = overlay_default;
+
+//# sourceMappingURL=index.js.map

package/lib/overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Overlay"],"sources":["../../src/overlay/index.tsx"],"sourcesContent":["import Overlay from './overlay';\n\nexport default Overlay;\n"],"mappings":";AAEA,IAAA,0CAAeA"}

package/lib/overlay/overlay.d.ts

@@ -0,0 +1,10 @@
+import { OverlayProps } from "./types.js";
+
+//#region src/overlay/overlay.d.ts
+declare const Overlay: {
+  (props: OverlayProps): JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Overlay };
+//# sourceMappingURL=overlay.d.ts.map

package/lib/overlay/overlay.js

@@ -0,0 +1,64 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_index = require("../portal/index.js");
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_transition_group = require("react-transition-group");
+//#region src/overlay/overlay.tsx
+let scrollLockCount = 0;
+const Overlay = (props) => {
+	const { isShow = false, blurred = false, unmountOnExit = true, zIndex = 1e3, type = "default", clickCallback, onEnter, onEntered, onExit, onExited, children, style, prefixCls: customisedCls } = props;
+	const prefixCls = require_general.getPrefixCls("overlay", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, `${prefixCls}_${type}`, { [`${prefixCls}_blurred`]: blurred });
+	const nodeRef = (0, react.useRef)(null);
+	(0, react.useEffect)(() => {
+		if (isShow) {
+			scrollLockCount++;
+			document.body.style.overflow = "hidden";
+		}
+		return () => {
+			if (isShow) {
+				scrollLockCount--;
+				if (scrollLockCount <= 0) {
+					scrollLockCount = 0;
+					document.body.style.overflow = "";
+				}
+			}
+		};
+	}, [isShow]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
+		appear: true,
+		nodeRef,
+		onEnter,
+		onEntered,
+		onExit,
+		onExited,
+		in: isShow,
+		mountOnEnter: true,
+		unmountOnExit,
+		classNames: `${prefixCls}_fade`,
+		timeout: {
+			exit: 300,
+			enter: 0
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: nodeRef,
+			tabIndex: -1,
+			className: cls,
+			onClick: clickCallback,
+			style: {
+				zIndex,
+				...style
+			},
+			children
+		})
+	}) });
+};
+Overlay.displayName = "Overlay";
+//#endregion
+exports.default = Overlay;
+
+//# sourceMappingURL=overlay.js.map

package/lib/overlay/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.js","names":["getPrefixCls","ConfigContext","Portal","CSSTransition"],"sources":["../../src/overlay/overlay.tsx"],"sourcesContent":["import { useContext, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\nimport Portal from '../portal';\nimport { CSSTransition } from 'react-transition-group';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { OverlayProps } from './types';\n\nlet scrollLockCount = 0;\n\nconst Overlay = (props: OverlayProps): JSX.Element => {\n  const {\n    isShow = false,\n    blurred = false,\n    unmountOnExit = true,\n    zIndex = 1000,\n    type = 'default',\n    clickCallback,\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    children,\n    style,\n    prefixCls: customisedCls,\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('overlay', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, `${prefixCls}_${type}`, { [`${prefixCls}_blurred`]: blurred });\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (isShow) {\n      scrollLockCount++;\n      document.body.style.overflow = 'hidden';\n    }\n    return () => {\n      if (isShow) {\n        scrollLockCount--;\n        if (scrollLockCount <= 0) {\n          scrollLockCount = 0;\n          document.body.style.overflow = '';\n        }\n      }\n    };\n  }, [isShow]);\n\n  return (\n    <Portal>\n      <CSSTransition\n        appear={true}\n        nodeRef={nodeRef}\n        onEnter={onEnter}\n        onEntered={onEntered}\n        onExit={onExit}\n        onExited={onExited}\n        in={isShow}\n        mountOnEnter={true}\n        unmountOnExit={unmountOnExit}\n        classNames={`${prefixCls}_fade`}\n        timeout={{ exit: 300, enter: 0 }}>\n        <div ref={nodeRef} tabIndex={-1} className={cls} onClick={clickCallback} style={{ zIndex, ...style }}>\n          {children}\n        </div>\n      </CSSTransition>\n    </Portal>\n  );\n};\n\nOverlay.displayName = 'Overlay';\n\nexport default Overlay;\n"],"mappings":";;;;;;;;;;AAQA,IAAI,kBAAkB;AAEtB,MAAM,WAAW,UAAqC;CACpD,MAAM,EACJ,SAAS,OACT,UAAU,OACV,gBAAgB,MAChB,SAAS,KACT,OAAO,WACP,eACA,SACA,WACA,QACA,UACA,UACA,OACA,WAAW,kBACT;CAEJ,MAAM,YAAYA,gBAAAA,aAAa,YAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACS,WAAW,cAAc;CACjF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,GAAG,UAAU,YAAY,SAAS,CAAC;CAChG,MAAM,WAAA,GAAA,MAAA,QAAiC,KAAK;AAE5C,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,QAAQ;AACV;AACA,YAAS,KAAK,MAAM,WAAW;;AAEjC,eAAa;AACX,OAAI,QAAQ;AACV;AACA,QAAI,mBAAmB,GAAG;AACxB,uBAAkB;AAClB,cAAS,KAAK,MAAM,WAAW;;;;IAIpC,CAAC,OAAO,CAAC;AAEZ,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,eAAD;EACE,QAAQ;EACC;EACA;EACE;EACH;EACE;EACV,IAAI;EACJ,cAAc;EACC;EACf,YAAY,GAAG,UAAU;EACzB,SAAS;GAAE,MAAM;GAAK,OAAO;GAAG;YAChC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,KAAK;GAAS,UAAU;GAAI,WAAW;GAAK,SAAS;GAAe,OAAO;IAAE;IAAQ,GAAG;IAAO;GACjG;GACG,CAAA;EACQ,CAAA,EACT,CAAA;;AAIb,QAAQ,cAAc"}

package/lib/overlay/style/_index.scss

@@ -0,0 +1,51 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 300ms;
+  opacity: 0;
+
+  &_default {
+    background-color: var(--ty-color-overlay-bg);
+  }
+
+  &_blurred {
+    backdrop-filter: blur(3px);
+  }
+
+  &_inverted {
+    background-color: var(--ty-color-overlay-inverted);
+  }
+
+  &_none {
+  }
+
+  &_fade {
+    &-enter {
+      opacity: 0;
+    }
+
+    &-enter-done {
+      opacity: 1;
+    }
+
+    &-exit {
+      opacity: 1;
+    }
+
+    &-exit-active {
+      opacity: 0;
+    }
+
+    &-exit-done {
+      opacity: 0;
+      display: none;
+    }
+  }
+}