@_tc/template-core 0.0.1-bate.46 → 0.0.1-bate.48

package/fe/packages/react/ui/components/Date/TimePicker.js

@@ -0,0 +1,136 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Input } from "../Input/Input.js";
+import "../Input/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from "lucide-react";
+//#region packages/react/ui/components/Date/TimePicker.tsx
+function TimePicker({ value, onChange, className }) {
+	const hours = value?.getHours() ?? 0;
+	const minutes = value?.getMinutes() ?? 0;
+	const handleTimeChange = (newHours, newMinutes) => {
+		const newDate = value ? new Date(value) : /* @__PURE__ */ new Date();
+		newDate.setHours(newHours);
+		newDate.setMinutes(newMinutes);
+		newDate.setSeconds(0);
+		newDate.setMilliseconds(0);
+		onChange?.(newDate);
+	};
+	const incrementHours = () => {
+		handleTimeChange((hours + 1) % 24, minutes);
+	};
+	const decrementHours = () => {
+		handleTimeChange((hours - 1 + 24) % 24, minutes);
+	};
+	const incrementMinutes = () => {
+		handleTimeChange(hours, (minutes + 1) % 60);
+	};
+	const decrementMinutes = () => {
+		handleTimeChange(hours, (minutes - 1 + 60) % 60);
+	};
+	const handleHoursInput = (e) => {
+		const val = e.target.value.replace(/\D/g, "");
+		if (val === "") {
+			handleTimeChange(0, minutes);
+			return;
+		}
+		const num = parseInt(val, 10);
+		if (num >= 0 && num <= 23) handleTimeChange(num, minutes);
+	};
+	const handleMinutesInput = (e) => {
+		const val = e.target.value.replace(/\D/g, "");
+		if (val === "") {
+			handleTimeChange(hours, 0);
+			return;
+		}
+		const num = parseInt(val, 10);
+		if (num >= 0 && num <= 59) handleTimeChange(hours, num);
+	};
+	const handleHoursKeyDown = (e) => {
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			incrementHours();
+		} else if (e.key === "ArrowDown") {
+			e.preventDefault();
+			decrementHours();
+		}
+	};
+	const handleMinutesKeyDown = (e) => {
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			incrementMinutes();
+		} else if (e.key === "ArrowDown") {
+			e.preventDefault();
+			decrementMinutes();
+		}
+	};
+	const formatNumber = (num) => String(num).padStart(2, "0");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tc-ui-time-picker flex items-center justify-center gap-3 py-3", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: incrementHours,
+						className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground",
+						children: /* @__PURE__ */ jsx(ChevronUp, { size: 14 })
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						type: "text",
+						value: formatNumber(hours),
+						onChange: (_, e) => handleHoursInput(e),
+						onKeyDown: handleHoursKeyDown,
+						className: "w-12",
+						inputClassName: cn("w-12 h-9 px-0 py-0 text-center text-sm font-medium", "border border-border rounded", "bg-background text-foreground", "focus:outline-none focus:border-theme", "transition-colors"),
+						maxLength: 2
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: decrementHours,
+						className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground",
+						children: /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "text-lg font-medium text-foreground mb-1",
+				children: ":"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: incrementMinutes,
+						className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground",
+						children: /* @__PURE__ */ jsx(ChevronUp, { size: 14 })
+					}),
+					/* @__PURE__ */ jsx(Input, {
+						type: "text",
+						value: formatNumber(minutes),
+						onChange: (_, e) => handleMinutesInput(e),
+						onKeyDown: handleMinutesKeyDown,
+						className: "w-12",
+						inputClassName: cn("w-12 h-9 px-0 py-0 text-center text-sm font-medium", "border border-border rounded", "bg-background text-foreground", "focus:outline-none focus:border-theme", "transition-colors"),
+						maxLength: 2
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: decrementMinutes,
+						className: "p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground",
+						children: /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { TimePicker };

package/fe/packages/react/ui/components/Date/data.js

@@ -0,0 +1,7 @@
+//#region packages/react/ui/components/Date/data.ts
+var ModeType = {
+	Single: "single",
+	Range: "range"
+};
+//#endregion
+export { ModeType };

package/fe/packages/{ui/react → react/ui}/components/Date/dateLocaleStore.d.ts

@@ -1,4 +1,4 @@
-import { type DateLocaleConfig } from './locales';
+import { type DateLocaleConfig } from "./locales";
 type DateLocaleState = {
     locale: DateLocaleConfig;
     /**

package/fe/packages/react/ui/components/Date/dateLocaleStore.js

@@ -0,0 +1,14 @@
+import { defaultLocale } from "./locales.js";
+import { create } from "zustand";
+//#region packages/react/ui/components/Date/dateLocaleStore.ts
+var useDateLocaleStore = create((set) => ({
+	locale: defaultLocale,
+	setLocale: (patch) => set((state) => ({ locale: {
+		...state.locale,
+		...patch
+	} })),
+	replaceLocale: (nextLocale) => set(() => ({ locale: nextLocale })),
+	resetLocale: () => set(() => ({ locale: defaultLocale }))
+}));
+//#endregion
+export { useDateLocaleStore };

package/fe/packages/react/ui/components/Date/dropdownPositioning.d.ts

@@ -0,0 +1,3 @@
+import type { DropdownPositioningStrategy } from "../hooks/useDropdownPositioning";
+export declare const getDatePickerDropdownPosition: DropdownPositioningStrategy;
+//# sourceMappingURL=dropdownPositioning.d.ts.map

package/fe/packages/react/ui/components/Date/dropdownPositioning.js

@@ -0,0 +1,12 @@
+//#region packages/react/ui/components/Date/dropdownPositioning.ts
+var getDatePickerDropdownPosition = ({ anchorRect, contentRect, viewportHeight, offset }) => {
+	const contentHeight = contentRect?.height ?? 360;
+	const spaceBelow = viewportHeight - anchorRect.bottom;
+	const spaceAbove = anchorRect.top;
+	return {
+		top: spaceBelow < contentHeight && spaceAbove > spaceBelow ? anchorRect.top - contentHeight - offset : anchorRect.bottom + offset,
+		left: anchorRect.left
+	};
+};
+//#endregion
+export { getDatePickerDropdownPosition };

package/fe/packages/react/ui/components/Date/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./Date";
+export * from "./dateLocaleStore";
+export { useDateLocale } from "./LocaleContext";
+export * from "./LocaleProvider";
+export * from "./locales";
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/react/ui/components/Date/index.js

@@ -0,0 +1,6 @@
+import { defaultLocale, enUSLocale, zhCNLocale } from "./locales.js";
+import { useDateLocaleStore } from "./dateLocaleStore.js";
+import { useDateLocale } from "./LocaleContext.js";
+import { DatePicker } from "./Date.js";
+import { DateLocaleProvider } from "./LocaleProvider.js";
+export { DateLocaleProvider, DatePicker, defaultLocale, enUSLocale, useDateLocale, useDateLocaleStore, zhCNLocale };

package/fe/packages/react/ui/components/Date/locales.js

@@ -0,0 +1,25 @@
+import { defaultLanguageResources } from "../../../../common/i18n/default.js";
+import { defaultEnglishResources } from "../../../../common/i18n/en-US.js";
+//#region packages/react/ui/components/Date/locales.ts
+var dateDefaultLocale = defaultLanguageResources.components.date;
+var dateDefaultEnglishLocale = defaultEnglishResources.components.date;
+/**
+* 默认中文文案
+*/
+var zhCNLocale = {
+	...dateDefaultLocale,
+	weekDays: [...dateDefaultLocale.weekDays]
+};
+/**
+* 默认英文文案
+*/
+var enUSLocale = {
+	...dateDefaultEnglishLocale,
+	weekDays: [...dateDefaultEnglishLocale.weekDays]
+};
+/**
+* 默认使用中文文案
+*/
+var defaultLocale = zhCNLocale;
+//#endregion
+export { defaultLocale, enUSLocale, zhCNLocale };

package/fe/packages/{ui/react → react/ui}/components/Drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 export type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
 export type DrawerProps = {
     open?: boolean;

package/fe/packages/react/ui/components/Drawer/Drawer.js

@@ -0,0 +1,151 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Overlay } from "../Overlay/Overlay.js";
+import "../Overlay/index.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region packages/react/ui/components/Drawer/Drawer.tsx
+var DRAWER_ANIMATION_DURATION = 320;
+var DRAWER_ANIMATION_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+var getDrawerPositionClassName = (placement) => {
+	return {
+		top: "left-0 right-0 top-0",
+		right: "bottom-0 right-0 top-0",
+		bottom: "bottom-0 left-0 right-0",
+		left: "bottom-0 left-0 top-0"
+	}[placement];
+};
+var getDrawerRadiusClassName = (placement) => {
+	return {
+		top: "rounded-b-2xl",
+		right: "rounded-l-2xl",
+		bottom: "rounded-t-2xl",
+		left: "rounded-r-2xl"
+	}[placement];
+};
+var getDrawerTransform = (placement, open) => {
+	if (open) return "translate3d(0, 0, 0)";
+	return {
+		top: "translate3d(0, -100%, 0)",
+		right: "translate3d(100%, 0, 0)",
+		bottom: "translate3d(0, 100%, 0)",
+		left: "translate3d(-100%, 0, 0)"
+	}[placement];
+};
+var getDrawerSizeStyle = (placement, width, height) => {
+	const isHorizontal = placement === "left" || placement === "right";
+	const size = isHorizontal ? width : height;
+	const resolvedSize = typeof size === "number" ? `${size}px` : size;
+	return isHorizontal ? { width: resolvedSize } : { height: resolvedSize };
+};
+function Drawer({ open = false, onClose, title, children, footer, className, contentClassName, mask = true, maskClosable = true, lockScroll = true, closable = true, placement = "right", width = 420, height = 360, renderNode, keyboard = true, zIndex = 1e3 }) {
+	const t = useI18n();
+	const [mounted, setMounted] = useState(open);
+	const [visible, setVisible] = useState(false);
+	const animationFrameRef = useRef(void 0);
+	const secondAnimationFrameRef = useRef(void 0);
+	const closeTimerRef = useRef(void 0);
+	useEffect(() => {
+		if (animationFrameRef.current) {
+			cancelAnimationFrame(animationFrameRef.current);
+			animationFrameRef.current = void 0;
+		}
+		if (secondAnimationFrameRef.current) {
+			cancelAnimationFrame(secondAnimationFrameRef.current);
+			secondAnimationFrameRef.current = void 0;
+		}
+		if (closeTimerRef.current) {
+			clearTimeout(closeTimerRef.current);
+			closeTimerRef.current = void 0;
+		}
+		if (open) {
+			setMounted(true);
+			animationFrameRef.current = requestAnimationFrame(() => {
+				secondAnimationFrameRef.current = requestAnimationFrame(() => {
+					setVisible(true);
+					secondAnimationFrameRef.current = void 0;
+				});
+				animationFrameRef.current = void 0;
+			});
+			return () => {
+				if (animationFrameRef.current) {
+					cancelAnimationFrame(animationFrameRef.current);
+					animationFrameRef.current = void 0;
+				}
+				if (secondAnimationFrameRef.current) {
+					cancelAnimationFrame(secondAnimationFrameRef.current);
+					secondAnimationFrameRef.current = void 0;
+				}
+			};
+		}
+		setVisible(false);
+		closeTimerRef.current = setTimeout(() => {
+			setMounted(false);
+			closeTimerRef.current = void 0;
+		}, DRAWER_ANIMATION_DURATION);
+		return () => {
+			if (closeTimerRef.current) {
+				clearTimeout(closeTimerRef.current);
+				closeTimerRef.current = void 0;
+			}
+		};
+	}, [open]);
+	const handleContentClick = (e) => {
+		e.stopPropagation();
+	};
+	const drawerStyle = {
+		...getDrawerSizeStyle(placement, width, height),
+		transform: getDrawerTransform(placement, visible),
+		transition: `transform ${DRAWER_ANIMATION_DURATION}ms ${DRAWER_ANIMATION_EASING}`,
+		willChange: "transform"
+	};
+	return /* @__PURE__ */ jsx(Overlay, {
+		open: mounted,
+		visible,
+		onClose,
+		mask,
+		maskClosable,
+		lockScroll,
+		keyboard,
+		closable,
+		renderNode,
+		zIndex,
+		className: "tc-ui-drawer",
+		style: { transition: `opacity ${DRAWER_ANIMATION_DURATION}ms ${DRAWER_ANIMATION_EASING}` },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("fixed border border-border/70 bg-popover text-popover-foreground", "shadow-[0_22px_70px_hsl(var(--background)/0.58),inset_0_1px_0_hsl(var(--foreground)/0.06)]", "flex flex-col", getDrawerPositionClassName(placement), getDrawerRadiusClassName(placement), placement === "top" || placement === "bottom" ? "max-h-[90vh]" : "max-w-[90vw]", className),
+			style: drawerStyle,
+			onClick: handleContentClick,
+			children: [
+				(title || closable) && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between border-b border-border/60 px-4 py-3",
+					children: [title && /* @__PURE__ */ jsx("div", {
+						className: "text-sm font-semibold leading-5 text-foreground",
+						children: title
+					}), closable && /* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						type: "button",
+						onClick: onClose,
+						"aria-label": t("components.modal.close"),
+						className: cn("ml-auto h-7 w-7 rounded-md p-0", "text-muted-foreground hover:text-foreground", "hover:bg-foreground/8", "transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring/40 focus:ring-offset-0"),
+						children: /* @__PURE__ */ jsx(X, { size: 16 })
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("flex-1 overflow-auto px-4 py-4", contentClassName),
+					children
+				}),
+				footer && /* @__PURE__ */ jsx("div", {
+					className: "border-t border-border/60 px-4 py-3",
+					children: footer
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { Drawer };

package/fe/packages/react/ui/components/Drawer/index.d.ts

@@ -0,0 +1,3 @@
+export { Drawer } from "./Drawer";
+export type { DrawerPlacement, DrawerProps } from "./Drawer";
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/react/ui/components/Drawer/index.js

@@ -0,0 +1,2 @@
+import { Drawer } from "./Drawer.js";
+export { Drawer };

package/fe/packages/{ui/react → react/ui}/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,5 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
+import { type DropdownPlacement } from "../hooks/useDropdownPositioning";
 export interface DropdownBaseItem {
     key: string;
     label: ReactNode;
@@ -17,7 +18,7 @@ export interface DropdownProps {
     items: DropdownItem[];
     children: ReactNode;
     className?: string;
-    placement?: 'bottom-end' | 'bottom-start';
+    placement?: DropdownPlacement;
     /** 自定义弹出容器，不传则默认挂载到 document.body */
     getPopupContainer?: () => HTMLElement;
 }

package/fe/packages/react/ui/components/Dropdown/Dropdown.js

@@ -0,0 +1,105 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { getDefaultDropdownPosition } from "../hooks/useDropdownPositioning.js";
+import { Popup } from "../Popup/Popup.js";
+import "../Popup/index.js";
+import { Fragment, cloneElement, isValidElement, useCallback, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Dropdown/Dropdown.tsx
+var isDropdownRenderItem = (item) => "render" in item;
+var viewportPadding = 8;
+var getDropdownPosition = (context) => {
+	const position = getDefaultDropdownPosition(context);
+	const contentHeight = context.contentRect?.height ?? 0;
+	if (context.placement.startsWith("bottom") && position.top + contentHeight > context.viewportHeight - viewportPadding) return getDefaultDropdownPosition({
+		...context,
+		placement: context.placement.replace("bottom", "top")
+	});
+	if (context.placement.startsWith("top") && position.top < viewportPadding) return getDefaultDropdownPosition({
+		...context,
+		placement: context.placement.replace("top", "bottom")
+	});
+	return position;
+};
+function Dropdown({ items, children, className, placement = "bottom-end", getPopupContainer }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const triggerRef = useRef(null);
+	const handleToggle = useCallback(() => {
+		setIsOpen((prev) => !prev);
+	}, []);
+	const handleTriggerKeyDown = useCallback((event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			handleToggle();
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			setIsOpen(true);
+		}
+		if (event.key === "Escape") setIsOpen(false);
+	}, [handleToggle]);
+	const handleItemClick = useCallback((item) => {
+		if (!isDropdownRenderItem(item)) item.onClick?.();
+		setIsOpen(false);
+	}, []);
+	const triggerProps = {
+		role: "button",
+		tabIndex: 0,
+		"aria-haspopup": "menu",
+		"aria-expanded": isOpen,
+		className: "outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-0"
+	};
+	const trigger = isValidElement(children) ? cloneElement(children, {
+		...triggerProps,
+		onClick: (event) => {
+			children.props.onClick?.(event);
+			if (!event.defaultPrevented) handleToggle();
+		},
+		onKeyDown: (event) => {
+			children.props.onKeyDown?.(event);
+			if (!event.defaultPrevented) handleTriggerKeyDown(event);
+		},
+		className: cn(children.props.className, triggerProps.className)
+	}) : /* @__PURE__ */ jsx("span", {
+		...triggerProps,
+		onClick: handleToggle,
+		onKeyDown: handleTriggerKeyDown,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: triggerRef,
+		className: cn("tc-ui-dropdown relative inline-block", className),
+		children: trigger
+	}), /* @__PURE__ */ jsx(Popup, {
+		open: isOpen,
+		anchorRef: triggerRef,
+		placement,
+		onOpenChange: setIsOpen,
+		container: getPopupContainer?.(),
+		strategy: getDropdownPosition,
+		className: cn("min-w-24 overflow-hidden border-border/70 bg-popover p-1 shadow-[0_22px_70px_hsl(var(--background)/0.58),inset_0_1px_0_hsl(var(--foreground)/0.06)]"),
+		children: items.map((item, index) => {
+			const onClick = () => handleItemClick(item);
+			const close = () => setIsOpen(false);
+			const key = isDropdownRenderItem(item) ? index : item.key;
+			if (isDropdownRenderItem(item)) return /* @__PURE__ */ jsx(Fragment, { children: item.render(item, {
+				onClick,
+				close
+			}) }, key);
+			return /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "text",
+				state: item.danger ? "danger" : void 0,
+				onClick,
+				className: cn("flex h-9 w-full items-center justify-start gap-2 rounded-md px-3 text-left text-sm transition-colors", item.danger ? "text-destructive hover:bg-destructive/10" : "text-popover-foreground hover:bg-foreground/8"),
+				children: /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon && /* @__PURE__ */ jsx("span", {
+					className: "flex-shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4",
+					children: item.icon
+				}), /* @__PURE__ */ jsx("span", { children: item.label })] })
+			}, key);
+		})
+	})] });
+}
+//#endregion
+export { Dropdown };

package/fe/packages/react/ui/components/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Dropdown";
+//# sourceMappingURL=index.d.ts.map

package/fe/packages/react/ui/components/Dropdown/index.js

@@ -0,0 +1,2 @@
+import { Dropdown } from "./Dropdown.js";
+export { Dropdown };

package/fe/packages/{ui/react → react/ui}/components/Form/Form.d.ts

@@ -1,5 +1,5 @@
-import type { FormProps as RcFormProps } from 'rc-field-form';
-import type { ReactNode } from 'react';
+import type { FormProps as RcFormProps } from "rc-field-form";
+import type { ReactNode } from "react";
 export interface FormProps<T> extends Omit<RcFormProps<T>, 'component'> {
     /**
      * 表单类名

package/fe/packages/react/ui/components/Form/Form.js

@@ -0,0 +1,15 @@
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import RcForm from "rc-field-form";
+//#region packages/react/ui/components/Form/Form.tsx
+var Form = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(RcForm, {
+		...props,
+		component: "form",
+		className: cn("tc-ui-form", className),
+		children
+	});
+};
+Form.displayName = "Form";
+//#endregion
+export { Form };

package/fe/packages/{ui/react → react/ui}/components/Form/FormItem.d.ts

@@ -1,6 +1,6 @@
-import { Field } from 'rc-field-form';
-import type { ReactNode } from 'react';
-import { type LabelLayout } from '../Label';
+import { Field } from "rc-field-form";
+import type { ReactNode } from "react";
+import { type LabelLayout } from "../Label";
 type FieldProps = Parameters<typeof Field>[0];
 export interface FormItemProps<T = any> extends Omit<FieldProps, 'children'> {
     /**

package/fe/packages/react/ui/components/Form/FormItem.js

@@ -0,0 +1,60 @@
+import { cn } from "../../lib/utils.js";
+import { Label } from "../Label/Label.js";
+import "../Label/index.js";
+import React, { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "rc-field-form";
+//#region packages/react/ui/components/Form/FormItem.tsx
+var FormItemFN = forwardRef(({ className, label, labelClassName, required, children, errorClassName, showError = true, name, rules, layout, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Field, {
+		name,
+		rules,
+		...props,
+		children: (control, meta) => {
+			const { value, onChange, ...restControl } = control;
+			const { errors, warnings } = meta;
+			const hasError = errors.length > 0;
+			const hasWarning = warnings.length > 0;
+			const childNode = typeof children === "function" ? children(value, onChange, meta) : children;
+			const childWithProps = childNode && typeof childNode === "object" && "props" in childNode ? React.cloneElement(childNode, {
+				value,
+				onChange: (val) => {
+					if (typeof val === "string") onChange(val);
+					else if (val?.target?.value !== void 0) onChange(val.target.value);
+					else onChange(val);
+				},
+				...restControl
+			}) : childNode;
+			const content = /* @__PURE__ */ jsx("div", {
+				className: hasError || hasWarning ? "relative" : "",
+				children: childWithProps
+			});
+			return /* @__PURE__ */ jsxs("div", {
+				ref,
+				className: cn("tc-ui-form-item", className),
+				children: [
+					label ? /* @__PURE__ */ jsx(Label, {
+						htmlFor: name,
+						label,
+						layout,
+						required,
+						labelClassName: cn(labelClassName, hasError && "text-destructive"),
+						children: content
+					}) : content,
+					showError && hasError && /* @__PURE__ */ jsx("div", {
+						className: cn("text-sm text-destructive", errorClassName),
+						children: errors[0]
+					}),
+					hasWarning && /* @__PURE__ */ jsx("div", {
+						className: "text-sm text-yellow-600",
+						children: warnings[0]
+					})
+				]
+			});
+		}
+	});
+});
+FormItemFN.displayName = "FormItem";
+var FormItem = FormItemFN;
+//#endregion
+export { FormItem };

package/fe/packages/{ui/react → react/ui}/components/Form/SchemaForm/data.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { CheckboxProps } from '../../Checkbox';
-import { type DatePickerProps } from '../../Date';
-import { type InputProps } from '../../Input';
-import { InputNumberProps } from '../../InputNumber';
-import { type SelectProps } from '../../Select';
-import { type SwitchProps } from '../../Switch';
-import { type TextareaProps } from '../../Textarea';
+import React from "react";
+import { CheckboxProps } from "../../Checkbox";
+import { type DatePickerProps } from "../../Date";
+import { type InputProps } from "../../Input";
+import { InputNumberProps } from "../../InputNumber";
+import { type SelectProps } from "../../Select";
+import { type SwitchProps } from "../../Switch";
+import { type TextareaProps } from "../../Textarea";
 export type SchemaFormComponentPropsMap = {
     input: InputProps;
     inputNumber: InputNumberProps;

package/fe/packages/react/ui/components/Form/SchemaForm/data.js

@@ -0,0 +1,16 @@
+import defaultAlias_default from "../../../../../../bundler/defaultAlias.js";
+import frameComponentsMap from "../../../../../../frontend/extended/SchemaForm/data.js";
+import React from "react";
+var componentsMap = {
+	input: React.lazy(async () => ({ default: (await import("../../Input/index.js")).Input })),
+	inputNumber: React.lazy(async () => ({ default: (await import("../../InputNumber/index.js")).InputNumber })),
+	select: React.lazy(async () => ({ default: (await import("../../Select/index.js")).Select })),
+	textarea: React.lazy(async () => ({ default: (await import("../../Textarea/index.js")).Textarea })),
+	switch: React.lazy(async () => ({ default: (await import("../../Switch/index.js")).Switch })),
+	date: React.lazy(async () => ({ default: (await import("../../Date/index.js")).DatePicker })),
+	checkbox: React.lazy(async () => ({ default: (await import("../../Checkbox/index.js")).Checkbox })),
+	...frameComponentsMap,
+	...defaultAlias_default
+};
+//#endregion
+export { componentsMap };