@jinmi/ui 0.0.0-stage → 6.0.1

package/es/base-ui/FocusScope/FocusScope.d.mts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, Ref } from "react";
+//#region src/base-ui/FocusScope/FocusScope.d.ts
+interface FocusScopeProps extends HTMLAttributes<HTMLDivElement> {
+  debugOutline?: boolean;
+  id?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+declare const useFocusScopeId: () => string | null;
+declare const FocusScope: {
+  ({ id, debugOutline, className, children, onKeyDown, ...rest }: FocusScopeProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { FocusScope, FocusScopeProps, useFocusScopeId };
+//# sourceMappingURL=FocusScope.d.mts.map

package/es/base-ui/FocusScope/FocusScope.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { registerScope, setActiveScope, useFocusScopeActive } from "./store.mjs";
+import { styles } from "./style.mjs";
+import { createContext, use, useEffect, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/FocusScope/FocusScope.tsx
+const FocusScopeIdContext = createContext(null);
+const useFocusScopeId = () => use(FocusScopeIdContext);
+const FocusScope = ({ id, debugOutline = false, className, children, onKeyDown, ...rest }) => {
+	const generatedId = useId();
+	const scopeId = id ?? generatedId;
+	const isActive = useFocusScopeActive(scopeId);
+	useEffect(() => registerScope(scopeId), [scopeId]);
+	return /* @__PURE__ */ jsx(FocusScopeIdContext, {
+		value: scopeId,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-focus-scope": scopeId,
+			"data-scope-active": isActive ? "" : void 0,
+			tabIndex: -1,
+			...rest,
+			className: cx(styles.root, debugOutline && styles.debugOutline, className),
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				if (event.key === "Escape") setActiveScope(null);
+			},
+			children
+		})
+	});
+};
+FocusScope.displayName = "FocusScope";
+//#endregion
+export { FocusScope, useFocusScopeId };
+
+//# sourceMappingURL=FocusScope.mjs.map

package/es/base-ui/FocusScope/FocusScope.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusScope.mjs","names":[],"sources":["../../../src/base-ui/FocusScope/FocusScope.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { createContext, type HTMLAttributes, type Ref, use, useEffect, useId } from 'react';\r\n\r\nimport { registerScope, setActiveScope, useFocusScopeActive } from './store';\r\nimport { styles } from './style';\r\n\r\nexport interface FocusScopeProps extends HTMLAttributes<HTMLDivElement> {\r\n  debugOutline?: boolean;\r\n  id?: string;\r\n  ref?: Ref<HTMLDivElement>;\r\n}\r\n\r\nconst FocusScopeIdContext = createContext<string | null>(null);\r\n\r\nexport const useFocusScopeId = () => use(FocusScopeIdContext);\r\n\r\nexport const FocusScope = ({\r\n  id,\r\n  debugOutline = false,\r\n  className,\r\n  children,\r\n  onKeyDown,\r\n  ...rest\r\n}: FocusScopeProps) => {\r\n  const generatedId = useId();\r\n  const scopeId = id ?? generatedId;\r\n  const isActive = useFocusScopeActive(scopeId);\r\n\r\n  useEffect(() => registerScope(scopeId), [scopeId]);\r\n\r\n  return (\r\n    <FocusScopeIdContext value={scopeId}>\r\n      <div\r\n        data-focus-scope={scopeId}\r\n        data-scope-active={isActive ? '' : undefined}\r\n        tabIndex={-1}\r\n        {...rest}\r\n        className={cx(styles.root, debugOutline && styles.debugOutline, className)}\r\n        onKeyDown={(event) => {\r\n          onKeyDown?.(event);\r\n          if (event.defaultPrevented) return;\r\n          if (event.key === 'Escape') setActiveScope(null);\r\n        }}\r\n      >\r\n        {children}\r\n      </div>\r\n    </FocusScopeIdContext>\r\n  );\r\n};\r\n\r\nFocusScope.displayName = 'FocusScope';\r\n"],"mappings":";;;;;;;AAcA,MAAM,sBAAsB,cAA6B,IAAI;AAE7D,MAAa,wBAAwB,IAAI,mBAAmB;AAE5D,MAAa,cAAc,EACzB,IACA,eAAe,OACf,WACA,UACA,WACA,GAAG,WACkB;CACrB,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,MAAM;CACtB,MAAM,WAAW,oBAAoB,OAAO;CAE5C,gBAAgB,cAAc,OAAO,GAAG,CAAC,OAAO,CAAC;CAEjD,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAAC,OAAD;GACE,oBAAkB;GAClB,qBAAmB,WAAW,KAAK,KAAA;GACnC,UAAU;GACV,GAAI;GACJ,WAAW,GAAG,OAAO,MAAM,gBAAgB,OAAO,cAAc,SAAS;GACzE,YAAY,UAAU;IACpB,YAAY,KAAK;IACjB,IAAI,MAAM,kBAAkB;IAC5B,IAAI,MAAM,QAAQ,UAAU,eAAe,IAAI;GACjD;GAEC;EACE,CAAA;CACc,CAAA;AAEzB;AAEA,WAAW,cAAc"}

package/es/base-ui/FocusScope/domUtils.mjs

@@ -0,0 +1,31 @@
+//#region src/base-ui/FocusScope/domUtils.ts
+const isItemVisible = (el) => {
+	if (typeof el.checkVisibility === "function") return el.checkVisibility({
+		checkOpacity: true,
+		checkVisibilityCSS: true
+	});
+	for (let node = el; node; node = node.parentElement) {
+		const style = getComputedStyle(node);
+		if (style.display === "none" || style.visibility === "hidden") return false;
+	}
+	return true;
+};
+const hasSize = (el) => {
+	const rect = el.getBoundingClientRect();
+	return rect.width > 0 && rect.height > 0;
+};
+const isTextInputTarget = (target) => {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable) return true;
+	return [
+		"INPUT",
+		"SELECT",
+		"TEXTAREA"
+	].includes(target.tagName);
+};
+const hasModifier = (event) => event.metaKey || event.ctrlKey || event.altKey;
+const scopeSelector = (id) => `[data-focus-scope="${id.replaceAll("\"", "\\\"")}"]`;
+//#endregion
+export { hasModifier, hasSize, isItemVisible, isTextInputTarget, scopeSelector };
+
+//# sourceMappingURL=domUtils.mjs.map

package/es/base-ui/FocusScope/domUtils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"domUtils.mjs","names":[],"sources":["../../../src/base-ui/FocusScope/domUtils.ts"],"sourcesContent":["export const isItemVisible = (el: HTMLElement): boolean => {\r\n  if (typeof el.checkVisibility === 'function') {\r\n    return el.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true });\r\n  }\r\n  for (let node: HTMLElement | null = el; node; node = node.parentElement) {\r\n    const style = getComputedStyle(node);\r\n    if (style.display === 'none' || style.visibility === 'hidden') return false;\r\n  }\r\n  return true;\r\n};\r\n\r\nexport const hasSize = (el: HTMLElement) => {\r\n  const rect = el.getBoundingClientRect();\r\n  return rect.width > 0 && rect.height > 0;\r\n};\r\n\r\nexport const isTextInputTarget = (target: EventTarget | null) => {\r\n  if (!(target instanceof HTMLElement)) return false;\r\n  if (target.isContentEditable) return true;\r\n  return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName);\r\n};\r\n\r\nexport const hasModifier = (event: KeyboardEvent) => event.metaKey || event.ctrlKey || event.altKey;\r\n\r\nexport const scopeSelector = (id: string) => `[data-focus-scope=\"${id.replaceAll('\"', '\\\\\"')}\"]`;\r\n"],"mappings":";AAAA,MAAa,iBAAiB,OAA6B;CACzD,IAAI,OAAO,GAAG,oBAAoB,YAChC,OAAO,GAAG,gBAAgB;EAAE,cAAc;EAAM,oBAAoB;CAAK,CAAC;CAE5E,KAAK,IAAI,OAA2B,IAAI,MAAM,OAAO,KAAK,eAAe;EACvE,MAAM,QAAQ,iBAAiB,IAAI;EACnC,IAAI,MAAM,YAAY,UAAU,MAAM,eAAe,UAAU,OAAO;CACxE;CACA,OAAO;AACT;AAEA,MAAa,WAAW,OAAoB;CAC1C,MAAM,OAAO,GAAG,sBAAsB;CACtC,OAAO,KAAK,QAAQ,KAAK,KAAK,SAAS;AACzC;AAEA,MAAa,qBAAqB,WAA+B;CAC/D,IAAI,EAAE,kBAAkB,cAAc,OAAO;CAC7C,IAAI,OAAO,mBAAmB,OAAO;CACrC,OAAO;EAAC;EAAS;EAAU;CAAU,CAAC,CAAC,SAAS,OAAO,OAAO;AAChE;AAEA,MAAa,eAAe,UAAyB,MAAM,WAAW,MAAM,WAAW,MAAM;AAE7F,MAAa,iBAAiB,OAAe,sBAAsB,GAAG,WAAW,MAAK,MAAK,EAAE"}

package/es/base-ui/FocusScope/index.d.mts

@@ -0,0 +1,6 @@
+import { FocusScope, FocusScopeProps, useFocusScopeId } from "./FocusScope.mjs";
+import { getActiveScopeId, getLastFocusedItem, registerScope, setActiveScope, setLastFocusedItem, useActiveScopeId, useFocusScopeActive } from "./store.mjs";
+import { styles } from "./style.mjs";
+import { UseScopeArrowNavOptions, focusScopeItem, notifyScopeItemFocus, useScopeArrowNav } from "./useScopeArrowNav.mjs";
+import { UseScopeSwitcherOptions, useScopeSwitcher } from "./useScopeSwitcher.mjs";
+export { FocusScope, type FocusScopeProps, type UseScopeArrowNavOptions, type UseScopeSwitcherOptions, focusScopeItem, styles as focusScopeStyles, getActiveScopeId, getLastFocusedItem, notifyScopeItemFocus, registerScope, setActiveScope, setLastFocusedItem, useActiveScopeId, useFocusScopeActive, useFocusScopeId, useScopeArrowNav, useScopeSwitcher };

package/es/base-ui/FocusScope/store.d.mts

@@ -0,0 +1,11 @@
+//#region src/base-ui/FocusScope/store.d.ts
+declare const getActiveScopeId: () => string | null;
+declare const setActiveScope: (id: string | null) => void;
+declare const getLastFocusedItem: (scopeId: string) => string | null;
+declare const setLastFocusedItem: (scopeId: string, itemId: string | null) => void;
+declare const registerScope: (id: string) => () => void;
+declare const useActiveScopeId: () => string | null;
+declare const useFocusScopeActive: (id: string) => boolean;
+//#endregion
+export { getActiveScopeId, getLastFocusedItem, registerScope, setActiveScope, setLastFocusedItem, useActiveScopeId, useFocusScopeActive };
+//# sourceMappingURL=store.d.mts.map

package/es/base-ui/FocusScope/store.mjs

@@ -0,0 +1,76 @@
+import { useSyncExternalStore } from "react";
+//#region src/base-ui/FocusScope/store.ts
+let state = {
+	activeScopeId: null,
+	knownScopes: /* @__PURE__ */ new Map(),
+	lastFocusedItem: /* @__PURE__ */ new Map()
+};
+const listeners = /* @__PURE__ */ new Set();
+const setState = (patch) => {
+	state = {
+		...state,
+		...patch
+	};
+	listeners.forEach((listener) => listener());
+};
+const subscribe = (listener) => {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+};
+const getActiveScopeId = () => state.activeScopeId;
+const setActiveScope = (id) => {
+	if (id !== null && !state.knownScopes.has(id)) return;
+	if (state.activeScopeId === id) return;
+	setState({ activeScopeId: id });
+};
+const getLastFocusedItem = (scopeId) => state.lastFocusedItem.get(scopeId) ?? null;
+const setLastFocusedItem = (scopeId, itemId) => {
+	if ((state.lastFocusedItem.get(scopeId) ?? null) === itemId) return;
+	const next = new Map(state.lastFocusedItem);
+	if (itemId === null) next.delete(scopeId);
+	else next.set(scopeId, itemId);
+	setState({ lastFocusedItem: next });
+};
+const findScopeId = (event) => {
+	return (event.target instanceof Element ? event.target : null)?.closest("[data-focus-scope]")?.dataset.focusScope ?? null;
+};
+const onGlobalInteract = (event) => {
+	const id = findScopeId(event);
+	if (id !== null) setActiveScope(id);
+};
+let listening = false;
+const ensureDocumentListeners = () => {
+	if (listening || typeof document === "undefined") return;
+	listening = true;
+	document.addEventListener("pointerdown", onGlobalInteract, true);
+	document.addEventListener("focusin", onGlobalInteract, true);
+};
+const registerScope = (id) => {
+	ensureDocumentListeners();
+	const next = new Map(state.knownScopes);
+	next.set(id, (next.get(id) ?? 0) + 1);
+	setState({ knownScopes: next });
+	return () => {
+		const count = state.knownScopes.get(id) ?? 0;
+		const scopes = new Map(state.knownScopes);
+		if (count > 1) {
+			scopes.set(id, count - 1);
+			setState({ knownScopes: scopes });
+			return;
+		}
+		scopes.delete(id);
+		const lastFocused = new Map(state.lastFocusedItem);
+		lastFocused.delete(id);
+		setState({
+			activeScopeId: state.activeScopeId === id ? null : state.activeScopeId,
+			knownScopes: scopes,
+			lastFocusedItem: lastFocused
+		});
+	};
+};
+const useActiveScopeId = () => useSyncExternalStore(subscribe, getActiveScopeId, () => null);
+const useFocusScopeActive = (id) => useSyncExternalStore(subscribe, () => state.activeScopeId === id, () => false);
+//#endregion
+export { getActiveScopeId, getLastFocusedItem, registerScope, setActiveScope, setLastFocusedItem, subscribe, useActiveScopeId, useFocusScopeActive };
+
+//# sourceMappingURL=store.mjs.map

package/es/base-ui/FocusScope/store.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.mjs","names":[],"sources":["../../../src/base-ui/FocusScope/store.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\r\n\r\ninterface FocusScopeState {\r\n  activeScopeId: string | null;\r\n  knownScopes: Map<string, number>;\r\n  lastFocusedItem: Map<string, string>;\r\n}\r\n\r\nlet state: FocusScopeState = {\r\n  activeScopeId: null,\r\n  knownScopes: new Map(),\r\n  lastFocusedItem: new Map(),\r\n};\r\n\r\nconst listeners = new Set<() => void>();\r\n\r\nconst setState = (patch: Partial<FocusScopeState>) => {\r\n  state = { ...state, ...patch };\r\n  listeners.forEach((listener) => listener());\r\n};\r\n\r\nexport const subscribe = (listener: () => void) => {\r\n  listeners.add(listener);\r\n  return () => listeners.delete(listener);\r\n};\r\n\r\nexport const getActiveScopeId = () => state.activeScopeId;\r\n\r\nexport const setActiveScope = (id: string | null) => {\r\n  if (id !== null && !state.knownScopes.has(id)) return;\r\n  if (state.activeScopeId === id) return;\r\n  setState({ activeScopeId: id });\r\n};\r\n\r\nexport const getLastFocusedItem = (scopeId: string) => state.lastFocusedItem.get(scopeId) ?? null;\r\n\r\nexport const setLastFocusedItem = (scopeId: string, itemId: string | null) => {\r\n  if ((state.lastFocusedItem.get(scopeId) ?? null) === itemId) return;\r\n  const next = new Map(state.lastFocusedItem);\r\n  if (itemId === null) next.delete(scopeId);\r\n  else next.set(scopeId, itemId);\r\n  setState({ lastFocusedItem: next });\r\n};\r\n\r\nconst findScopeId = (event: Event) => {\r\n  const target = event.target instanceof Element ? event.target : null;\r\n  return target?.closest<HTMLElement>('[data-focus-scope]')?.dataset.focusScope ?? null;\r\n};\r\n\r\nconst onGlobalInteract = (event: Event) => {\r\n  const id = findScopeId(event);\r\n  if (id !== null) setActiveScope(id);\r\n};\r\n\r\nlet listening = false;\r\n\r\nconst ensureDocumentListeners = () => {\r\n  if (listening || typeof document === 'undefined') return;\r\n  listening = true;\r\n  document.addEventListener('pointerdown', onGlobalInteract, true);\r\n  document.addEventListener('focusin', onGlobalInteract, true);\r\n};\r\n\r\nexport const registerScope = (id: string) => {\r\n  ensureDocumentListeners();\r\n  const next = new Map(state.knownScopes);\r\n  next.set(id, (next.get(id) ?? 0) + 1);\r\n  setState({ knownScopes: next });\r\n\r\n  return () => {\r\n    const count = state.knownScopes.get(id) ?? 0;\r\n    const scopes = new Map(state.knownScopes);\r\n    if (count > 1) {\r\n      scopes.set(id, count - 1);\r\n      setState({ knownScopes: scopes });\r\n      return;\r\n    }\r\n    scopes.delete(id);\r\n    const lastFocused = new Map(state.lastFocusedItem);\r\n    lastFocused.delete(id);\r\n    setState({\r\n      activeScopeId: state.activeScopeId === id ? null : state.activeScopeId,\r\n      knownScopes: scopes,\r\n      lastFocusedItem: lastFocused,\r\n    });\r\n  };\r\n};\r\n\r\nexport const useActiveScopeId = () => useSyncExternalStore(subscribe, getActiveScopeId, () => null);\r\n\r\nexport const useFocusScopeActive = (id: string) =>\r\n  useSyncExternalStore(\r\n    subscribe,\r\n    () => state.activeScopeId === id,\r\n    () => false,\r\n  );\r\n"],"mappings":";;AAQA,IAAI,QAAyB;CAC3B,eAAe;CACf,6BAAa,IAAI,IAAI;CACrB,iCAAiB,IAAI,IAAI;AAC3B;AAEA,MAAM,4BAAY,IAAI,IAAgB;AAEtC,MAAM,YAAY,UAAoC;CACpD,QAAQ;EAAE,GAAG;EAAO,GAAG;CAAM;CAC7B,UAAU,SAAS,aAAa,SAAS,CAAC;AAC5C;AAEA,MAAa,aAAa,aAAyB;CACjD,UAAU,IAAI,QAAQ;CACtB,aAAa,UAAU,OAAO,QAAQ;AACxC;AAEA,MAAa,yBAAyB,MAAM;AAE5C,MAAa,kBAAkB,OAAsB;CACnD,IAAI,OAAO,QAAQ,CAAC,MAAM,YAAY,IAAI,EAAE,GAAG;CAC/C,IAAI,MAAM,kBAAkB,IAAI;CAChC,SAAS,EAAE,eAAe,GAAG,CAAC;AAChC;AAEA,MAAa,sBAAsB,YAAoB,MAAM,gBAAgB,IAAI,OAAO,KAAK;AAE7F,MAAa,sBAAsB,SAAiB,WAA0B;CAC5E,KAAK,MAAM,gBAAgB,IAAI,OAAO,KAAK,UAAU,QAAQ;CAC7D,MAAM,OAAO,IAAI,IAAI,MAAM,eAAe;CAC1C,IAAI,WAAW,MAAM,KAAK,OAAO,OAAO;MACnC,KAAK,IAAI,SAAS,MAAM;CAC7B,SAAS,EAAE,iBAAiB,KAAK,CAAC;AACpC;AAEA,MAAM,eAAe,UAAiB;CAEpC,QADe,MAAM,kBAAkB,UAAU,MAAM,SAAS,KAAA,EACjD,QAAqB,oBAAoB,CAAC,EAAE,QAAQ,cAAc;AACnF;AAEA,MAAM,oBAAoB,UAAiB;CACzC,MAAM,KAAK,YAAY,KAAK;CAC5B,IAAI,OAAO,MAAM,eAAe,EAAE;AACpC;AAEA,IAAI,YAAY;AAEhB,MAAM,gCAAgC;CACpC,IAAI,aAAa,OAAO,aAAa,aAAa;CAClD,YAAY;CACZ,SAAS,iBAAiB,eAAe,kBAAkB,IAAI;CAC/D,SAAS,iBAAiB,WAAW,kBAAkB,IAAI;AAC7D;AAEA,MAAa,iBAAiB,OAAe;CAC3C,wBAAwB;CACxB,MAAM,OAAO,IAAI,IAAI,MAAM,WAAW;CACtC,KAAK,IAAI,KAAK,KAAK,IAAI,EAAE,KAAK,KAAK,CAAC;CACpC,SAAS,EAAE,aAAa,KAAK,CAAC;CAE9B,aAAa;EACX,MAAM,QAAQ,MAAM,YAAY,IAAI,EAAE,KAAK;EAC3C,MAAM,SAAS,IAAI,IAAI,MAAM,WAAW;EACxC,IAAI,QAAQ,GAAG;GACb,OAAO,IAAI,IAAI,QAAQ,CAAC;GACxB,SAAS,EAAE,aAAa,OAAO,CAAC;GAChC;EACF;EACA,OAAO,OAAO,EAAE;EAChB,MAAM,cAAc,IAAI,IAAI,MAAM,eAAe;EACjD,YAAY,OAAO,EAAE;EACrB,SAAS;GACP,eAAe,MAAM,kBAAkB,KAAK,OAAO,MAAM;GACzD,aAAa;GACb,iBAAiB;EACnB,CAAC;CACH;AACF;AAEA,MAAa,yBAAyB,qBAAqB,WAAW,wBAAwB,IAAI;AAElG,MAAa,uBAAuB,OAClC,qBACE,iBACM,MAAM,kBAAkB,UACxB,KACR"}

package/es/base-ui/FocusScope/style.d.mts

@@ -0,0 +1,8 @@
+//#region src/base-ui/FocusScope/style.d.ts
+declare const styles: {
+  debugOutline: string;
+  root: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

package/es/base-ui/FocusScope/style.mjs

@@ -0,0 +1,18 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/FocusScope/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	debugOutline: css`
+    &[data-scope-active] {
+      outline: 2px dashed color-mix(in srgb, ${cssVar.colorInfo} 60%, transparent);
+      outline-offset: -2px;
+    }
+  `,
+	root: css`
+    position: relative;
+    outline: none;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/FocusScope/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/FocusScope/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  debugOutline: css`\r\n    &[data-scope-active] {\r\n      outline: 2px dashed color-mix(in srgb, ${cssVar.colorInfo} 60%, transparent);\r\n      outline-offset: -2px;\r\n    }\r\n  `,\r\n  root: css`\r\n    position: relative;\r\n    outline: none;\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,cAAc,GAAG;;+CAE4B,OAAO,UAAU;;;;CAI9D,MAAM,GAAG;;;;AAIX,EAAE"}

package/es/base-ui/FocusScope/useScopeArrowNav.d.mts

@@ -0,0 +1,15 @@
+//#region src/base-ui/FocusScope/useScopeArrowNav.d.ts
+interface UseScopeArrowNavOptions {
+  enabled?: boolean;
+  extra?: Record<string, (event: KeyboardEvent) => void>;
+  itemSelector?: string;
+  onItemFocus?: (el: HTMLElement) => void;
+  scopeId: string;
+  vimKeys?: boolean;
+}
+declare const notifyScopeItemFocus: (scopeId: string, el: HTMLElement) => void;
+declare const focusScopeItem: (scopeId: string, el: HTMLElement) => void;
+declare const useScopeArrowNav: ({ scopeId, itemSelector, enabled, vimKeys, onItemFocus, extra }: UseScopeArrowNavOptions) => void;
+//#endregion
+export { UseScopeArrowNavOptions, focusScopeItem, notifyScopeItemFocus, useScopeArrowNav };
+//# sourceMappingURL=useScopeArrowNav.d.mts.map

package/es/base-ui/FocusScope/useScopeArrowNav.mjs

@@ -0,0 +1,111 @@
+import { getActiveScopeId, setLastFocusedItem } from "./store.mjs";
+import { hasModifier, isItemVisible, isTextInputTarget, scopeSelector } from "./domUtils.mjs";
+import { useEffect, useRef } from "react";
+//#region src/base-ui/FocusScope/useScopeArrowNav.ts
+let lastHandledEvent = null;
+const focusListeners = /* @__PURE__ */ new Map();
+const registerItemFocus = (scopeId, listener) => {
+	const set = focusListeners.get(scopeId) ?? /* @__PURE__ */ new Set();
+	set.add(listener);
+	focusListeners.set(scopeId, set);
+	return () => {
+		set.delete(listener);
+		if (set.size === 0) focusListeners.delete(scopeId);
+	};
+};
+const notifyScopeItemFocus = (scopeId, el) => {
+	const id = el.dataset.id;
+	if (id) setLastFocusedItem(scopeId, id);
+	focusListeners.get(scopeId)?.forEach((listener) => listener(el));
+};
+const getScopeRoot = (scopeId) => {
+	const selector = scopeSelector(scopeId);
+	const active = document.activeElement;
+	if (active instanceof HTMLElement) {
+		const owned = active.closest(selector);
+		if (owned) return owned;
+	}
+	const candidates = [...document.querySelectorAll(selector)];
+	return candidates.find(isItemVisible) ?? candidates[0] ?? null;
+};
+const focusScopeItem = (scopeId, el) => {
+	el.focus({ preventScroll: true });
+	el.scrollIntoView?.({ block: "nearest" });
+	notifyScopeItemFocus(scopeId, el);
+};
+const useScopeArrowNav = ({ scopeId, itemSelector = "[data-scope-item]", enabled = true, vimKeys = false, onItemFocus, extra }) => {
+	const optionsRef = useRef({
+		extra,
+		itemSelector,
+		onItemFocus,
+		scopeId
+	});
+	optionsRef.current = {
+		extra,
+		itemSelector,
+		onItemFocus,
+		scopeId
+	};
+	useEffect(() => {
+		if (!onItemFocus) return;
+		return registerItemFocus(scopeId, (el) => optionsRef.current.onItemFocus?.(el));
+	}, [scopeId, !!onItemFocus]);
+	useEffect(() => {
+		if (!enabled || typeof window === "undefined") return;
+		const getItems = () => {
+			const root = getScopeRoot(optionsRef.current.scopeId);
+			if (!root) return [];
+			return [...root.querySelectorAll(optionsRef.current.itemSelector)].filter(isItemVisible);
+		};
+		const currentIndex = (items) => {
+			const active = document.activeElement;
+			if (!(active instanceof HTMLElement)) return -1;
+			const item = active.closest(optionsRef.current.itemSelector);
+			return item ? items.indexOf(item) : -1;
+		};
+		const move = (direction) => {
+			const items = getItems();
+			if (items.length === 0) return;
+			const index = currentIndex(items);
+			const next = index === -1 ? direction === 1 ? 0 : items.length - 1 : (index + direction + items.length) % items.length;
+			focusScopeItem(optionsRef.current.scopeId, items[next]);
+		};
+		const edge = (which) => {
+			const items = getItems();
+			if (items.length === 0) return;
+			focusScopeItem(optionsRef.current.scopeId, items[which === "first" ? 0 : items.length - 1]);
+		};
+		const isReachable = () => {
+			const id = optionsRef.current.scopeId;
+			if (getActiveScopeId() === id) return true;
+			const active = document.activeElement;
+			return active instanceof HTMLElement && !!active.closest(scopeSelector(id));
+		};
+		const onKeyDown = (event) => {
+			if (event.defaultPrevented || lastHandledEvent === event) return;
+			if (hasModifier(event) || isTextInputTarget(event.target) || !isReachable()) return;
+			const builtin = {
+				ArrowDown: () => move(1),
+				ArrowUp: () => move(-1),
+				End: () => edge("last"),
+				Home: () => edge("first"),
+				...vimKeys && {
+					j: () => move(1),
+					k: () => move(-1)
+				}
+			};
+			const extraHandler = optionsRef.current.extra?.[event.key];
+			const handler = builtin[event.key] ?? (extraHandler && (() => extraHandler(event)));
+			if (!handler) return;
+			lastHandledEvent = event;
+			event.preventDefault();
+			handler();
+		};
+		window.addEventListener("keydown", onKeyDown, true);
+		return () => window.removeEventListener("keydown", onKeyDown, true);
+	}, [enabled, vimKeys]);
+};
+//#endregion
+export { focusScopeItem, getScopeRoot, notifyScopeItemFocus, useScopeArrowNav };
+
+//# sourceMappingURL=useScopeArrowNav.mjs.map

package/es/base-ui/FocusScope/useScopeArrowNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScopeArrowNav.mjs","names":[],"sources":["../../../src/base-ui/FocusScope/useScopeArrowNav.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\r\n\r\nimport { hasModifier, isItemVisible, isTextInputTarget, scopeSelector } from './domUtils';\r\nimport { getActiveScopeId, setLastFocusedItem } from './store';\r\n\r\nexport interface UseScopeArrowNavOptions {\r\n  enabled?: boolean;\r\n  extra?: Record<string, (event: KeyboardEvent) => void>;\r\n  itemSelector?: string;\r\n  onItemFocus?: (el: HTMLElement) => void;\r\n  scopeId: string;\r\n  vimKeys?: boolean;\r\n}\r\n\r\n// Sibling instances for one scope id (mobile + desktop mounts) all see the same\r\n// KeyboardEvent; the first one claims it so focus only moves once.\r\nlet lastHandledEvent: KeyboardEvent | null = null;\r\n\r\nconst focusListeners = new Map<string, Set<(el: HTMLElement) => void>>();\r\n\r\nconst registerItemFocus = (scopeId: string, listener: (el: HTMLElement) => void) => {\r\n  const set = focusListeners.get(scopeId) ?? new Set();\r\n  set.add(listener);\r\n  focusListeners.set(scopeId, set);\r\n  return () => {\r\n    set.delete(listener);\r\n    if (set.size === 0) focusListeners.delete(scopeId);\r\n  };\r\n};\r\n\r\nexport const notifyScopeItemFocus = (scopeId: string, el: HTMLElement) => {\r\n  const id = el.dataset.id;\r\n  if (id) setLastFocusedItem(scopeId, id);\r\n  focusListeners.get(scopeId)?.forEach((listener) => listener(el));\r\n};\r\n\r\nexport const getScopeRoot = (scopeId: string): HTMLElement | null => {\r\n  const selector = scopeSelector(scopeId);\r\n  const active = document.activeElement;\r\n  if (active instanceof HTMLElement) {\r\n    const owned = active.closest<HTMLElement>(selector);\r\n    if (owned) return owned;\r\n  }\r\n  const candidates = [...document.querySelectorAll<HTMLElement>(selector)];\r\n  return candidates.find(isItemVisible) ?? candidates[0] ?? null;\r\n};\r\n\r\nexport const focusScopeItem = (scopeId: string, el: HTMLElement) => {\r\n  el.focus({ preventScroll: true });\r\n  el.scrollIntoView?.({ block: 'nearest' });\r\n  notifyScopeItemFocus(scopeId, el);\r\n};\r\n\r\nexport const useScopeArrowNav = ({\r\n  scopeId,\r\n  itemSelector = '[data-scope-item]',\r\n  enabled = true,\r\n  vimKeys = false,\r\n  onItemFocus,\r\n  extra,\r\n}: UseScopeArrowNavOptions) => {\r\n  const optionsRef = useRef({ extra, itemSelector, onItemFocus, scopeId });\r\n  optionsRef.current = { extra, itemSelector, onItemFocus, scopeId };\r\n\r\n  useEffect(() => {\r\n    if (!onItemFocus) return;\r\n    return registerItemFocus(scopeId, (el) => optionsRef.current.onItemFocus?.(el));\r\n  }, [scopeId, !!onItemFocus]);\r\n\r\n  useEffect(() => {\r\n    if (!enabled || typeof window === 'undefined') return;\r\n\r\n    const getItems = () => {\r\n      const root = getScopeRoot(optionsRef.current.scopeId);\r\n      if (!root) return [];\r\n      return [...root.querySelectorAll<HTMLElement>(optionsRef.current.itemSelector)].filter(\r\n        isItemVisible,\r\n      );\r\n    };\r\n\r\n    const currentIndex = (items: HTMLElement[]) => {\r\n      const active = document.activeElement;\r\n      if (!(active instanceof HTMLElement)) return -1;\r\n      const item = active.closest<HTMLElement>(optionsRef.current.itemSelector);\r\n      return item ? items.indexOf(item) : -1;\r\n    };\r\n\r\n    const move = (direction: 1 | -1) => {\r\n      const items = getItems();\r\n      if (items.length === 0) return;\r\n      const index = currentIndex(items);\r\n      const next =\r\n        index === -1\r\n          ? direction === 1\r\n            ? 0\r\n            : items.length - 1\r\n          : (index + direction + items.length) % items.length;\r\n      focusScopeItem(optionsRef.current.scopeId, items[next]);\r\n    };\r\n\r\n    const edge = (which: 'first' | 'last') => {\r\n      const items = getItems();\r\n      if (items.length === 0) return;\r\n      focusScopeItem(optionsRef.current.scopeId, items[which === 'first' ? 0 : items.length - 1]);\r\n    };\r\n\r\n    const isReachable = () => {\r\n      const id = optionsRef.current.scopeId;\r\n      if (getActiveScopeId() === id) return true;\r\n      const active = document.activeElement;\r\n      return active instanceof HTMLElement && !!active.closest(scopeSelector(id));\r\n    };\r\n\r\n    const onKeyDown = (event: KeyboardEvent) => {\r\n      if (event.defaultPrevented || lastHandledEvent === event) return;\r\n      if (hasModifier(event) || isTextInputTarget(event.target) || !isReachable()) return;\r\n\r\n      const builtin: Record<string, () => void> = {\r\n        ArrowDown: () => move(1),\r\n        ArrowUp: () => move(-1),\r\n        End: () => edge('last'),\r\n        Home: () => edge('first'),\r\n        ...(vimKeys && { j: () => move(1), k: () => move(-1) }),\r\n      };\r\n      const extraHandler = optionsRef.current.extra?.[event.key];\r\n      const handler = builtin[event.key] ?? (extraHandler && (() => extraHandler(event)));\r\n      if (!handler) return;\r\n\r\n      lastHandledEvent = event;\r\n      event.preventDefault();\r\n      handler();\r\n    };\r\n\r\n    window.addEventListener('keydown', onKeyDown, true);\r\n    return () => window.removeEventListener('keydown', onKeyDown, true);\r\n  }, [enabled, vimKeys]);\r\n};\r\n"],"mappings":"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"}

package/es/base-ui/FocusScope/useScopeSwitcher.d.mts

@@ -0,0 +1,9 @@
+//#region src/base-ui/FocusScope/useScopeSwitcher.d.ts
+interface UseScopeSwitcherOptions {
+  enabled?: boolean;
+  vimKeys?: boolean;
+}
+declare const useScopeSwitcher: ({ enabled, vimKeys }?: UseScopeSwitcherOptions) => void;
+//#endregion
+export { UseScopeSwitcherOptions, useScopeSwitcher };
+//# sourceMappingURL=useScopeSwitcher.d.mts.map

package/es/base-ui/FocusScope/useScopeSwitcher.mjs

@@ -0,0 +1,47 @@
+import { getActiveScopeId, getLastFocusedItem, setActiveScope } from "./store.mjs";
+import { hasModifier, hasSize, isItemVisible, isTextInputTarget } from "./domUtils.mjs";
+import { focusScopeItem } from "./useScopeArrowNav.mjs";
+import { useEffect } from "react";
+//#region src/base-ui/FocusScope/useScopeSwitcher.ts
+const getOrderedScopes = () => {
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const el of document.querySelectorAll("[data-focus-scope]")) {
+		const id = el.dataset.focusScope;
+		if (!id || seen.has(id) || !isItemVisible(el) || !hasSize(el)) continue;
+		seen.add(id);
+		out.push(el);
+	}
+	return out;
+};
+const focusInto = (scope) => {
+	const id = scope.dataset.focusScope;
+	setActiveScope(id);
+	const lastId = getLastFocusedItem(id);
+	const target = lastId && [...scope.querySelectorAll("[data-scope-item]")].find((el) => el.dataset.id === lastId && isItemVisible(el)) || [...scope.querySelectorAll("[data-scope-item]")].find(isItemVisible) || scope;
+	focusScopeItem(id, target);
+};
+const useScopeSwitcher = ({ enabled = true, vimKeys = false } = {}) => {
+	useEffect(() => {
+		if (!enabled || typeof window === "undefined") return;
+		const onKeyDown = (event) => {
+			if (event.defaultPrevented || hasModifier(event) || isTextInputTarget(event.target)) return;
+			const direction = event.key === "ArrowRight" || vimKeys && event.key === "l" ? 1 : event.key === "ArrowLeft" || vimKeys && event.key === "h" ? -1 : 0;
+			if (!direction) return;
+			const scopes = getOrderedScopes();
+			if (scopes.length === 0) return;
+			const activeId = getActiveScopeId();
+			const index = scopes.findIndex((el) => el.dataset.focusScope === activeId);
+			const next = index === -1 ? direction === 1 ? scopes[0] : scopes.at(-1) : scopes[index + direction];
+			if (!next) return;
+			event.preventDefault();
+			focusInto(next);
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [enabled, vimKeys]);
+};
+//#endregion
+export { useScopeSwitcher };
+
+//# sourceMappingURL=useScopeSwitcher.mjs.map

package/es/base-ui/FocusScope/useScopeSwitcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScopeSwitcher.mjs","names":[],"sources":["../../../src/base-ui/FocusScope/useScopeSwitcher.ts"],"sourcesContent":["import { useEffect } from 'react';\r\n\r\nimport { hasModifier, hasSize, isItemVisible, isTextInputTarget } from './domUtils';\r\nimport { getActiveScopeId, getLastFocusedItem, setActiveScope } from './store';\r\nimport { focusScopeItem } from './useScopeArrowNav';\r\n\r\nexport interface UseScopeSwitcherOptions {\r\n  enabled?: boolean;\r\n  vimKeys?: boolean;\r\n}\r\n\r\nconst getOrderedScopes = () => {\r\n  const seen = new Set<string>();\r\n  const out: HTMLElement[] = [];\r\n  for (const el of document.querySelectorAll<HTMLElement>('[data-focus-scope]')) {\r\n    const id = el.dataset.focusScope;\r\n    if (!id || seen.has(id) || !isItemVisible(el) || !hasSize(el)) continue;\r\n    seen.add(id);\r\n    out.push(el);\r\n  }\r\n  return out;\r\n};\r\n\r\nconst focusInto = (scope: HTMLElement) => {\r\n  const id = scope.dataset.focusScope!;\r\n  setActiveScope(id);\r\n  const lastId = getLastFocusedItem(id);\r\n  const last =\r\n    lastId &&\r\n    [...scope.querySelectorAll<HTMLElement>('[data-scope-item]')].find(\r\n      (el) => el.dataset.id === lastId && isItemVisible(el),\r\n    );\r\n  const target =\r\n    last ||\r\n    [...scope.querySelectorAll<HTMLElement>('[data-scope-item]')].find(isItemVisible) ||\r\n    scope;\r\n  focusScopeItem(id, target);\r\n};\r\n\r\nexport const useScopeSwitcher = ({ enabled = true, vimKeys = false }: UseScopeSwitcherOptions = {}) => {\r\n  useEffect(() => {\r\n    if (!enabled || typeof window === 'undefined') return;\r\n\r\n    const onKeyDown = (event: KeyboardEvent) => {\r\n      if (event.defaultPrevented || hasModifier(event) || isTextInputTarget(event.target)) return;\r\n      const direction =\r\n        event.key === 'ArrowRight' || (vimKeys && event.key === 'l')\r\n          ? 1\r\n          : event.key === 'ArrowLeft' || (vimKeys && event.key === 'h')\r\n            ? -1\r\n            : 0;\r\n      if (!direction) return;\r\n\r\n      const scopes = getOrderedScopes();\r\n      if (scopes.length === 0) return;\r\n      const activeId = getActiveScopeId();\r\n      const index = scopes.findIndex((el) => el.dataset.focusScope === activeId);\r\n      const next = index === -1 ? (direction === 1 ? scopes[0] : scopes.at(-1)!) : scopes[index + direction];\r\n      if (!next) return;\r\n      event.preventDefault();\r\n      focusInto(next);\r\n    };\r\n\r\n    window.addEventListener('keydown', onKeyDown);\r\n    return () => window.removeEventListener('keydown', onKeyDown);\r\n  }, [enabled, vimKeys]);\r\n};\r\n"],"mappings":";;;;;AAWA,MAAM,yBAAyB;CAC7B,MAAM,uBAAO,IAAI,IAAY;CAC7B,MAAM,MAAqB,CAAC;CAC5B,KAAK,MAAM,MAAM,SAAS,iBAA8B,oBAAoB,GAAG;EAC7E,MAAM,KAAK,GAAG,QAAQ;EACtB,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,QAAQ,EAAE,GAAG;EAC/D,KAAK,IAAI,EAAE;EACX,IAAI,KAAK,EAAE;CACb;CACA,OAAO;AACT;AAEA,MAAM,aAAa,UAAuB;CACxC,MAAM,KAAK,MAAM,QAAQ;CACzB,eAAe,EAAE;CACjB,MAAM,SAAS,mBAAmB,EAAE;CAMpC,MAAM,SAJJ,UACA,CAAC,GAAG,MAAM,iBAA8B,mBAAmB,CAAC,CAAC,CAAC,MAC3D,OAAO,GAAG,QAAQ,OAAO,UAAU,cAAc,EAAE,CACtD,KAGA,CAAC,GAAG,MAAM,iBAA8B,mBAAmB,CAAC,CAAC,CAAC,KAAK,aAAa,KAChF;CACF,eAAe,IAAI,MAAM;AAC3B;AAEA,MAAa,oBAAoB,EAAE,UAAU,MAAM,UAAU,UAAmC,CAAC,MAAM;CACrG,gBAAgB;EACd,IAAI,CAAC,WAAW,OAAO,WAAW,aAAa;EAE/C,MAAM,aAAa,UAAyB;GAC1C,IAAI,MAAM,oBAAoB,YAAY,KAAK,KAAK,kBAAkB,MAAM,MAAM,GAAG;GACrF,MAAM,YACJ,MAAM,QAAQ,gBAAiB,WAAW,MAAM,QAAQ,MACpD,IACA,MAAM,QAAQ,eAAgB,WAAW,MAAM,QAAQ,MACrD,KACA;GACR,IAAI,CAAC,WAAW;GAEhB,MAAM,SAAS,iBAAiB;GAChC,IAAI,OAAO,WAAW,GAAG;GACzB,MAAM,WAAW,iBAAiB;GAClC,MAAM,QAAQ,OAAO,WAAW,OAAO,GAAG,QAAQ,eAAe,QAAQ;GACzE,MAAM,OAAO,UAAU,KAAM,cAAc,IAAI,OAAO,KAAK,OAAO,GAAG,EAAE,IAAM,OAAO,QAAQ;GAC5F,IAAI,CAAC,MAAM;GACX,MAAM,eAAe;GACrB,UAAU,IAAI;EAChB;EAEA,OAAO,iBAAiB,WAAW,SAAS;EAC5C,aAAa,OAAO,oBAAoB,WAAW,SAAS;CAC9D,GAAG,CAAC,SAAS,OAAO,CAAC;AACvB"}

package/es/base-ui/Form/Form.mjs

@@ -0,0 +1,155 @@
+"use client";
+import { rootVariants } from "./style.mjs";
+import { FormContext } from "./context.mjs";
+import FormField from "./components/FormField.mjs";
+import FormFlatGroup from "./components/FormFlatGroup.mjs";
+import FormGroup from "./components/FormGroup.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useResponsive } from "antd-style";
+import { isUndefined } from "es-toolkit/compat";
+import { Form } from "@base-ui/react/form";
+//#region src/base-ui/Form/Form.tsx
+const serializeForm = (form) => {
+	if (!form) return "";
+	const entries = [...new FormData(form).entries()].filter(([, value]) => typeof value === "string");
+	return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));
+};
+const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, itemsType = "group", variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, onFormSubmit, layout, ref, ...rest }) => {
+	const { mobile } = useResponsive();
+	const formRef = useRef(null);
+	const [submitLoading, setSubmitLoading] = useState(false);
+	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+	const snapshotRef = useRef("");
+	const syncUnsaved = useCallback(() => {
+		setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);
+	}, []);
+	useEffect(() => {
+		const form = formRef.current;
+		if (!form) return;
+		snapshotRef.current = serializeForm(form);
+		let resetTimer;
+		const handleMutation = () => syncUnsaved();
+		const handleReset = () => {
+			resetTimer = setTimeout(() => {
+				snapshotRef.current = serializeForm(formRef.current);
+				syncUnsaved();
+			}, 0);
+		};
+		form.addEventListener("input", handleMutation);
+		form.addEventListener("change", handleMutation);
+		form.addEventListener("reset", handleReset);
+		return () => {
+			clearTimeout(resetTimer);
+			form.removeEventListener("input", handleMutation);
+			form.removeEventListener("change", handleMutation);
+			form.removeEventListener("reset", handleReset);
+		};
+	}, [syncUnsaved]);
+	const requestReset = useCallback(() => {
+		formRef.current?.reset();
+	}, []);
+	const mergedRef = useCallback((node) => {
+		formRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const context = useMemo(() => ({
+		hasUnsavedChanges,
+		initialValues,
+		itemMinWidth,
+		layout: layout || (mobile ? "vertical" : "horizontal"),
+		requestReset,
+		submitLoading,
+		variant
+	}), [
+		hasUnsavedChanges,
+		initialValues,
+		itemMinWidth,
+		layout,
+		mobile,
+		requestReset,
+		submitLoading,
+		variant
+	]);
+	const mapFlat = useCallback((item, itemIndex) => /* @__PURE__ */ jsx(FormField, {
+		className: classNames?.item,
+		divider: itemIndex !== 0,
+		style: customStyles?.item,
+		variant,
+		...item
+	}, itemIndex), [
+		variant,
+		classNames,
+		customStyles
+	]);
+	const mapTree = useCallback((group, groupIndex) => {
+		const key = group?.key || groupIndex;
+		return /* @__PURE__ */ jsx(FormGroup, {
+			active: activeKey && group?.key ? activeKey.includes(key) : void 0,
+			className: classNames?.group,
+			collapsible: isUndefined(group.collapsible) ? collapsible : group.collapsible,
+			desc: group?.desc,
+			extra: group?.extra,
+			icon: group?.icon,
+			style: customStyles?.group,
+			title: group.title,
+			variant: group?.variant || variant,
+			defaultActive: defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive,
+			onCollapse: (active) => {
+				let keys = activeKey || defaultActiveKey || [];
+				keys = keys.filter((k) => k !== key);
+				onCollapse?.(active ? [...keys, key] : keys);
+			},
+			children: Array.isArray(group.children) ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i)) : group.children
+		}, key);
+	}, [
+		activeKey,
+		collapsible,
+		defaultActiveKey,
+		onCollapse,
+		variant,
+		classNames,
+		customStyles,
+		mapFlat
+	]);
+	return /* @__PURE__ */ jsx(FormContext, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(Form, {
+			className: cx(rootVariants({ variant }), className),
+			ref: mergedRef,
+			style: {
+				gap,
+				...style
+			},
+			onFormSubmit: async (values, eventDetails) => {
+				onFormSubmit?.(values, eventDetails);
+				if (!onFinish) return;
+				setSubmitLoading(true);
+				try {
+					await onFinish(values, eventDetails);
+					snapshotRef.current = serializeForm(formRef.current);
+					syncUnsaved();
+				} finally {
+					setSubmitLoading(false);
+				}
+			},
+			...rest,
+			children: [
+				items && items.length > 0 ? itemsType === "group" ? items.map((item, i) => mapTree(item, i)) : /* @__PURE__ */ jsx(FormFlatGroup, {
+					className: classNames?.group,
+					style: customStyles?.group,
+					variant,
+					children: items.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))
+				}) : void 0,
+				children,
+				footer
+			]
+		})
+	});
+});
+Form$1.displayName = "Form";
+//#endregion
+export { Form$1 as default };
+
+//# sourceMappingURL=Form.mjs.map

package/es/base-ui/Form/Form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../../src/base-ui/Form/Form.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Form as BaseForm } from '@base-ui/react/form';\r\nimport { cx, useResponsive } from 'antd-style';\r\nimport { isUndefined } from 'es-toolkit/compat';\r\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport FormField from './components/FormField';\r\nimport FormFlatGroup from './components/FormFlatGroup';\r\nimport FormGroup from './components/FormGroup';\r\nimport { FormContext } from './context';\r\nimport { rootVariants } from './style';\r\nimport type { FormFieldProps, FormGroupItemType, FormProps } from './type';\r\n\r\nconst serializeForm = (form: HTMLFormElement | null) => {\r\n  if (!form) return '';\r\n  const entries = [...new FormData(form).entries()].filter(\r\n    ([, value]) => typeof value === 'string',\r\n  ) as [string, string][];\r\n  return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));\r\n};\r\n\r\nconst Form = memo<FormProps>(\r\n  ({\r\n    className,\r\n    itemMinWidth,\r\n    footer,\r\n    items = [],\r\n    children,\r\n    itemsType = 'group',\r\n    variant = 'borderless',\r\n    classNames,\r\n    styles: customStyles,\r\n    gap,\r\n    style,\r\n    collapsible,\r\n    defaultActiveKey,\r\n    initialValues,\r\n    activeKey,\r\n    onCollapse,\r\n    onFinish,\r\n    onFormSubmit,\r\n    layout,\r\n    ref,\r\n    ...rest\r\n  }) => {\r\n    const { mobile } = useResponsive();\r\n    const formRef = useRef<HTMLFormElement>(null);\r\n    const [submitLoading, setSubmitLoading] = useState(false);\r\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\r\n    const snapshotRef = useRef('');\r\n\r\n    const syncUnsaved = useCallback(() => {\r\n      setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);\r\n    }, []);\r\n\r\n    useEffect(() => {\r\n      const form = formRef.current;\r\n      if (!form) return;\r\n      snapshotRef.current = serializeForm(form);\r\n      let resetTimer: ReturnType<typeof setTimeout>;\r\n      const handleMutation = () => syncUnsaved();\r\n      const handleReset = () => {\r\n        resetTimer = setTimeout(() => {\r\n          snapshotRef.current = serializeForm(formRef.current);\r\n          syncUnsaved();\r\n        }, 0);\r\n      };\r\n      form.addEventListener('input', handleMutation);\r\n      form.addEventListener('change', handleMutation);\r\n      form.addEventListener('reset', handleReset);\r\n      return () => {\r\n        clearTimeout(resetTimer);\r\n        form.removeEventListener('input', handleMutation);\r\n        form.removeEventListener('change', handleMutation);\r\n        form.removeEventListener('reset', handleReset);\r\n      };\r\n    }, [syncUnsaved]);\r\n\r\n    const requestReset = useCallback(() => {\r\n      formRef.current?.reset();\r\n    }, []);\r\n\r\n    const mergedRef = useCallback(\r\n      (node: HTMLFormElement | null) => {\r\n        formRef.current = node;\r\n        if (typeof ref === 'function') ref(node);\r\n        else if (ref) ref.current = node;\r\n      },\r\n      [ref],\r\n    );\r\n\r\n    const context = useMemo(\r\n      () => ({\r\n        hasUnsavedChanges,\r\n        initialValues,\r\n        itemMinWidth,\r\n        layout: layout || (mobile ? ('vertical' as const) : ('horizontal' as const)),\r\n        requestReset,\r\n        submitLoading,\r\n        variant,\r\n      }),\r\n      [\r\n        hasUnsavedChanges,\r\n        initialValues,\r\n        itemMinWidth,\r\n        layout,\r\n        mobile,\r\n        requestReset,\r\n        submitLoading,\r\n        variant,\r\n      ],\r\n    );\r\n\r\n    const mapFlat = useCallback(\r\n      (item: FormFieldProps, itemIndex: number) => (\r\n        <FormField\r\n          className={classNames?.item}\r\n          divider={itemIndex !== 0}\r\n          key={itemIndex}\r\n          style={customStyles?.item}\r\n          variant={variant}\r\n          {...item}\r\n        />\r\n      ),\r\n      [variant, classNames, customStyles],\r\n    );\r\n\r\n    const mapTree = useCallback(\r\n      (group: FormGroupItemType, groupIndex: number) => {\r\n        const key = group?.key || groupIndex;\r\n        return (\r\n          <FormGroup\r\n            active={activeKey && group?.key ? activeKey.includes(key) : undefined}\r\n            className={classNames?.group}\r\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\r\n            desc={group?.desc}\r\n            extra={group?.extra}\r\n            icon={group?.icon}\r\n            key={key}\r\n            style={customStyles?.group}\r\n            title={group.title}\r\n            variant={group?.variant || variant}\r\n            defaultActive={\r\n              defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive\r\n            }\r\n            onCollapse={(active) => {\r\n              let keys: (string | number)[] = activeKey || defaultActiveKey || [];\r\n              keys = keys.filter((k) => k !== key);\r\n              onCollapse?.(active ? [...keys, key] : keys);\r\n            }}\r\n          >\r\n            {Array.isArray(group.children)\r\n              ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))\r\n              : group.children}\r\n          </FormGroup>\r\n        );\r\n      },\r\n      [\r\n        activeKey,\r\n        collapsible,\r\n        defaultActiveKey,\r\n        onCollapse,\r\n        variant,\r\n        classNames,\r\n        customStyles,\r\n        mapFlat,\r\n      ],\r\n    );\r\n\r\n    return (\r\n      <FormContext value={context}>\r\n        <BaseForm\r\n          className={cx(rootVariants({ variant }), className)}\r\n          ref={mergedRef}\r\n          style={{ gap, ...style }}\r\n          onFormSubmit={async (values, eventDetails) => {\r\n            onFormSubmit?.(values, eventDetails);\r\n            if (!onFinish) return;\r\n            setSubmitLoading(true);\r\n            try {\r\n              await onFinish(values, eventDetails);\r\n              snapshotRef.current = serializeForm(formRef.current);\r\n              syncUnsaved();\r\n            } finally {\r\n              setSubmitLoading(false);\r\n            }\r\n          }}\r\n          {...rest}\r\n        >\r\n          {items && items.length > 0 ? (\r\n            itemsType === 'group' ? (\r\n              (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\r\n            ) : (\r\n              <FormFlatGroup\r\n                className={classNames?.group}\r\n                style={customStyles?.group}\r\n                variant={variant}\r\n              >\r\n                {(items as FormFieldProps[])\r\n                  .filter((item) => !item.hidden)\r\n                  .map((item, i) => mapFlat(item, i))}\r\n              </FormFlatGroup>\r\n            )\r\n          ) : undefined}\r\n          {children}\r\n          {footer}\r\n        </BaseForm>\r\n      </FormContext>\r\n    );\r\n  },\r\n);\r\n\r\nForm.displayName = 'Form';\r\n\r\nexport default Form;\r\n"],"mappings":"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"}

package/es/base-ui/Form/components/FormDivider.d.mts

@@ -0,0 +1,7 @@
+import { FormDividerProps } from "../type.mjs";
+import { FC } from "react";
+//#region src/base-ui/Form/components/FormDivider.d.ts
+declare const FormDivider: FC<FormDividerProps>;
+//#endregion
+export { FormDivider as default };
+//# sourceMappingURL=FormDivider.d.mts.map