@_tc/template-core 0.0.1-bate.6 → 0.0.1-bate.61

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.d.ts

@@ -0,0 +1,5 @@
+export declare const ModeType: {
+    readonly Single: "single";
+    readonly Range: "range";
+};
+export type ModeType = (typeof ModeType)[keyof typeof ModeType];

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/react/ui/components/Date/dateLocaleStore.d.ts

@@ -0,0 +1,9 @@
+import { type DateLocaleConfig } from "./locales";
+type DateLocaleState = {
+    locale: DateLocaleConfig;
+    setLocale: (patch: Partial<DateLocaleConfig>) => void;
+    replaceLocale: (nextLocale: DateLocaleConfig) => void;
+    resetLocale: () => void;
+};
+export declare const useDateLocaleStore: import("zustand").UseBoundStore<import("zustand").StoreApi<DateLocaleState>>;
+export {};

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,2 @@
+import type { DropdownPositioningStrategy } from "../hooks/useDropdownPositioning";
+export declare const getDatePickerDropdownPosition: DropdownPositioningStrategy;

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,5 @@
+export * from "./Date";
+export * from "./dateLocaleStore";
+export { useDateLocale } from "./LocaleContext";
+export * from "./LocaleProvider";
+export * from "./locales";

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.d.ts

@@ -0,0 +1,23 @@
+export interface DateLocaleConfig {
+    placeholder: string;
+    placeholderDateTime: string;
+    placeholderRange: string;
+    placeholderDateTimeRange: string;
+    weekDays: string[];
+    selectTime: string;
+    startTime: string;
+    endTime: string;
+    confirm: string;
+    monthFormat: string;
+    quickRanges: string;
+    quickRangeToday: string;
+    quickRangeYesterday: string;
+    quickRangeLast7Days: string;
+    quickRangeLast30Days: string;
+    quickRangeThisMonth: string;
+    quickRangeLastYear: string;
+    clear: string;
+}
+export declare const zhCNLocale: DateLocaleConfig;
+export declare const enUSLocale: DateLocaleConfig;
+export declare const defaultLocale: DateLocaleConfig;

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/react/ui/components/Drawer/Drawer.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+export type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type DrawerProps = {
+    open?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    mask?: boolean;
+    maskClosable?: boolean;
+    lockScroll?: boolean;
+    closable?: boolean;
+    placement?: DrawerPlacement;
+    width?: number | string;
+    height?: number | string;
+    zIndex?: number;
+    renderNode?: HTMLElement | (() => HTMLElement);
+    keyboard?: boolean;
+};
+export declare function Drawer({ open, onClose, title, children, footer, className, contentClassName, mask, maskClosable, lockScroll, closable, placement, width, height, renderNode, keyboard, zIndex, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

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,2 @@
+export { Drawer } from "./Drawer";
+export type { DrawerPlacement, DrawerProps } from "./Drawer";

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

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

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { type DropdownPlacement } from "../hooks/useDropdownPositioning";
+export interface DropdownBaseItem {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    danger?: boolean;
+    onClick?: () => void;
+}
+export interface DropdownRenderItem {
+    render: (item: DropdownRenderItem, context: {
+        onClick: () => void;
+        close: () => void;
+    }) => ReactNode;
+}
+export type DropdownItem = Omit<DropdownBaseItem, 'render'> | DropdownRenderItem;
+export interface DropdownProps {
+    items: DropdownItem[];
+    children: ReactNode;
+    className?: string;
+    placement?: DropdownPlacement;
+    getPopupContainer?: () => HTMLElement;
+}
+export declare function Dropdown({ items, children, className, placement, getPopupContainer }: DropdownProps): import("react/jsx-runtime").JSX.Element;

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 @@
+export * from "./Dropdown";

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

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

package/fe/packages/react/ui/components/Form/Form.d.ts

@@ -0,0 +1,11 @@
+import type { FormProps as RcFormProps } from "rc-field-form";
+import type { ReactNode } from "react";
+export interface FormProps<T> extends Omit<RcFormProps<T>, 'component'> {
+    className?: string;
+    children?: ReactNode;
+}
+declare const Form: {
+    <T extends object>({ className, children, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Form };

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/react/ui/components/Form/FormItem.d.ts

@@ -0,0 +1,19 @@
+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'> {
+    className?: string;
+    label?: ReactNode;
+    labelClassName?: string;
+    required?: boolean;
+    children?: ReactNode | ((value: T, onChange: (value: T) => void, meta: {
+        errors: string[];
+        warnings: string[];
+    }) => ReactNode);
+    errorClassName?: string;
+    showError?: boolean;
+    layout?: Required<LabelLayout>['layout'];
+}
+declare const FormItem: <T>(props: FormItemProps<T>) => ReactNode | Promise<ReactNode>;
+export { FormItem };