@jinmi/ui 0.0.0-stage → 6.0.1

package/es/Freeze/Freeze.mjs

@@ -0,0 +1,73 @@
+"use client";
+import { Suspense, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Freeze/Freeze.tsx
+const infinitePromise = new Promise(() => {});
+const Suspend = () => {
+	throw infinitePromise;
+};
+const snapshotDisplays = (root) => {
+	const snapshot = /* @__PURE__ */ new Map([[root, root.style.display]]);
+	for (const element of root.querySelectorAll("*")) snapshot.set(element, element.style.display);
+	return snapshot;
+};
+const restoreDisplayIfSuspenseHidden = (element, originalDisplay) => {
+	if (element.style.display !== "none") return;
+	if (originalDisplay === "none") return;
+	element.style.display = originalDisplay;
+};
+const restoreSuspenseHiddenDisplay = (snapshot) => {
+	for (const [element, originalDisplay] of snapshot) restoreDisplayIfSuspenseHidden(element, originalDisplay);
+};
+const Freeze = ({ frozen, children }) => {
+	const contentRef = useRef(null);
+	const hasSnapshotRef = useRef(false);
+	const displaySnapshotRef = useRef(/* @__PURE__ */ new Map());
+	const shouldSuspend = frozen && hasSnapshotRef.current;
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		if (!content) return;
+		if (!frozen) {
+			displaySnapshotRef.current = snapshotDisplays(content);
+			hasSnapshotRef.current = true;
+			return;
+		}
+		if (!hasSnapshotRef.current) {
+			displaySnapshotRef.current = snapshotDisplays(content);
+			hasSnapshotRef.current = true;
+			return;
+		}
+		restoreSuspenseHiddenDisplay(displaySnapshotRef.current);
+	});
+	useLayoutEffect(() => {
+		if (!shouldSuspend) return;
+		const snapshot = displaySnapshotRef.current;
+		const observer = new MutationObserver((mutations) => {
+			for (const mutation of mutations) {
+				const element = mutation.target;
+				const originalDisplay = snapshot.get(element);
+				if (originalDisplay === void 0) continue;
+				restoreDisplayIfSuspenseHidden(element, originalDisplay);
+			}
+		});
+		for (const element of snapshot.keys()) observer.observe(element, {
+			attributeFilter: ["style"],
+			attributes: true
+		});
+		restoreSuspenseHiddenDisplay(snapshot);
+		return () => observer.disconnect();
+	}, [shouldSuspend]);
+	return /* @__PURE__ */ jsxs(Suspense, {
+		fallback: null,
+		children: [shouldSuspend && /* @__PURE__ */ jsx(Suspend, {}), /* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			style: { display: "contents" },
+			children
+		})]
+	});
+};
+Freeze.displayName = "Freeze";
+//#endregion
+export { Freeze as default };
+
+//# sourceMappingURL=Freeze.mjs.map

package/es/Freeze/Freeze.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Freeze.mjs","names":[],"sources":["../../src/Freeze/Freeze.tsx"],"sourcesContent":["// @see https://barvian.me/react-exit-animations\r\n\r\n'use client';\r\n\r\nimport { Suspense, useLayoutEffect, useRef } from 'react';\r\n\r\nimport type { FreezeProps } from './type';\r\n\r\nconst infinitePromise = new Promise<never>(() => {});\r\nconst Suspend = () => {\r\n  throw infinitePromise;\r\n};\r\n\r\nconst snapshotDisplays = (root: HTMLElement) => {\r\n  const snapshot = new Map<HTMLElement, string>([[root, root.style.display]]);\r\n\r\n  for (const element of root.querySelectorAll<HTMLElement>('*')) {\r\n    snapshot.set(element, element.style.display);\r\n  }\r\n\r\n  return snapshot;\r\n};\r\n\r\nconst restoreDisplayIfSuspenseHidden = (element: HTMLElement, originalDisplay: string) => {\r\n  if (element.style.display !== 'none') return;\r\n  if (originalDisplay === 'none') return;\r\n\r\n  element.style.display = originalDisplay;\r\n};\r\n\r\nconst restoreSuspenseHiddenDisplay = (snapshot: Map<HTMLElement, string>) => {\r\n  for (const [element, originalDisplay] of snapshot) {\r\n    restoreDisplayIfSuspenseHidden(element, originalDisplay);\r\n  }\r\n};\r\n\r\nconst Freeze = ({ frozen, children }: FreezeProps) => {\r\n  const contentRef = useRef<HTMLDivElement>(null);\r\n  const hasSnapshotRef = useRef(false);\r\n  const displaySnapshotRef = useRef<Map<HTMLElement, string>>(new Map());\r\n\r\n  const shouldSuspend = frozen && hasSnapshotRef.current;\r\n\r\n  useLayoutEffect(() => {\r\n    const content = contentRef.current;\r\n    if (!content) return;\r\n\r\n    if (!frozen) {\r\n      displaySnapshotRef.current = snapshotDisplays(content);\r\n      hasSnapshotRef.current = true;\r\n      return;\r\n    }\r\n\r\n    if (!hasSnapshotRef.current) {\r\n      displaySnapshotRef.current = snapshotDisplays(content);\r\n      hasSnapshotRef.current = true;\r\n      return;\r\n    }\r\n\r\n    restoreSuspenseHiddenDisplay(displaySnapshotRef.current);\r\n  });\r\n\r\n  useLayoutEffect(() => {\r\n    if (!shouldSuspend) return;\r\n\r\n    const snapshot = displaySnapshotRef.current;\r\n    const observer = new MutationObserver((mutations) => {\r\n      for (const mutation of mutations) {\r\n        const element = mutation.target as HTMLElement;\r\n        const originalDisplay = snapshot.get(element);\r\n        if (originalDisplay === undefined) continue;\r\n\r\n        restoreDisplayIfSuspenseHidden(element, originalDisplay);\r\n      }\r\n    });\r\n\r\n    for (const element of snapshot.keys()) {\r\n      observer.observe(element, { attributeFilter: ['style'], attributes: true });\r\n    }\r\n\r\n    restoreSuspenseHiddenDisplay(snapshot);\r\n\r\n    return () => observer.disconnect();\r\n  }, [shouldSuspend]);\r\n\r\n  return (\r\n    <Suspense fallback={null}>\r\n      {shouldSuspend && <Suspend />}\r\n      <div ref={contentRef} style={{ display: 'contents' }}>\r\n        {children}\r\n      </div>\r\n    </Suspense>\r\n  );\r\n};\r\n\r\nFreeze.displayName = 'Freeze';\r\n\r\nexport default Freeze;\r\n"],"mappings":";;;;AAQA,MAAM,kBAAkB,IAAI,cAAqB,CAAC,CAAC;AACnD,MAAM,gBAAgB;CACpB,MAAM;AACR;AAEA,MAAM,oBAAoB,SAAsB;CAC9C,MAAM,2BAAW,IAAI,IAAyB,CAAC,CAAC,MAAM,KAAK,MAAM,OAAO,CAAC,CAAC;CAE1E,KAAK,MAAM,WAAW,KAAK,iBAA8B,GAAG,GAC1D,SAAS,IAAI,SAAS,QAAQ,MAAM,OAAO;CAG7C,OAAO;AACT;AAEA,MAAM,kCAAkC,SAAsB,oBAA4B;CACxF,IAAI,QAAQ,MAAM,YAAY,QAAQ;CACtC,IAAI,oBAAoB,QAAQ;CAEhC,QAAQ,MAAM,UAAU;AAC1B;AAEA,MAAM,gCAAgC,aAAuC;CAC3E,KAAK,MAAM,CAAC,SAAS,oBAAoB,UACvC,+BAA+B,SAAS,eAAe;AAE3D;AAEA,MAAM,UAAU,EAAE,QAAQ,eAA4B;CACpD,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,qBAAqB,uBAAiC,IAAI,IAAI,CAAC;CAErE,MAAM,gBAAgB,UAAU,eAAe;CAE/C,sBAAsB;EACpB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAEd,IAAI,CAAC,QAAQ;GACX,mBAAmB,UAAU,iBAAiB,OAAO;GACrD,eAAe,UAAU;GACzB;EACF;EAEA,IAAI,CAAC,eAAe,SAAS;GAC3B,mBAAmB,UAAU,iBAAiB,OAAO;GACrD,eAAe,UAAU;GACzB;EACF;EAEA,6BAA6B,mBAAmB,OAAO;CACzD,CAAC;CAED,sBAAsB;EACpB,IAAI,CAAC,eAAe;EAEpB,MAAM,WAAW,mBAAmB;EACpC,MAAM,WAAW,IAAI,kBAAkB,cAAc;GACnD,KAAK,MAAM,YAAY,WAAW;IAChC,MAAM,UAAU,SAAS;IACzB,MAAM,kBAAkB,SAAS,IAAI,OAAO;IAC5C,IAAI,oBAAoB,KAAA,GAAW;IAEnC,+BAA+B,SAAS,eAAe;GACzD;EACF,CAAC;EAED,KAAK,MAAM,WAAW,SAAS,KAAK,GAClC,SAAS,QAAQ,SAAS;GAAE,iBAAiB,CAAC,OAAO;GAAG,YAAY;EAAK,CAAC;EAG5E,6BAA6B,QAAQ;EAErC,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,qBAAC,UAAD;EAAU,UAAU;EAApB,UAAA,CACG,iBAAiB,oBAAC,SAAD,CAAU,CAAA,GAC5B,oBAAC,OAAD;GAAK,KAAK;GAAY,OAAO,EAAE,SAAS,WAAW;GAChD;EACE,CAAA,CACG;;AAEd;AAEA,OAAO,cAAc"}

package/es/Freeze/index.d.mts

@@ -0,0 +1,3 @@
+import { FreezeProps } from "./type.mjs";
+import Freeze from "./Freeze.mjs";
+export { type FreezeProps, Freeze as default };

package/es/Freeze/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Freeze/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Freeze/index.mjs

@@ -0,0 +1,2 @@
+import Freeze from "./Freeze.mjs";
+export { Freeze as default };

package/es/Freeze/type.d.mts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+//#region src/Freeze/type.d.ts
+interface FreezeProps {
+  children: ReactNode;
+  frozen: boolean;
+}
+//#endregion
+export { FreezeProps };
+//# sourceMappingURL=type.d.mts.map

package/es/GlobalFocusRing/index.d.mts

@@ -0,0 +1,6 @@
+//#region src/GlobalFocusRing/index.d.ts
+/** Install once per document. The returned cleanup is safe for nested providers and Strict Mode. */
+declare const installGlobalFocusRing: (doc?: Document) => (() => void);
+//#endregion
+export { installGlobalFocusRing };
+//# sourceMappingURL=index.d.mts.map

package/es/GlobalFocusRing/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/GlobalFocusRing/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/GlobalFocusRing/index.mjs

@@ -0,0 +1,164 @@
+import { globalFocusRingCSS } from "./style.mjs";
+//#region src/GlobalFocusRing/index.ts
+const installations = /* @__PURE__ */ new WeakMap();
+/** Install once per document. The returned cleanup is safe for nested providers and Strict Mode. */
+const installGlobalFocusRing = (doc = document) => {
+	const existing = installations.get(doc);
+	if (existing) {
+		existing.users += 1;
+		let released = false;
+		return () => {
+			if (released) return;
+			released = true;
+			if (--existing.users === 0) existing.dispose();
+		};
+	}
+	const win = doc.defaultView;
+	if (!win || !doc.body || !win.CSS?.supports("top", "anchor(top)") || !win.CSS.supports("position-visibility", "anchors-visible") || !("showPopover" in doc.createElement("div"))) return () => {};
+	const sheet = doc.createElement("style");
+	sheet.textContent = globalFocusRingCSS;
+	const ring = doc.createElement("div");
+	ring.setAttribute("data-jinmi-global-focus-ring", "");
+	ring.setAttribute("aria-hidden", "true");
+	ring.setAttribute("popover", "manual");
+	doc.head.append(sheet);
+	doc.body.append(ring);
+	let target;
+	let restoreTarget;
+	let frame = 0;
+	let disposed = false;
+	const clear = () => {
+		if (ring.matches(":popover-open")) ring.hidePopover();
+		restoreTarget?.();
+		restoreTarget = void 0;
+		target = void 0;
+	};
+	const sync = () => {
+		if (disposed) return;
+		const next = doc.activeElement;
+		if (next === target && next?.matches(":focus-visible") && next.isConnected && ring.matches(":popover-open")) return;
+		clear();
+		if (!next || next === doc.body || next.namespaceURI !== "http://www.w3.org/1999/xhtml" || next.shadowRoot || next.closest("[data-jinmi-focus-ring=\"off\"]") || next.matches("textarea") || next.isContentEditable || next.matches("input") && ![
+			"button",
+			"submit",
+			"reset",
+			"image",
+			"checkbox",
+			"radio",
+			"range",
+			"color",
+			"file"
+		].includes(next.type) || !next.matches(":focus-visible")) return;
+		const element = next;
+		let scope = element.parentElement;
+		while (scope && win.getComputedStyle(scope).contain === "none") scope = scope.parentElement;
+		const ringParent = scope || doc.body;
+		const moved = ring.parentElement !== ringParent;
+		if (moved) ringParent.append(ring);
+		const computed = win.getComputedStyle(element);
+		const borderRadius = computed.borderRadius;
+		const color = computed.getPropertyValue("--jinmi-focus-ring-color").trim() || computed.getPropertyValue("--ant-color-info").trim() || "#1677ff";
+		const styleChanged = ring.style.borderRadius !== borderRadius || ring.style.getPropertyValue("--jinmi-focus-ring-color") !== color;
+		if (styleChanged) {
+			ring.style.borderRadius = borderRadius;
+			ring.style.setProperty("--jinmi-focus-ring-color", color);
+		}
+		if (moved || styleChanged) {
+			schedule();
+			return;
+		}
+		const saved = ["anchor-name", "outline"].map((property) => ({
+			priority: element.style.getPropertyPriority(property),
+			property,
+			value: element.style.getPropertyValue(property)
+		}));
+		const oldMarker = element.getAttribute("data-jinmi-focus-ring");
+		const anchor = computed.getPropertyValue("anchor-name").trim();
+		const assignedAnchor = anchor && anchor !== "none" ? `${anchor}, --jinmi-global-focus` : "--jinmi-global-focus";
+		element.style.setProperty("anchor-name", assignedAnchor, "important");
+		restoreTarget = () => {
+			for (const { property, value, priority } of saved) {
+				const assigned = property === "anchor-name" ? assignedAnchor : "none";
+				if (element.style.getPropertyValue(property) !== assigned) continue;
+				if (value) element.style.setProperty(property, value, priority);
+				else element.style.removeProperty(property);
+			}
+			if (element.getAttribute("data-jinmi-focus-ring") === "managed") {
+				if (oldMarker === null) element.removeAttribute("data-jinmi-focus-ring");
+				else element.setAttribute("data-jinmi-focus-ring", oldMarker);
+			}
+		};
+		const rect = element.getBoundingClientRect();
+		if (element.getClientRects().length !== 1 || !rect.width || !rect.height || computed.visibility !== "visible") {
+			clear();
+			return;
+		}
+		try {
+			ring.showPopover();
+			const bounds = ring.getBoundingClientRect();
+			if (Math.max(...[
+				"top",
+				"right",
+				"bottom",
+				"left"
+			].map((edge) => Math.abs(bounds[edge] - rect[edge]))) > 1) {
+				clear();
+				return;
+			}
+			element.style.setProperty("outline", "none", "important");
+			element.setAttribute("data-jinmi-focus-ring", "managed");
+			target = element;
+		} catch {
+			clear();
+		}
+	};
+	const schedule = () => {
+		if (!frame) frame = win.requestAnimationFrame(() => {
+			frame = 0;
+			sync();
+		});
+	};
+	const focus = () => win.queueMicrotask(sync);
+	const blur = () => {
+		win.cancelAnimationFrame(frame);
+		frame = 0;
+		if (ring.matches(":popover-open")) ring.hidePopover();
+	};
+	const observer = new MutationObserver(() => {
+		if (target && !target.isConnected) clear();
+	});
+	observer.observe(doc.body, {
+		childList: true,
+		subtree: true
+	});
+	doc.addEventListener("focusin", focus, true);
+	doc.addEventListener("focusout", schedule, true);
+	doc.addEventListener("keydown", schedule, true);
+	doc.addEventListener("pointerdown", schedule, true);
+	win.addEventListener("blur", blur);
+	win.addEventListener("focus", schedule);
+	installations.set(doc, {
+		dispose: () => {
+			disposed = true;
+			win.cancelAnimationFrame(frame);
+			observer.disconnect();
+			doc.removeEventListener("focusin", focus, true);
+			doc.removeEventListener("focusout", schedule, true);
+			doc.removeEventListener("keydown", schedule, true);
+			doc.removeEventListener("pointerdown", schedule, true);
+			win.removeEventListener("blur", blur);
+			win.removeEventListener("focus", schedule);
+			clear();
+			ring.remove();
+			sheet.remove();
+			installations.delete(doc);
+		},
+		users: 0
+	});
+	sync();
+	return installGlobalFocusRing(doc);
+};
+//#endregion
+export { installGlobalFocusRing };
+
+//# sourceMappingURL=index.mjs.map

package/es/GlobalFocusRing/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/GlobalFocusRing/index.ts"],"sourcesContent":["import { globalFocusRingCSS } from './style';\n\nconst installations = new WeakMap<Document, { dispose: () => void; users: number }>();\n\n/** Install once per document. The returned cleanup is safe for nested providers and Strict Mode. */\nexport const installGlobalFocusRing = (doc: Document = document): (() => void) => {\n  const existing = installations.get(doc);\n  if (existing) {\n    existing.users += 1;\n    let released = false;\n    return () => {\n      if (released) return;\n      released = true;\n      if (--existing.users === 0) existing.dispose();\n    };\n  }\n\n  const win = doc.defaultView;\n  if (\n    !win ||\n    !doc.body ||\n    !win.CSS?.supports('top', 'anchor(top)') ||\n    !win.CSS.supports('position-visibility', 'anchors-visible') ||\n    !('showPopover' in doc.createElement('div'))\n  )\n    return () => {};\n\n  const sheet = doc.createElement('style');\n  sheet.textContent = globalFocusRingCSS;\n  const ring = doc.createElement('div');\n  ring.setAttribute('data-jinmi-global-focus-ring', '');\n  ring.setAttribute('aria-hidden', 'true');\n  ring.setAttribute('popover', 'manual');\n  doc.head.append(sheet);\n  doc.body.append(ring);\n\n  let target: HTMLElement | undefined;\n  let restoreTarget: (() => void) | undefined;\n  let frame = 0;\n  let disposed = false;\n\n  const clear = () => {\n    if (ring.matches(':popover-open')) ring.hidePopover();\n    restoreTarget?.();\n    restoreTarget = undefined;\n    target = undefined;\n  };\n\n  const sync = () => {\n    if (disposed) return;\n    const next = doc.activeElement;\n    if (\n      next === target &&\n      next?.matches(':focus-visible') &&\n      next.isConnected &&\n      ring.matches(':popover-open')\n    )\n      return;\n    clear();\n    // Shadow roots and fragmented inline text retain their own focus treatment.\n    if (\n      !next ||\n      next === doc.body ||\n      next.namespaceURI !== 'http://www.w3.org/1999/xhtml' ||\n      next.shadowRoot ||\n      next.closest('[data-jinmi-focus-ring=\"off\"]') ||\n      next.matches('textarea') ||\n      (next as HTMLElement).isContentEditable ||\n      (next.matches('input') &&\n        ![\n          'button',\n          'submit',\n          'reset',\n          'image',\n          'checkbox',\n          'radio',\n          'range',\n          'color',\n          'file',\n        ].includes((next as HTMLInputElement).type)) ||\n      !next.matches(':focus-visible')\n    )\n      return;\n\n    const element = next as HTMLElement;\n    let scope = element.parentElement;\n    while (scope && win.getComputedStyle(scope).contain === 'none') scope = scope.parentElement;\n    // Anchor names do not cross CSS containment, while a popover still escapes its clipping.\n    const ringParent = scope || doc.body;\n    const moved = ring.parentElement !== ringParent;\n    if (moved) ringParent.append(ring);\n\n    const computed = win.getComputedStyle(element);\n    const borderRadius = computed.borderRadius;\n    const color =\n      computed.getPropertyValue('--jinmi-focus-ring-color').trim() ||\n      computed.getPropertyValue('--ant-color-info').trim() ||\n      '#1677ff';\n    const styleChanged =\n      ring.style.borderRadius !== borderRadius ||\n      ring.style.getPropertyValue('--jinmi-focus-ring-color') !== color;\n    if (styleChanged) {\n      ring.style.borderRadius = borderRadius;\n      ring.style.setProperty('--jinmi-focus-ring-color', color);\n    }\n    if (moved || styleChanged) {\n      schedule();\n      return;\n    }\n\n    const saved = ['anchor-name', 'outline'].map((property) => ({\n      priority: element.style.getPropertyPriority(property),\n      property,\n      value: element.style.getPropertyValue(property),\n    }));\n    const oldMarker = element.getAttribute('data-jinmi-focus-ring');\n    const anchor = computed.getPropertyValue('anchor-name').trim();\n    const assignedAnchor =\n      anchor && anchor !== 'none' ? `${anchor}, --jinmi-global-focus` : '--jinmi-global-focus';\n    element.style.setProperty('anchor-name', assignedAnchor, 'important');\n\n    restoreTarget = () => {\n      for (const { property, value, priority } of saved) {\n        const assigned = property === 'anchor-name' ? assignedAnchor : 'none';\n        if (element.style.getPropertyValue(property) !== assigned) continue;\n        if (value) element.style.setProperty(property, value, priority);\n        else element.style.removeProperty(property);\n      }\n      if (element.getAttribute('data-jinmi-focus-ring') === 'managed') {\n        if (oldMarker === null) element.removeAttribute('data-jinmi-focus-ring');\n        else element.setAttribute('data-jinmi-focus-ring', oldMarker);\n      }\n    };\n    const rect = element.getBoundingClientRect();\n    if (\n      element.getClientRects().length !== 1 ||\n      !rect.width ||\n      !rect.height ||\n      computed.visibility !== 'visible'\n    ) {\n      clear();\n      return;\n    }\n    try {\n      ring.showPopover();\n      // Do not suppress a working native outline when an anchor cannot resolve.\n      const bounds = ring.getBoundingClientRect();\n      if (\n        Math.max(\n          ...(['top', 'right', 'bottom', 'left'] as const).map((edge) =>\n            Math.abs(bounds[edge] - rect[edge]),\n          ),\n        ) > 1\n      ) {\n        clear();\n        return;\n      }\n      element.style.setProperty('outline', 'none', 'important');\n      element.setAttribute('data-jinmi-focus-ring', 'managed');\n      target = element;\n    } catch {\n      clear();\n    }\n  };\n\n  const schedule = () => {\n    if (!frame)\n      frame = win.requestAnimationFrame(() => {\n        frame = 0;\n        sync();\n      });\n  };\n  const focus = () => win.queueMicrotask(sync);\n  const blur = () => {\n    win.cancelAnimationFrame(frame);\n    frame = 0;\n    if (ring.matches(':popover-open')) ring.hidePopover();\n  };\n  const observer = new MutationObserver(() => {\n    if (target && !target.isConnected) clear();\n  });\n  observer.observe(doc.body, { childList: true, subtree: true });\n  doc.addEventListener('focusin', focus, true);\n  doc.addEventListener('focusout', schedule, true);\n  doc.addEventListener('keydown', schedule, true);\n  doc.addEventListener('pointerdown', schedule, true);\n  win.addEventListener('blur', blur);\n  win.addEventListener('focus', schedule);\n\n  const installation = {\n    dispose: () => {\n      disposed = true;\n      win.cancelAnimationFrame(frame);\n      observer.disconnect();\n      doc.removeEventListener('focusin', focus, true);\n      doc.removeEventListener('focusout', schedule, true);\n      doc.removeEventListener('keydown', schedule, true);\n      doc.removeEventListener('pointerdown', schedule, true);\n      win.removeEventListener('blur', blur);\n      win.removeEventListener('focus', schedule);\n      clear();\n      ring.remove();\n      sheet.remove();\n      installations.delete(doc);\n    },\n    users: 0,\n  };\n  installations.set(doc, installation);\n  sync();\n  return installGlobalFocusRing(doc);\n};\n"],"mappings":"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"}

package/es/GlobalFocusRing/style.mjs

@@ -0,0 +1,35 @@
+//#region src/GlobalFocusRing/style.ts
+const focusRingColor = (color) => `color-mix(in srgb, ${color} 90%, transparent)`;
+const globalFocusRingCSS = `
+[data-jinmi-global-focus-ring] {
+  all: initial;
+  position: fixed;
+  position-anchor: --jinmi-global-focus;
+  top: anchor(top);
+  right: anchor(right);
+  bottom: anchor(bottom);
+  left: anchor(left);
+  position-visibility: anchors-visible;
+  pointer-events: none;
+  border-radius: inherit;
+  outline: 2px solid ${focusRingColor("var(--jinmi-focus-ring-color)")};
+  outline-offset: 2px;
+  animation: jinmi-global-focus-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+[data-jinmi-global-focus-ring]:not(:popover-open) { display: none; }
+[data-jinmi-global-focus-ring]::backdrop { background: transparent; pointer-events: none; }
+@keyframes jinmi-global-focus-in {
+  from { opacity: 0.25; outline-offset: 5px; }
+  to { opacity: 1; outline-offset: 2px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-jinmi-global-focus-ring] { animation: none; }
+}
+@media (forced-colors: active) {
+  [data-jinmi-global-focus-ring] { outline-color: CanvasText; animation: none; }
+}
+`;
+//#endregion
+export { focusRingColor, globalFocusRingCSS };
+
+//# sourceMappingURL=style.mjs.map

package/es/GlobalFocusRing/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/GlobalFocusRing/style.ts"],"sourcesContent":["export const focusRingColor = (color: string) => `color-mix(in srgb, ${color} 90%, transparent)`;\n\nexport const globalFocusRingCSS = `\n[data-jinmi-global-focus-ring] {\n  all: initial;\n  position: fixed;\n  position-anchor: --jinmi-global-focus;\n  top: anchor(top);\n  right: anchor(right);\n  bottom: anchor(bottom);\n  left: anchor(left);\n  position-visibility: anchors-visible;\n  pointer-events: none;\n  border-radius: inherit;\n  outline: 2px solid ${focusRingColor('var(--jinmi-focus-ring-color)')};\n  outline-offset: 2px;\n  animation: jinmi-global-focus-in 200ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-jinmi-global-focus-ring]:not(:popover-open) { display: none; }\n[data-jinmi-global-focus-ring]::backdrop { background: transparent; pointer-events: none; }\n@keyframes jinmi-global-focus-in {\n  from { opacity: 0.25; outline-offset: 5px; }\n  to { opacity: 1; outline-offset: 2px; }\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-jinmi-global-focus-ring] { animation: none; }\n}\n@media (forced-colors: active) {\n  [data-jinmi-global-focus-ring] { outline-color: CanvasText; animation: none; }\n}\n`;\n"],"mappings":";AAAA,MAAa,kBAAkB,UAAkB,sBAAsB,MAAM;AAE7E,MAAa,qBAAqB;;;;;;;;;;;;uBAYX,eAAe,+BAA+B,EAAE"}

package/es/Grid/Grid.d.mts

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

package/es/Grid/Grid.mjs

@@ -0,0 +1,37 @@
+"use client";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { styles } from "./style.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { isString } from "es-toolkit/compat";
+//#region src/Grid/Grid.tsx
+const Grid = ({ className, gap = "1em", rows = 3, children, maxItemWidth = 240, ref, style, ...rest }) => {
+	const cssVariables = useMemo(() => {
+		return {
+			"--grid-gap": isString(gap) ? gap : `${gap}px`,
+			"--grid-max-item-width": isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,
+			"--grid-rows": `${rows}`
+		};
+	}, [
+		gap,
+		maxItemWidth,
+		rows
+	]);
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: cx(styles, className),
+		gap,
+		ref,
+		style: {
+			...cssVariables,
+			...style
+		},
+		...rest,
+		children
+	});
+};
+Grid.displayName = "Grid";
+//#endregion
+export { Grid as default };
+
+//# sourceMappingURL=Grid.mjs.map

package/es/Grid/Grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.mjs","names":["Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { isString } from 'es-toolkit/compat';\r\nimport { type FC } from 'react';\r\nimport { useMemo } from 'react';\r\n\r\nimport { Flexbox } from '@/Flex';\r\n\r\nimport { styles } from './style';\r\nimport type { GridProps } from './type';\r\n\r\nconst Grid: FC<GridProps> = ({\r\n  className,\r\n  gap = '1em',\r\n  rows = 3,\r\n  children,\r\n  maxItemWidth = 240,\r\n  ref,\r\n  style,\r\n  ...rest\r\n}) => {\r\n  // Convert props to CSS variables\r\n  const cssVariables = useMemo<Record<string, string>>(() => {\r\n    const vars: Record<string, string> = {\r\n      '--grid-gap': isString(gap) ? gap : `${gap}px`,\r\n      '--grid-max-item-width': isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,\r\n      '--grid-rows': `${rows}`,\r\n    };\r\n    return vars;\r\n  }, [gap, maxItemWidth, rows]);\r\n\r\n  return (\r\n    <Flexbox\r\n      className={cx(styles, className)}\r\n      gap={gap as any}\r\n      ref={ref}\r\n      style={{\r\n        ...cssVariables,\r\n        ...style,\r\n      }}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </Flexbox>\r\n  );\r\n};\r\n\r\nGrid.displayName = 'Grid';\r\n\r\nexport default Grid;\r\n"],"mappings":";;;;;;;;AAYA,MAAM,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,OACA,GAAG,WACC;CAEJ,MAAM,eAAe,cAAsC;EAMzD,OAAO;GAJL,cAAc,SAAS,GAAG,IAAI,MAAM,GAAG,IAAI;GAC3C,yBAAyB,SAAS,YAAY,IAAI,eAAe,GAAG,aAAa;GACjF,eAAe,GAAG;EAEV;CACZ,GAAG;EAAC;EAAK;EAAc;CAAI,CAAC;CAE5B,OACE,oBAACA,mBAAD;EACE,WAAW,GAAG,QAAQ,SAAS;EAC1B;EACA;EACL,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,KAAK,cAAc"}

package/es/Grid/index.d.mts

@@ -0,0 +1,3 @@
+import { GridProps } from "./type.mjs";
+import Grid from "./Grid.mjs";
+export { type GridProps, Grid as default };

package/es/Grid/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Grid/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Grid/index.mjs

@@ -0,0 +1,2 @@
+import Grid from "./Grid.mjs";
+export { Grid as default };

package/es/Grid/style.mjs

@@ -0,0 +1,22 @@
+import { createStaticStyles } from "antd-style";
+//#region src/Grid/style.ts
+const styles = createStaticStyles(({ css }) => {
+	return css`
+    --rows: var(--grid-rows, 3);
+    --max-item-width: var(--grid-max-item-width, 240px);
+    --gap: var(--grid-gap, 1em);
+
+    display: grid !important;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(
+        max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),
+        1fr
+      )
+    );
+  `;
+});
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Grid/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Grid/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css }) => {\r\n  return css`\r\n    --rows: var(--grid-rows, 3);\r\n    --max-item-width: var(--grid-max-item-width, 240px);\r\n    --gap: var(--grid-gap, 1em);\r\n\r\n    display: grid !important;\r\n    grid-template-columns: repeat(\r\n      auto-fill,\r\n      minmax(\r\n        max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),\r\n        1fr\r\n      )\r\n    );\r\n  `;\r\n});\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,OAAO,GAAG;;;;;;;;;;;;;;AAcZ,CAAC"}

package/es/Grid/type.d.mts

@@ -0,0 +1,13 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { Ref } from "react";
+//#region src/Grid/type.d.ts
+interface GridProps extends Omit<FlexboxProps, 'gap'> {
+  gap?: string | number;
+  maxItemWidth?: string | number;
+  ref?: Ref<HTMLDivElement>;
+  rows?: number;
+}
+//#endregion
+export { GridProps };
+//# sourceMappingURL=type.d.mts.map

package/es/GroupAvatar/GroupAvatar.d.mts

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

package/es/GroupAvatar/GroupAvatar.mjs

@@ -0,0 +1,63 @@
+"use client";
+import Block from "../Block/Block.mjs";
+import Avatar from "../base-ui/Avatar/index.mjs";
+import Grid from "../Grid/Grid.mjs";
+import { variants } from "./style.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/GroupAvatar/GroupAvatar.tsx
+const GroupAvatar = ({ className, style, avatars = [], size = 32, grid = 2, cornerShape = "square", avatarShape = "square", ...rest }) => {
+	const calcSize = useMemo(() => {
+		const length = avatars.length;
+		const gridSize = grid === "auto" ? length > 4 ? 3 : 2 : grid;
+		const isCircle = cornerShape === "circle";
+		const avatarSize = Math.floor(size / gridSize * (isCircle ? .65 : .75));
+		const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));
+		return {
+			avatarSize,
+			gapSize,
+			gridSize,
+			gridWidth: avatarSize * gridSize + gapSize,
+			maxItemWidth: avatarSize - 1
+		};
+	}, [
+		avatars,
+		grid,
+		size,
+		cornerShape
+	]);
+	const calcAvatars = useMemo(() => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize), [avatars, calcSize.gridSize]);
+	const isSingle = calcAvatars?.length === 1;
+	return /* @__PURE__ */ jsx(Block, {
+		align: "center",
+		className: cx(variants({ cornerShape }), className),
+		height: size,
+		justify: "center",
+		style,
+		width: size,
+		...rest,
+		children: /* @__PURE__ */ jsx(Grid, {
+			gap: calcSize.gapSize,
+			maxItemWidth: 0,
+			rows: calcSize.gridSize,
+			width: calcSize.gridWidth,
+			children: calcAvatars.map((item, index) => {
+				if (typeof item === "string") return /* @__PURE__ */ jsx(Avatar, {
+					avatar: item,
+					shape: avatarShape,
+					size: isSingle ? size * .8 : calcSize.avatarSize
+				}, index);
+				return /* @__PURE__ */ jsx(Avatar, {
+					...item,
+					shape: avatarShape,
+					size: isSingle ? size * .8 : calcSize.avatarSize
+				}, index);
+			})
+		})
+	});
+};
+//#endregion
+export { GroupAvatar as default };
+
+//# sourceMappingURL=GroupAvatar.mjs.map

package/es/GroupAvatar/GroupAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupAvatar.mjs","names":[],"sources":["../../src/GroupAvatar/GroupAvatar.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { type FC, useMemo } from 'react';\r\n\r\nimport Avatar from '@/base-ui/Avatar';\r\nimport Block from '@/Block';\r\nimport Grid from '@/Grid';\r\n\r\nimport { variants } from './style';\r\nimport type { GroupAvatarProps } from './type';\r\n\r\nconst GroupAvatar: FC<GroupAvatarProps> = ({\r\n  className,\r\n  style,\r\n  avatars = [],\r\n  size = 32,\r\n  grid = 2,\r\n  cornerShape = 'square',\r\n  avatarShape = 'square',\r\n  ...rest\r\n}) => {\r\n  const calcSize = useMemo(() => {\r\n    const length = avatars.length;\r\n    const isAutoGrid = grid === 'auto';\r\n    const gridSize = isAutoGrid ? (length > 4 ? 3 : 2) : grid;\r\n    const isCircle = cornerShape === 'circle';\r\n    const avatarSize = Math.floor((size / gridSize) * (isCircle ? 0.65 : 0.75));\r\n    const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));\r\n\r\n    return {\r\n      avatarSize,\r\n      gapSize,\r\n      gridSize,\r\n      gridWidth: avatarSize * gridSize + gapSize,\r\n      maxItemWidth: avatarSize - 1,\r\n    };\r\n  }, [avatars, grid, size, cornerShape]);\r\n\r\n  const calcAvatars = useMemo(\r\n    () => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize),\r\n    [avatars, calcSize.gridSize],\r\n  );\r\n\r\n  const isSingle = calcAvatars?.length === 1;\r\n\r\n  return (\r\n    <Block\r\n      align={'center'}\r\n      className={cx(variants({ cornerShape }), className)}\r\n      height={size}\r\n      justify={'center'}\r\n      style={style}\r\n      width={size}\r\n      {...rest}\r\n    >\r\n      <Grid\r\n        gap={calcSize.gapSize}\r\n        maxItemWidth={0}\r\n        rows={calcSize.gridSize}\r\n        width={calcSize.gridWidth}\r\n      >\r\n        {calcAvatars.map((item, index) => {\r\n          if (typeof item === 'string')\r\n            return (\r\n              <Avatar\r\n                avatar={item}\r\n                key={index}\r\n                shape={avatarShape}\r\n                size={isSingle ? size * 0.8 : calcSize.avatarSize}\r\n              />\r\n            );\r\n          return (\r\n            <Avatar\r\n              key={index}\r\n              {...item}\r\n              shape={avatarShape}\r\n              size={isSingle ? size * 0.8 : calcSize.avatarSize}\r\n            />\r\n          );\r\n        })}\r\n      </Grid>\r\n    </Block>\r\n  );\r\n};\r\n\r\nexport default GroupAvatar;\r\n"],"mappings":";;;;;;;;;AAYA,MAAM,eAAqC,EACzC,WACA,OACA,UAAU,CAAC,GACX,OAAO,IACP,OAAO,GACP,cAAc,UACd,cAAc,UACd,GAAG,WACC;CACJ,MAAM,WAAW,cAAc;EAC7B,MAAM,SAAS,QAAQ;EAEvB,MAAM,WADa,SAAS,SACG,SAAS,IAAI,IAAI,IAAK;EACrD,MAAM,WAAW,gBAAgB;EACjC,MAAM,aAAa,KAAK,MAAO,OAAO,YAAa,WAAW,MAAO,IAAK;EAC1E,MAAM,UAAU,KAAK,OAAO,OAAO,aAAa,aAAa,WAAW,IAAI,EAAE;EAE9E,OAAO;GACL;GACA;GACA;GACA,WAAW,aAAa,WAAW;GACnC,cAAc,aAAa;EAC7B;CACF,GAAG;EAAC;EAAS;EAAM;EAAM;CAAW,CAAC;CAErC,MAAM,cAAc,cACZ,SAAS,MAAM,GAAG,SAAS,WAAW,SAAS,QAAQ,GAC7D,CAAC,SAAS,SAAS,QAAQ,CAC7B;CAEA,MAAM,WAAW,aAAa,WAAW;CAEzC,OACE,oBAAC,OAAD;EACE,OAAO;EACP,WAAW,GAAG,SAAS,EAAE,YAAY,CAAC,GAAG,SAAS;EAClD,QAAQ;EACR,SAAS;EACF;EACP,OAAO;EACP,GAAI;EAEJ,UAAA,oBAAC,MAAD;GACE,KAAK,SAAS;GACd,cAAc;GACd,MAAM,SAAS;GACf,OAAO,SAAS;GAEf,UAAA,YAAY,KAAK,MAAM,UAAU;IAChC,IAAI,OAAO,SAAS,UAClB,OACE,oBAAC,QAAD;KACE,QAAQ;KAER,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;IACxC,GAHM,KAGN;IAEL,OACE,oBAAC,QAAD;KAEE,GAAI;KACJ,OAAO;KACP,MAAM,WAAW,OAAO,KAAM,SAAS;IACxC,GAJM,KAIN;GAEL,CAAC;EACG,CAAA;CACD,CAAA;AAEX"}

package/es/GroupAvatar/index.d.mts

@@ -0,0 +1,3 @@
+import { GroupAvatarProps } from "./type.mjs";
+import GroupAvatar from "./GroupAvatar.mjs";
+export { type GroupAvatarProps, GroupAvatar as default };

package/es/GroupAvatar/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/GroupAvatar/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/GroupAvatar/index.mjs

@@ -0,0 +1,2 @@
+import GroupAvatar from "./GroupAvatar.mjs";
+export { GroupAvatar as default };

package/es/GroupAvatar/style.mjs

@@ -0,0 +1,47 @@
+import { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/GroupAvatar/style.ts
+const styles = createStaticStyles(({ css }) => {
+	const createCornerVariant = (cornerType) => css`
+    mask-image: url('${SMOOTH_CORNER_MASKS[cornerType]}');
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+  `;
+	return {
+		circle: createCornerVariant("circle"),
+		ios: createCornerVariant("ios"),
+		root: css`
+      overflow: hidden;
+      flex: none;
+
+      /* Fallback for browsers without mask support */
+      border-radius: 15%;
+
+      /* Apply smooth corners mask with fallback */
+      @supports (mask-image: url('data:image/svg+xml;base64,')) {
+        border-radius: 0;
+      }
+    `,
+		sharp: createCornerVariant("sharp"),
+		smooth: createCornerVariant("smooth"),
+		square: createCornerVariant("square"),
+		squircle: createCornerVariant("squircle")
+	};
+});
+const variants = cva(styles.root, {
+	defaultVariants: { cornerShape: "squircle" },
+	variants: { cornerShape: {
+		circle: styles.circle,
+		ios: styles.ios,
+		sharp: styles.sharp,
+		smooth: styles.smooth,
+		square: styles.square,
+		squircle: styles.squircle
+	} }
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map

package/es/GroupAvatar/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/GroupAvatar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nimport { SMOOTH_CORNER_MASKS } from '@/utils/smoothCorners';\r\n\r\nexport const styles = createStaticStyles(({ css }) => {\r\n  const createCornerVariant = (cornerType: keyof typeof SMOOTH_CORNER_MASKS) => css`\r\n    mask-image: url('${SMOOTH_CORNER_MASKS[cornerType]}');\r\n    mask-position: center;\r\n    mask-repeat: no-repeat;\r\n    mask-size: 100% 100%;\r\n  `;\r\n\r\n  return {\r\n    circle: createCornerVariant('circle'),\r\n    ios: createCornerVariant('ios'),\r\n    root: css`\r\n      overflow: hidden;\r\n      flex: none;\r\n\r\n      /* Fallback for browsers without mask support */\r\n      border-radius: 15%;\r\n\r\n      /* Apply smooth corners mask with fallback */\r\n      @supports (mask-image: url('data:image/svg+xml;base64,')) {\r\n        border-radius: 0;\r\n      }\r\n    `,\r\n    sharp: createCornerVariant('sharp'),\r\n    smooth: createCornerVariant('smooth'),\r\n    square: createCornerVariant('square'),\r\n    squircle: createCornerVariant('squircle'),\r\n  };\r\n});\r\n\r\nexport const variants = cva(styles.root, {\r\n  defaultVariants: {\r\n    cornerShape: 'squircle',\r\n  },\r\n\r\n  variants: {\r\n    cornerShape: {\r\n      circle: styles.circle,\r\n      ios: styles.ios,\r\n      sharp: styles.sharp,\r\n      smooth: styles.smooth,\r\n      square: styles.square,\r\n      squircle: styles.squircle,\r\n    },\r\n  },\r\n});\r\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,MAAM,uBAAuB,eAAiD,GAAG;uBAC5D,oBAAoB,YAAY;;;;;CAMrD,OAAO;EACL,QAAQ,oBAAoB,QAAQ;EACpC,KAAK,oBAAoB,KAAK;EAC9B,MAAM,GAAG;;;;;;;;;;;;EAYT,OAAO,oBAAoB,OAAO;EAClC,QAAQ,oBAAoB,QAAQ;EACpC,QAAQ,oBAAoB,QAAQ;EACpC,UAAU,oBAAoB,UAAU;CAC1C;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,aAAa,WACf;CAEA,UAAU,EACR,aAAa;EACX,QAAQ,OAAO;EACf,KAAK,OAAO;EACZ,OAAO,OAAO;EACd,QAAQ,OAAO;EACf,QAAQ,OAAO;EACf,UAAU,OAAO;CACnB,EACF;AACF,CAAC"}

package/es/GroupAvatar/type.d.mts

@@ -0,0 +1,18 @@
+import { BlockProps } from "../Block/type.mjs";
+import { AvatarProps } from "../base-ui/Avatar/type.mjs";
+import "../base-ui/Avatar/index.mjs";
+import { SMOOTH_CORNER_MASKS } from "../utils/smoothCorners.mjs";
+import { Ref } from "react";
+//#region src/GroupAvatar/type.d.ts
+type AvatarItem = string | Omit<AvatarProps, 'size'>;
+interface GroupAvatarProps extends Omit<BlockProps, 'width' | 'height' | 'variant'> {
+  avatars?: AvatarItem[];
+  avatarShape?: AvatarProps['shape'];
+  cornerShape?: keyof typeof SMOOTH_CORNER_MASKS;
+  grid?: 2 | 3 | 'auto';
+  ref?: Ref<HTMLDivElement>;
+  size?: number;
+}
+//#endregion
+export { GroupAvatarProps };
+//# sourceMappingURL=type.d.mts.map