@jinmi/ui 0.0.0-stage → 6.0.1

package/es/utils/isDeepEqual.mjs

@@ -0,0 +1,21 @@
+//#region src/utils/isDeepEqual.ts
+const isRecord = (value) => typeof value === "object" && value !== null;
+const isDeepEqual = (a, b) => {
+	if (a === b) return true;
+	if (Array.isArray(a) || Array.isArray(b)) {
+		if (!Array.isArray(a) || !Array.isArray(b)) return false;
+		if (a.length !== b.length) return false;
+		for (let i = 0; i < a.length; i++) if (!isDeepEqual(a[i], b[i])) return false;
+		return true;
+	}
+	if (!isRecord(a) || !isRecord(b)) return false;
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const key of keysA) if (!isDeepEqual(a[key], b[key])) return false;
+	return true;
+};
+//#endregion
+export { isDeepEqual };
+
+//# sourceMappingURL=isDeepEqual.mjs.map

package/es/utils/isDeepEqual.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isDeepEqual.mjs","names":[],"sources":["../../src/utils/isDeepEqual.ts"],"sourcesContent":["// Structural equality for prop/config-shaped values: primitives, plain\r\n// records, and arrays. Functions and class instances are compared by\r\n// reference (caller is expected to memoise callbacks via useCallback).\r\n// Lifted out of StreamdownRender so the same definition powers\r\n// `useStableValue` at the Markdown boundary — keep them in sync if you\r\n// extend the rules here.\r\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\r\n  typeof value === 'object' && value !== null;\r\n\r\nexport const isDeepEqual = (a: unknown, b: unknown): boolean => {\r\n  if (a === b) return true;\r\n\r\n  if (Array.isArray(a) || Array.isArray(b)) {\r\n    if (!Array.isArray(a) || !Array.isArray(b)) return false;\r\n    if (a.length !== b.length) return false;\r\n    for (let i = 0; i < a.length; i++) {\r\n      if (!isDeepEqual(a[i], b[i])) return false;\r\n    }\r\n    return true;\r\n  }\r\n\r\n  if (!isRecord(a) || !isRecord(b)) return false;\r\n\r\n  const keysA = Object.keys(a);\r\n  const keysB = Object.keys(b);\r\n  if (keysA.length !== keysB.length) return false;\r\n\r\n  for (const key of keysA) {\r\n    if (!isDeepEqual(a[key], b[key])) return false;\r\n  }\r\n\r\n  return true;\r\n};\r\n"],"mappings":";AAMA,MAAM,YAAY,UAChB,OAAO,UAAU,YAAY,UAAU;AAEzC,MAAa,eAAe,GAAY,MAAwB;CAC9D,IAAI,MAAM,GAAG,OAAO;CAEpB,IAAI,MAAM,QAAQ,CAAC,KAAK,MAAM,QAAQ,CAAC,GAAG;EACxC,IAAI,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,MAAM,QAAQ,CAAC,GAAG,OAAO;EACnD,IAAI,EAAE,WAAW,EAAE,QAAQ,OAAO;EAClC,KAAK,IAAI,IAAI,GAAG,IAAI,EAAE,QAAQ,KAC5B,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,EAAE,GAAG,OAAO;EAEvC,OAAO;CACT;CAEA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,OAAO;CAEzC,MAAM,QAAQ,OAAO,KAAK,CAAC;CAC3B,MAAM,QAAQ,OAAO,KAAK,CAAC;CAC3B,IAAI,MAAM,WAAW,MAAM,QAAQ,OAAO;CAE1C,KAAK,MAAM,OAAO,OAChB,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,GAAG,OAAO;CAG3C,OAAO;AACT"}

package/es/utils/parseTrigger.d.mts

@@ -0,0 +1,13 @@
+import { Trigger } from "../types/trigger.mjs";
+import "../types/index.mjs";
+//#region src/utils/parseTrigger.d.ts
+/**
+ * Parses trigger prop to determine hover and click behavior
+ */
+declare function parseTrigger(trigger: Trigger): {
+  openOnClick: boolean;
+  openOnHover: boolean;
+};
+//#endregion
+export { parseTrigger };
+//# sourceMappingURL=parseTrigger.d.mts.map

package/es/utils/parseTrigger.mjs

@@ -0,0 +1,16 @@
+"use client";
+//#region src/utils/parseTrigger.ts
+/**
+* Parses trigger prop to determine hover and click behavior
+*/
+function parseTrigger(trigger) {
+	const normalizedTriggers = new Set((Array.isArray(trigger) ? trigger : [trigger]).flatMap((item) => item === "both" ? ["hover", "click"] : [item]));
+	return {
+		openOnClick: normalizedTriggers.has("click"),
+		openOnHover: normalizedTriggers.has("hover")
+	};
+}
+//#endregion
+export { parseTrigger };
+
+//# sourceMappingURL=parseTrigger.mjs.map

package/es/utils/parseTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseTrigger.mjs","names":[],"sources":["../../src/utils/parseTrigger.ts"],"sourcesContent":["'use client';\r\n\r\nimport type { Trigger } from '@/types';\r\n\r\n/**\r\n * Parses trigger prop to determine hover and click behavior\r\n */\r\nexport function parseTrigger(trigger: Trigger): {\r\n  openOnClick: boolean;\r\n  openOnHover: boolean;\r\n} {\r\n  const triggers = Array.isArray(trigger) ? trigger : [trigger];\r\n  const normalizedTriggers = new Set(\r\n    triggers.flatMap((item) => (item === 'both' ? ['hover', 'click'] : [item])),\r\n  );\r\n  return {\r\n    openOnClick: normalizedTriggers.has('click'),\r\n    openOnHover: normalizedTriggers.has('hover'),\r\n  };\r\n}\r\n"],"mappings":";;;;;AAOA,SAAgB,aAAa,SAG3B;CAEA,MAAM,qBAAqB,IAAI,KADd,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,EAAA,CAEjD,SAAS,SAAU,SAAS,SAAS,CAAC,SAAS,OAAO,IAAI,CAAC,IAAI,CAAE,CAC5E;CACA,OAAO;EACL,aAAa,mBAAmB,IAAI,OAAO;EAC3C,aAAa,mBAAmB,IAAI,OAAO;CAC7C;AACF"}

package/es/utils/placement.d.mts

@@ -0,0 +1,35 @@
+import { Placement } from "@floating-ui/react";
+//#region src/utils/placement.d.ts
+/**
+ * Base UI uses a small set of string literal unions for alignment and side.
+ * We re-declare them here to avoid importing internal/non-exported Base UI paths.
+ */
+type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
+type Align = 'start' | 'center' | 'end';
+type PlacementConfig = {
+  align: Align;
+  side: Side;
+};
+/**
+ * All supported placement values
+ * - Unified placement names for Tooltip, Popover, and DropdownMenu
+ * - Ant Design style: topLeft, topCenter, topRight, etc.
+ * - Additional aliases: top (same as topCenter), bottom (same as bottomCenter)
+ */
+type Placement$1 = 'top' | 'topLeft' | 'topCenter' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+/**
+ * Map of placement values to Base UI placement config
+ * Used by Popover and DropdownMenu components
+ */
+declare const placementMap: Record<Placement$1, PlacementConfig>;
+/**
+ * Convert unified Placement to Floating UI placement format
+ * Used by Tooltip component which uses @floating-ui/react
+ *
+ * @param placement - Unified placement value
+ * @returns Floating UI placement (e.g., 'top-start', 'bottom-end')
+ */
+declare const toFloatingUIPlacement: (placement?: Placement$1) => Placement;
+//#endregion
+export { Align, Placement$1 as Placement, PlacementConfig, Side, placementMap, toFloatingUIPlacement };
+//# sourceMappingURL=placement.d.mts.map

package/es/utils/placement.mjs

@@ -0,0 +1,92 @@
+//#region src/utils/placement.ts
+const top = {
+	align: "center",
+	side: "top"
+};
+const topLeft = {
+	align: "start",
+	side: "top"
+};
+const topRight = {
+	align: "end",
+	side: "top"
+};
+const bottom = {
+	align: "center",
+	side: "bottom"
+};
+/**
+* Map of placement values to Base UI placement config
+* Used by Popover and DropdownMenu components
+*/
+const placementMap = {
+	bottom,
+	bottomCenter: bottom,
+	bottomLeft: {
+		align: "start",
+		side: "bottom"
+	},
+	bottomRight: {
+		align: "end",
+		side: "bottom"
+	},
+	left: {
+		align: "center",
+		side: "left"
+	},
+	leftBottom: {
+		align: "end",
+		side: "left"
+	},
+	leftTop: {
+		align: "start",
+		side: "left"
+	},
+	right: {
+		align: "center",
+		side: "right"
+	},
+	rightBottom: {
+		align: "end",
+		side: "right"
+	},
+	rightTop: {
+		align: "start",
+		side: "right"
+	},
+	top,
+	topCenter: top,
+	topLeft,
+	topRight
+};
+/**
+* Convert unified Placement to Floating UI placement format
+* Used by Tooltip component which uses @floating-ui/react
+*
+* @param placement - Unified placement value
+* @returns Floating UI placement (e.g., 'top-start', 'bottom-end')
+*/
+const toFloatingUIPlacement = (placement) => {
+	if (!placement) return "top";
+	switch (placement) {
+		case "topLeft": return "top-start";
+		case "top":
+		case "topCenter": return "top";
+		case "topRight": return "top-end";
+		case "bottomLeft": return "bottom-start";
+		case "bottom":
+		case "bottomCenter": return "bottom";
+		case "bottomRight": return "bottom-end";
+		case "leftTop": return "left-start";
+		case "left": return "left";
+		case "leftBottom": return "left-end";
+		case "rightTop": return "right-start";
+		case "right": return "right";
+		case "rightBottom": return "right-end";
+		default: return "top";
+	}
+};
+//#endregion
+export { placementMap, toFloatingUIPlacement };
+
+//# sourceMappingURL=placement.mjs.map

package/es/utils/placement.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.mjs","names":[],"sources":["../../src/utils/placement.ts"],"sourcesContent":["import type { Placement as FloatingUIPlacement } from '@floating-ui/react';\r\n\r\n/**\r\n * Base UI uses a small set of string literal unions for alignment and side.\r\n * We re-declare them here to avoid importing internal/non-exported Base UI paths.\r\n */\r\nexport type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';\r\nexport type Align = 'start' | 'center' | 'end';\r\n\r\nexport type PlacementConfig = {\r\n  align: Align;\r\n  side: Side;\r\n};\r\n\r\n/**\r\n * All supported placement values\r\n * - Unified placement names for Tooltip, Popover, and DropdownMenu\r\n * - Ant Design style: topLeft, topCenter, topRight, etc.\r\n * - Additional aliases: top (same as topCenter), bottom (same as bottomCenter)\r\n */\r\nexport type Placement =\r\n  | 'top'\r\n  | 'topLeft'\r\n  | 'topCenter'\r\n  | 'topRight'\r\n  | 'bottom'\r\n  | 'bottomLeft'\r\n  | 'bottomCenter'\r\n  | 'bottomRight'\r\n  | 'left'\r\n  | 'leftTop'\r\n  | 'leftBottom'\r\n  | 'right'\r\n  | 'rightTop'\r\n  | 'rightBottom';\r\n\r\nconst top: PlacementConfig = { align: 'center', side: 'top' };\r\nconst topLeft: PlacementConfig = { align: 'start', side: 'top' };\r\nconst topRight: PlacementConfig = { align: 'end', side: 'top' };\r\nconst bottom: PlacementConfig = { align: 'center', side: 'bottom' };\r\nconst bottomLeft: PlacementConfig = { align: 'start', side: 'bottom' };\r\nconst bottomRight: PlacementConfig = { align: 'end', side: 'bottom' };\r\nconst left: PlacementConfig = { align: 'center', side: 'left' };\r\nconst leftTop: PlacementConfig = { align: 'start', side: 'left' };\r\nconst leftBottom: PlacementConfig = { align: 'end', side: 'left' };\r\nconst right: PlacementConfig = { align: 'center', side: 'right' };\r\nconst rightTop: PlacementConfig = { align: 'start', side: 'right' };\r\nconst rightBottom: PlacementConfig = { align: 'end', side: 'right' };\r\n\r\n/**\r\n * Map of placement values to Base UI placement config\r\n * Used by Popover and DropdownMenu components\r\n */\r\nexport const placementMap: Record<Placement, PlacementConfig> = {\r\n  bottom,\r\n  bottomCenter: bottom,\r\n  bottomLeft,\r\n  bottomRight,\r\n  left,\r\n  leftBottom,\r\n  leftTop,\r\n  right,\r\n  rightBottom,\r\n  rightTop,\r\n  top,\r\n  topCenter: top,\r\n  topLeft,\r\n  topRight,\r\n};\r\n\r\n/**\r\n * Convert unified Placement to Floating UI placement format\r\n * Used by Tooltip component which uses @floating-ui/react\r\n *\r\n * @param placement - Unified placement value\r\n * @returns Floating UI placement (e.g., 'top-start', 'bottom-end')\r\n */\r\nexport const toFloatingUIPlacement = (placement?: Placement): FloatingUIPlacement => {\r\n  if (!placement) return 'top';\r\n\r\n  switch (placement) {\r\n    case 'topLeft': {\r\n      return 'top-start';\r\n    }\r\n    case 'top':\r\n    case 'topCenter': {\r\n      return 'top';\r\n    }\r\n    case 'topRight': {\r\n      return 'top-end';\r\n    }\r\n    case 'bottomLeft': {\r\n      return 'bottom-start';\r\n    }\r\n    case 'bottom':\r\n    case 'bottomCenter': {\r\n      return 'bottom';\r\n    }\r\n    case 'bottomRight': {\r\n      return 'bottom-end';\r\n    }\r\n    case 'leftTop': {\r\n      return 'left-start';\r\n    }\r\n    case 'left': {\r\n      return 'left';\r\n    }\r\n    case 'leftBottom': {\r\n      return 'left-end';\r\n    }\r\n    case 'rightTop': {\r\n      return 'right-start';\r\n    }\r\n    case 'right': {\r\n      return 'right';\r\n    }\r\n    case 'rightBottom': {\r\n      return 'right-end';\r\n    }\r\n    default: {\r\n      return 'top';\r\n    }\r\n  }\r\n};\r\n"],"mappings":";AAoCA,MAAM,MAAuB;CAAE,OAAO;CAAU,MAAM;AAAM;AAC5D,MAAM,UAA2B;CAAE,OAAO;CAAS,MAAM;AAAM;AAC/D,MAAM,WAA4B;CAAE,OAAO;CAAO,MAAM;AAAM;AAC9D,MAAM,SAA0B;CAAE,OAAO;CAAU,MAAM;AAAS;;;;;AAclE,MAAa,eAAmD;CAC9D;CACA,cAAc;CACd;EAhBoC,OAAO;EAAS,MAAM;CAgB1D;CACA;EAhBqC,OAAO;EAAO,MAAM;CAgBzD;CACA;EAhB8B,OAAO;EAAU,MAAM;CAgBrD;CACA;EAfoC,OAAO;EAAO,MAAM;CAexD;CACA;EAjBiC,OAAO;EAAS,MAAM;CAiBvD;CACA;EAhB+B,OAAO;EAAU,MAAM;CAgBtD;CACA;EAfqC,OAAO;EAAO,MAAM;CAezD;CACA;EAjBkC,OAAO;EAAS,MAAM;CAiBxD;CACA;CACA,WAAW;CACX;CACA;AACF;;;;;;;;AASA,MAAa,yBAAyB,cAA+C;CACnF,IAAI,CAAC,WAAW,OAAO;CAEvB,QAAQ,WAAR;EACE,KAAK,WACH,OAAO;EAET,KAAK;EACL,KAAK,aACH,OAAO;EAET,KAAK,YACH,OAAO;EAET,KAAK,cACH,OAAO;EAET,KAAK;EACL,KAAK,gBACH,OAAO;EAET,KAAK,eACH,OAAO;EAET,KAAK,WACH,OAAO;EAET,KAAK,QACH,OAAO;EAET,KAAK,cACH,OAAO;EAET,KAAK,YACH,OAAO;EAET,KAAK,SACH,OAAO;EAET,KAAK,eACH,OAAO;EAET,SACE,OAAO;CAEX;AACF"}

package/es/utils/safeParseJSON.mjs

@@ -0,0 +1,15 @@
+//#region src/utils/safeParseJSON.ts
+const safeParseJSON = (text) => {
+	if (typeof text !== "string") return;
+	let json;
+	try {
+		json = JSON.parse(text);
+	} catch {
+		return;
+	}
+	return json;
+};
+//#endregion
+export { safeParseJSON };
+
+//# sourceMappingURL=safeParseJSON.mjs.map

package/es/utils/safeParseJSON.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"safeParseJSON.mjs","names":[],"sources":["../../src/utils/safeParseJSON.ts"],"sourcesContent":["export const safeParseJSON = <T = Record<string, any>>(text?: string) => {\r\n  if (typeof text !== 'string') return;\r\n\r\n  let json: T;\r\n  try {\r\n    json = JSON.parse(text);\r\n  } catch {\r\n    return;\r\n  }\r\n\r\n  return json;\r\n};\r\n"],"mappings":";AAAA,MAAa,iBAA0C,SAAkB;CACvE,IAAI,OAAO,SAAS,UAAU;CAE9B,IAAI;CACJ,IAAI;EACF,OAAO,KAAK,MAAM,IAAI;CACxB,QAAQ;EACN;CACF;CAEA,OAAO;AACT"}

package/es/utils/safeReadableColor.mjs

@@ -0,0 +1,6 @@
+//#region src/utils/safeReadableColor.ts
+const safeReadableColor = (bgColor) => `oklch(from ${bgColor} clamp(0, (l - 0.62) * -1000, 1) 0 h / 1)`;
+//#endregion
+export { safeReadableColor };
+
+//# sourceMappingURL=safeReadableColor.mjs.map

package/es/utils/safeReadableColor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"safeReadableColor.mjs","names":[],"sources":["../../src/utils/safeReadableColor.ts"],"sourcesContent":["export const safeReadableColor = (bgColor: string): string =>\r\n  `oklch(from ${bgColor} clamp(0, (l - 0.62) * -1000, 1) 0 h / 1)`;\r\n"],"mappings":";AAAA,MAAa,qBAAqB,YAChC,cAAc,QAAQ"}

package/es/utils/smoothCorners.d.mts

@@ -0,0 +1,16 @@
+import { CSSProperties } from "react";
+//#region src/utils/smoothCorners.d.ts
+/**
+ * Predefined smooth corners masks for common corner values
+ */
+declare const SMOOTH_CORNER_MASKS: {
+  readonly circle: string;
+  readonly ios: string;
+  readonly sharp: string;
+  readonly smooth: string;
+  readonly square: string;
+  readonly squircle: string;
+};
+//#endregion
+export { SMOOTH_CORNER_MASKS };
+//# sourceMappingURL=smoothCorners.d.mts.map

package/es/utils/smoothCorners.mjs

@@ -0,0 +1,78 @@
+//#region src/utils/smoothCorners.ts
+/**
+* Smooth Corners utility using Base64 SVG mask
+* A simpler alternative to CSS Houdini Paint API
+*/
+/**
+* Generate a smooth corners SVG path using superellipse formula
+* @param size - The size of the shape
+* @param n - The superellipse exponent (4 = squircle, 5 = iOS style)
+*/
+const generateSuperellipsePath = (size, n = 4) => {
+	const r = size / 2;
+	const points = [];
+	for (let i = 0; i <= 360; i += 2) {
+		const angle = i * Math.PI / 180;
+		const cosAngle = Math.cos(angle);
+		const sinAngle = Math.sin(angle);
+		const x = r * Math.sign(cosAngle) * Math.pow(Math.abs(cosAngle), 2 / n);
+		const y = r * Math.sign(sinAngle) * Math.pow(Math.abs(sinAngle), 2 / n);
+		points.push(`${r + x},${r + y}`);
+	}
+	return `M${points[0]}L${points.slice(1).join("L")}Z`;
+};
+/**
+* Create a Base64 encoded SVG mask for smooth corners
+* @param options - Configuration options
+*/
+const createSmoothCornersMask = (options = {}) => {
+	const { size = 100, cornerValue = 4 } = options;
+	const svg = `
+    <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+      <path d="${generateSuperellipsePath(size, cornerValue)}" fill="white"/>
+    </svg>
+  `.trim().replaceAll(/\s+/g, " ");
+	return `data:image/svg+xml;base64,${btoa(svg)}`;
+};
+/**
+* Create a Base64 encoded SVG mask for circle shape
+* @param options - Configuration options
+*/
+const createCircleMask = (options = {}) => {
+	const { size = 100 } = options;
+	const r = size / 2;
+	const svg = `
+    <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="${r}" cy="${r}" r="${r}" fill="white"/>
+    </svg>
+  `.trim().replaceAll(/\s+/g, " ");
+	return `data:image/svg+xml;base64,${btoa(svg)}`;
+};
+/**
+* Create a Base64 encoded SVG mask for rounded rectangle
+* @param options - Configuration options
+*/
+const createRoundedRectMask = (options = {}) => {
+	const { size = 100, borderRadius = 15 } = options;
+	const svg = `
+    <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0" y="0" width="${size}" height="${size}" rx="${borderRadius}" ry="${borderRadius}" fill="white"/>
+    </svg>
+  `.trim().replaceAll(/\s+/g, " ");
+	return `data:image/svg+xml;base64,${btoa(svg)}`;
+};
+/**
+* Predefined smooth corners masks for common corner values
+*/
+const SMOOTH_CORNER_MASKS = {
+	circle: createCircleMask(),
+	ios: createSmoothCornersMask({ cornerValue: 5 }),
+	sharp: createSmoothCornersMask({ cornerValue: 6 }),
+	smooth: createSmoothCornersMask({ cornerValue: 3 }),
+	square: createRoundedRectMask({ borderRadius: 15 }),
+	squircle: createSmoothCornersMask({ cornerValue: 4 })
+};
+//#endregion
+export { SMOOTH_CORNER_MASKS, createCircleMask, createRoundedRectMask, createSmoothCornersMask };
+
+//# sourceMappingURL=smoothCorners.mjs.map

package/es/utils/smoothCorners.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"smoothCorners.mjs","names":[],"sources":["../../src/utils/smoothCorners.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\r\n\r\n/**\r\n * Smooth Corners utility using Base64 SVG mask\r\n * A simpler alternative to CSS Houdini Paint API\r\n */\r\n\r\n/**\r\n * Generate a smooth corners SVG path using superellipse formula\r\n * @param size - The size of the shape\r\n * @param n - The superellipse exponent (4 = squircle, 5 = iOS style)\r\n */\r\nconst generateSuperellipsePath = (size: number, n: number = 4): string => {\r\n  const r = size / 2;\r\n  const points: string[] = [];\r\n\r\n  // Generate points for the superellipse\r\n  for (let i = 0; i <= 360; i += 2) {\r\n    const angle = (i * Math.PI) / 180;\r\n    const cosAngle = Math.cos(angle);\r\n    const sinAngle = Math.sin(angle);\r\n\r\n    // Superellipse formula\r\n    const x = r * Math.sign(cosAngle) * Math.pow(Math.abs(cosAngle), 2 / n);\r\n    const y = r * Math.sign(sinAngle) * Math.pow(Math.abs(sinAngle), 2 / n);\r\n\r\n    points.push(`${r + x},${r + y}`);\r\n  }\r\n\r\n  return `M${points[0]}L${points.slice(1).join('L')}Z`;\r\n};\r\n\r\n/**\r\n * Create a Base64 encoded SVG mask for smooth corners\r\n * @param options - Configuration options\r\n */\r\nexport const createSmoothCornersMask = (\r\n  options: {\r\n    cornerValue?: number;\r\n    size?: number;\r\n  } = {},\r\n): string => {\r\n  const { size = 100, cornerValue = 4 } = options;\r\n\r\n  const path = generateSuperellipsePath(size, cornerValue);\r\n\r\n  const svg = `\r\n    <svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 ${size} ${size}\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path d=\"${path}\" fill=\"white\"/>\r\n    </svg>\r\n  `\r\n    .trim()\r\n    .replaceAll(/\\s+/g, ' ');\r\n\r\n  return `data:image/svg+xml;base64,${btoa(svg)}`;\r\n};\r\n\r\n/**\r\n * Create a Base64 encoded SVG mask for circle shape\r\n * @param options - Configuration options\r\n */\r\nexport const createCircleMask = (\r\n  options: {\r\n    size?: number;\r\n  } = {},\r\n): string => {\r\n  const { size = 100 } = options;\r\n  const r = size / 2;\r\n\r\n  const svg = `\r\n    <svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 ${size} ${size}\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <circle cx=\"${r}\" cy=\"${r}\" r=\"${r}\" fill=\"white\"/>\r\n    </svg>\r\n  `\r\n    .trim()\r\n    .replaceAll(/\\s+/g, ' ');\r\n\r\n  return `data:image/svg+xml;base64,${btoa(svg)}`;\r\n};\r\n\r\n/**\r\n * Create a Base64 encoded SVG mask for rounded rectangle\r\n * @param options - Configuration options\r\n */\r\nexport const createRoundedRectMask = (\r\n  options: {\r\n    borderRadius?: number;\r\n    size?: number;\r\n  } = {},\r\n): string => {\r\n  const { size = 100, borderRadius = 15 } = options;\r\n\r\n  const svg = `\r\n    <svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 ${size} ${size}\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <rect x=\"0\" y=\"0\" width=\"${size}\" height=\"${size}\" rx=\"${borderRadius}\" ry=\"${borderRadius}\" fill=\"white\"/>\r\n    </svg>\r\n  `\r\n    .trim()\r\n    .replaceAll(/\\s+/g, ' ');\r\n\r\n  return `data:image/svg+xml;base64,${btoa(svg)}`;\r\n};\r\n\r\n/**\r\n * Predefined smooth corners masks for common corner values\r\n */\r\nexport const SMOOTH_CORNER_MASKS = {\r\n  // Basic shapes\r\n  circle: createCircleMask(),\r\n  // Superellipse shapes\r\n  ios: createSmoothCornersMask({ cornerValue: 5 }),\r\n\r\n  sharp: createSmoothCornersMask({ cornerValue: 6 }),\r\n  smooth: createSmoothCornersMask({ cornerValue: 3 }),\r\n  square: createRoundedRectMask({ borderRadius: 15 }),\r\n  squircle: createSmoothCornersMask({ cornerValue: 4 }),\r\n} as const;\r\n\r\n/**\r\n * CSS helper to apply smooth corners mask\r\n */\r\nexport const getSmoothCornersMaskStyle = (\r\n  cornerType: keyof typeof SMOOTH_CORNER_MASKS = 'squircle',\r\n): CSSProperties => {\r\n  return {\r\n    // WebKit prefix for better browser support\r\n    WebkitMaskImage: `url(\"${SMOOTH_CORNER_MASKS[cornerType]}\")`,\r\n\r\n    WebkitMaskPosition: 'center',\r\n\r\n    WebkitMaskRepeat: 'no-repeat',\r\n\r\n    WebkitMaskSize: '100% 100%',\r\n\r\n    maskImage: `url(\"${SMOOTH_CORNER_MASKS[cornerType]}\")`,\r\n    maskPosition: 'center',\r\n    maskRepeat: 'no-repeat',\r\n    maskSize: '100% 100%',\r\n  } as CSSProperties;\r\n};\r\n"],"mappings":";;;;;;;;;;AAYA,MAAM,4BAA4B,MAAc,IAAY,MAAc;CACxE,MAAM,IAAI,OAAO;CACjB,MAAM,SAAmB,CAAC;CAG1B,KAAK,IAAI,IAAI,GAAG,KAAK,KAAK,KAAK,GAAG;EAChC,MAAM,QAAS,IAAI,KAAK,KAAM;EAC9B,MAAM,WAAW,KAAK,IAAI,KAAK;EAC/B,MAAM,WAAW,KAAK,IAAI,KAAK;EAG/B,MAAM,IAAI,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,CAAC;EACtE,MAAM,IAAI,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,CAAC;EAEtE,OAAO,KAAK,GAAG,IAAI,EAAE,GAAG,IAAI,GAAG;CACjC;CAEA,OAAO,IAAI,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AACpD;;;;;AAMA,MAAa,2BACX,UAGI,CAAC,MACM;CACX,MAAM,EAAE,OAAO,KAAK,cAAc,MAAM;CAIxC,MAAM,MAAM;kBACI,KAAK,YAAY,KAAK,iBAAiB,KAAK,GAAG,KAAK;iBAHvD,yBAAyB,MAAM,WAI1B,EAAE;;IAGjB,KAAK,CAAC,CACN,WAAW,QAAQ,GAAG;CAEzB,OAAO,6BAA6B,KAAK,GAAG;AAC9C;;;;;AAMA,MAAa,oBACX,UAEI,CAAC,MACM;CACX,MAAM,EAAE,OAAO,QAAQ;CACvB,MAAM,IAAI,OAAO;CAEjB,MAAM,MAAM;kBACI,KAAK,YAAY,KAAK,iBAAiB,KAAK,GAAG,KAAK;oBAClD,EAAE,QAAQ,EAAE,OAAO,EAAE;;IAGpC,KAAK,CAAC,CACN,WAAW,QAAQ,GAAG;CAEzB,OAAO,6BAA6B,KAAK,GAAG;AAC9C;;;;;AAMA,MAAa,yBACX,UAGI,CAAC,MACM;CACX,MAAM,EAAE,OAAO,KAAK,eAAe,OAAO;CAE1C,MAAM,MAAM;kBACI,KAAK,YAAY,KAAK,iBAAiB,KAAK,GAAG,KAAK;iCACrC,KAAK,YAAY,KAAK,QAAQ,aAAa,QAAQ,aAAa;;IAG5F,KAAK,CAAC,CACN,WAAW,QAAQ,GAAG;CAEzB,OAAO,6BAA6B,KAAK,GAAG;AAC9C;;;;AAKA,MAAa,sBAAsB;CAEjC,QAAQ,iBAAiB;CAEzB,KAAK,wBAAwB,EAAE,aAAa,EAAE,CAAC;CAE/C,OAAO,wBAAwB,EAAE,aAAa,EAAE,CAAC;CACjD,QAAQ,wBAAwB,EAAE,aAAa,EAAE,CAAC;CAClD,QAAQ,sBAAsB,EAAE,cAAc,GAAG,CAAC;CAClD,UAAU,wBAAwB,EAAE,aAAa,EAAE,CAAC;AACtD"}

package/es/utils/useRepopOnFarTriggerSwitch.mjs

@@ -0,0 +1,62 @@
+import { useLayoutEffect, useRef, useState } from "react";
+const REPOP_ANIMATION = [[{
+	opacity: 0,
+	scale: .97
+}, {
+	opacity: 1,
+	scale: 1
+}], {
+	duration: 200,
+	easing: "cubic-bezier(0.33, 1, 0.68, 1)"
+}];
+const centerOf = (el) => {
+	const rect = el.getBoundingClientRect();
+	return {
+		x: rect.left + rect.width / 2,
+		y: rect.top + rect.height / 2
+	};
+};
+const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const useRepopOnFarTriggerSwitch = (store, options) => {
+	const enabled = options?.enabled ?? true;
+	const threshold = options?.threshold ?? 280;
+	const activeTrigger = store.useState?.("activeTriggerElement") ?? store.state.activeTriggerElement ?? null;
+	const open = store.useState?.("open") ?? Boolean(store.state.open);
+	const popupElement = store.useState?.("popupElement") ?? store.state.popupElement ?? null;
+	const lastRef = useRef({
+		center: null,
+		el: null
+	});
+	const [repop, setRepop] = useState(false);
+	useLayoutEffect(() => {
+		if (!open || !enabled) {
+			lastRef.current = {
+				center: null,
+				el: null
+			};
+			setRepop(false);
+			return;
+		}
+		const last = lastRef.current;
+		if (activeTrigger === last.el) return;
+		const center = activeTrigger ? centerOf(activeTrigger) : null;
+		const far = Boolean(last.el && last.center && center && Math.hypot(center.x - last.center.x, center.y - last.center.y) > threshold);
+		lastRef.current = {
+			center,
+			el: activeTrigger
+		};
+		setRepop(far);
+		if (far && popupElement && !prefersReducedMotion()) popupElement.animate?.(...REPOP_ANIMATION);
+	}, [
+		activeTrigger,
+		enabled,
+		open,
+		popupElement,
+		threshold
+	]);
+	return repop;
+};
+//#endregion
+export { useRepopOnFarTriggerSwitch };
+
+//# sourceMappingURL=useRepopOnFarTriggerSwitch.mjs.map

package/es/utils/useRepopOnFarTriggerSwitch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRepopOnFarTriggerSwitch.mjs","names":[],"sources":["../../src/utils/useRepopOnFarTriggerSwitch.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\r\n\r\ntype PopupStoreLike = {\r\n  state: {\r\n    activeTriggerElement?: Element | null;\r\n    open?: boolean;\r\n    popupElement?: HTMLElement | null;\r\n  };\r\n  useState?: (...args: any[]) => unknown;\r\n};\r\n\r\nexport const FAR_TRIGGER_SWITCH_THRESHOLD = 280;\r\n\r\nconst REPOP_ANIMATION: [Keyframe[], KeyframeAnimationOptions] = [\r\n  [\r\n    { opacity: 0, scale: 0.97 },\r\n    { opacity: 1, scale: 1 },\r\n  ],\r\n  { duration: 200, easing: 'cubic-bezier(0.33, 1, 0.68, 1)' },\r\n];\r\n\r\nconst centerOf = (el: Element) => {\r\n  const rect = el.getBoundingClientRect();\r\n  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };\r\n};\r\n\r\nconst prefersReducedMotion = () =>\r\n  typeof window !== 'undefined' &&\r\n  typeof window.matchMedia === 'function' &&\r\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n// A morph across a long distance reads as a stray box flying over the page, so past `threshold`\r\n// the switch is made instant and the popup re-plays a short enter animation at the new anchor.\r\nexport const useRepopOnFarTriggerSwitch = (\r\n  store: PopupStoreLike,\r\n  options?: { enabled?: boolean; threshold?: number },\r\n): boolean => {\r\n  const enabled = options?.enabled ?? true;\r\n  const threshold = options?.threshold ?? FAR_TRIGGER_SWITCH_THRESHOLD;\r\n\r\n  const activeTrigger =\r\n    (store.useState?.('activeTriggerElement') as Element | null | undefined) ??\r\n    store.state.activeTriggerElement ??\r\n    null;\r\n  const open = (store.useState?.('open') as boolean | undefined) ?? Boolean(store.state.open);\r\n  const popupElement =\r\n    (store.useState?.('popupElement') as HTMLElement | null | undefined) ??\r\n    store.state.popupElement ??\r\n    null;\r\n\r\n  const lastRef = useRef<{ center: { x: number; y: number } | null; el: Element | null }>({\r\n    center: null,\r\n    el: null,\r\n  });\r\n  const [repop, setRepop] = useState(false);\r\n\r\n  useLayoutEffect(() => {\r\n    if (!open || !enabled) {\r\n      lastRef.current = { center: null, el: null };\r\n      setRepop(false);\r\n      return;\r\n    }\r\n    const last = lastRef.current;\r\n    if (activeTrigger === last.el) return;\r\n\r\n    const center = activeTrigger ? centerOf(activeTrigger) : null;\r\n    const far = Boolean(\r\n      last.el &&\r\n      last.center &&\r\n      center &&\r\n      Math.hypot(center.x - last.center.x, center.y - last.center.y) > threshold,\r\n    );\r\n    lastRef.current = { center, el: activeTrigger };\r\n    setRepop(far);\r\n\r\n    if (far && popupElement && !prefersReducedMotion()) {\r\n      popupElement.animate?.(...REPOP_ANIMATION);\r\n    }\r\n  }, [activeTrigger, enabled, open, popupElement, threshold]);\r\n\r\n  return repop;\r\n};\r\n"],"mappings":";AAaA,MAAM,kBAA0D,CAC9D,CACE;CAAE,SAAS;CAAG,OAAO;AAAK,GAC1B;CAAE,SAAS;CAAG,OAAO;AAAE,CACzB,GACA;CAAE,UAAU;CAAK,QAAQ;AAAiC,CAC5D;AAEA,MAAM,YAAY,OAAgB;CAChC,MAAM,OAAO,GAAG,sBAAsB;CACtC,OAAO;EAAE,GAAG,KAAK,OAAO,KAAK,QAAQ;EAAG,GAAG,KAAK,MAAM,KAAK,SAAS;CAAE;AACxE;AAEA,MAAM,6BACJ,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAIxD,MAAa,8BACX,OACA,YACY;CACZ,MAAM,UAAU,SAAS,WAAW;CACpC,MAAM,YAAY,SAAS,aAAA;CAE3B,MAAM,gBACH,MAAM,WAAW,sBAAsB,KACxC,MAAM,MAAM,wBACZ;CACF,MAAM,OAAQ,MAAM,WAAW,MAAM,KAA6B,QAAQ,MAAM,MAAM,IAAI;CAC1F,MAAM,eACH,MAAM,WAAW,cAAc,KAChC,MAAM,MAAM,gBACZ;CAEF,MAAM,UAAU,OAAwE;EACtF,QAAQ;EACR,IAAI;CACN,CAAC;CACD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CAExC,sBAAsB;EACpB,IAAI,CAAC,QAAQ,CAAC,SAAS;GACrB,QAAQ,UAAU;IAAE,QAAQ;IAAM,IAAI;GAAK;GAC3C,SAAS,KAAK;GACd;EACF;EACA,MAAM,OAAO,QAAQ;EACrB,IAAI,kBAAkB,KAAK,IAAI;EAE/B,MAAM,SAAS,gBAAgB,SAAS,aAAa,IAAI;EACzD,MAAM,MAAM,QACV,KAAK,MACL,KAAK,UACL,UACA,KAAK,MAAM,OAAO,IAAI,KAAK,OAAO,GAAG,OAAO,IAAI,KAAK,OAAO,CAAC,IAAI,SACnE;EACA,QAAQ,UAAU;GAAE;GAAQ,IAAI;EAAc;EAC9C,SAAS,GAAG;EAEZ,IAAI,OAAO,gBAAgB,CAAC,qBAAqB,GAC/C,aAAa,UAAU,GAAG,eAAe;CAE7C,GAAG;EAAC;EAAe;EAAS;EAAM;EAAc;CAAS,CAAC;CAE1D,OAAO;AACT"}