@malilion/block-ui-react 0.1.0 → 0.3.0

package/dist/utils/position.d.ts

@@ -0,0 +1,41 @@
+export type FloatingSide = "top" | "bottom" | "left" | "right";
+export type FloatingAlign = "start" | "center" | "end";
+export interface FloatingPosition {
+    /** Viewport coordinates for a `position: fixed` element. */
+    x: number;
+    y: number;
+    /** The side actually used after flipping. */
+    side: FloatingSide;
+    /** Anchor center along the floating element's edge, for an arrow. */
+    arrow: number;
+}
+interface Rect {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+    height: number;
+}
+/**
+ * Places a floating box next to an anchor: on `side` if it fits, otherwise on
+ * the opposite side (when that fits better), then slides it along the edge so
+ * it stays inside the viewport.
+ */
+export declare function computePosition({ anchor, floating, viewport, side, align, gap, margin, }: {
+    anchor: Rect;
+    floating: {
+        width: number;
+        height: number;
+    };
+    viewport: {
+        width: number;
+        height: number;
+    };
+    side: FloatingSide;
+    align?: FloatingAlign;
+    gap?: number;
+    margin?: number;
+}): FloatingPosition;
+export {};
+//# sourceMappingURL=position.d.ts.map

package/dist/utils/position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../src/utils/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,4DAA4D;IAC5D,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,6CAA6C;IAC7C,IAAI,EAAE,YAAY,CAAC;IACnB,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,IAAI;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAaD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAgB,EAChB,GAAO,EACP,MAAU,GACX,EAAE;IACD,MAAM,EAAE,IAAI,CAAC;IACb,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,gBAAgB,CAgCnB"}

package/dist/utils/position.js

@@ -0,0 +1,48 @@
+//#region src/utils/position.ts
+var OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+function clampInto(value, size, viewport, margin) {
+	return Math.max(margin, Math.min(value, viewport - margin - size));
+}
+/**
+* Places a floating box next to an anchor: on `side` if it fits, otherwise on
+* the opposite side (when that fits better), then slides it along the edge so
+* it stays inside the viewport.
+*/
+function computePosition({ anchor, floating, viewport, side, align = "center", gap = 8, margin = 8 }) {
+	const space = {
+		top: anchor.top - gap - margin,
+		bottom: viewport.height - anchor.bottom - gap - margin,
+		left: anchor.left - gap - margin,
+		right: viewport.width - anchor.right - gap - margin
+	};
+	const needed = side === "top" || side === "bottom" ? floating.height : floating.width;
+	const flipped = OPPOSITE[side];
+	const actual = space[side] < needed && space[flipped] > space[side] ? flipped : side;
+	if (actual === "top" || actual === "bottom") {
+		const y = actual === "top" ? anchor.top - gap - floating.height : anchor.bottom + gap;
+		const x = clampInto(align === "start" ? anchor.left : align === "end" ? anchor.right - floating.width : anchor.left + (anchor.width - floating.width) / 2, floating.width, viewport.width, margin);
+		return {
+			x,
+			y,
+			side: actual,
+			arrow: anchor.left + anchor.width / 2 - x
+		};
+	}
+	const x = actual === "left" ? anchor.left - gap - floating.width : anchor.right + gap;
+	const y = clampInto(align === "start" ? anchor.top : align === "end" ? anchor.bottom - floating.height : anchor.top + (anchor.height - floating.height) / 2, floating.height, viewport.height, margin);
+	return {
+		x,
+		y,
+		side: actual,
+		arrow: anchor.top + anchor.height / 2 - y
+	};
+}
+//#endregion
+export { computePosition };
+
+//# sourceMappingURL=position.js.map

package/dist/utils/position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.js","names":[],"sources":["../../src/utils/position.ts"],"sourcesContent":["export type FloatingSide = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type FloatingAlign = \"start\" | \"center\" | \"end\";\n\nexport interface FloatingPosition {\n  /** Viewport coordinates for a `position: fixed` element. */\n  x: number;\n  y: number;\n  /** The side actually used after flipping. */\n  side: FloatingSide;\n  /** Anchor center along the floating element's edge, for an arrow. */\n  arrow: number;\n}\n\ninterface Rect {\n  top: number;\n  bottom: number;\n  left: number;\n  right: number;\n  width: number;\n  height: number;\n}\n\nconst OPPOSITE: Record<FloatingSide, FloatingSide> = {\n  top: \"bottom\",\n  bottom: \"top\",\n  left: \"right\",\n  right: \"left\",\n};\n\nfunction clampInto(value: number, size: number, viewport: number, margin: number): number {\n  return Math.max(margin, Math.min(value, viewport - margin - size));\n}\n\n/**\n * Places a floating box next to an anchor: on `side` if it fits, otherwise on\n * the opposite side (when that fits better), then slides it along the edge so\n * it stays inside the viewport.\n */\nexport function computePosition({\n  anchor,\n  floating,\n  viewport,\n  side,\n  align = \"center\",\n  gap = 8,\n  margin = 8,\n}: {\n  anchor: Rect;\n  floating: { width: number; height: number };\n  viewport: { width: number; height: number };\n  side: FloatingSide;\n  align?: FloatingAlign;\n  gap?: number;\n  margin?: number;\n}): FloatingPosition {\n  const space: Record<FloatingSide, number> = {\n    top: anchor.top - gap - margin,\n    bottom: viewport.height - anchor.bottom - gap - margin,\n    left: anchor.left - gap - margin,\n    right: viewport.width - anchor.right - gap - margin,\n  };\n  const needed = side === \"top\" || side === \"bottom\" ? floating.height : floating.width;\n  const flipped = OPPOSITE[side];\n  const actual = space[side] < needed && space[flipped] > space[side] ? flipped : side;\n\n  if (actual === \"top\" || actual === \"bottom\") {\n    const y = actual === \"top\" ? anchor.top - gap - floating.height : anchor.bottom + gap;\n    const start =\n      align === \"start\"\n        ? anchor.left\n        : align === \"end\"\n          ? anchor.right - floating.width\n          : anchor.left + (anchor.width - floating.width) / 2;\n    const x = clampInto(start, floating.width, viewport.width, margin);\n    return { x, y, side: actual, arrow: anchor.left + anchor.width / 2 - x };\n  }\n\n  const x = actual === \"left\" ? anchor.left - gap - floating.width : anchor.right + gap;\n  const start =\n    align === \"start\"\n      ? anchor.top\n      : align === \"end\"\n        ? anchor.bottom - floating.height\n        : anchor.top + (anchor.height - floating.height) / 2;\n  const y = clampInto(start, floating.height, viewport.height, margin);\n  return { x, y, side: actual, arrow: anchor.top + anchor.height / 2 - y };\n}\n"],"mappings":";AAsBA,IAAM,WAA+C;CACnD,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;AACT;AAEA,SAAS,UAAU,OAAe,MAAc,UAAkB,QAAwB;CACxF,OAAO,KAAK,IAAI,QAAQ,KAAK,IAAI,OAAO,WAAW,SAAS,IAAI,CAAC;AACnE;;;;;;AAOA,SAAgB,gBAAgB,EAC9B,QACA,UACA,UACA,MACA,QAAQ,UACR,MAAM,GACN,SAAS,KASU;CACnB,MAAM,QAAsC;EAC1C,KAAK,OAAO,MAAM,MAAM;EACxB,QAAQ,SAAS,SAAS,OAAO,SAAS,MAAM;EAChD,MAAM,OAAO,OAAO,MAAM;EAC1B,OAAO,SAAS,QAAQ,OAAO,QAAQ,MAAM;CAC/C;CACA,MAAM,SAAS,SAAS,SAAS,SAAS,WAAW,SAAS,SAAS,SAAS;CAChF,MAAM,UAAU,SAAS;CACzB,MAAM,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,MAAM,QAAQ,UAAU;CAEhF,IAAI,WAAW,SAAS,WAAW,UAAU;EAC3C,MAAM,IAAI,WAAW,QAAQ,OAAO,MAAM,MAAM,SAAS,SAAS,OAAO,SAAS;EAOlF,MAAM,IAAI,UALR,UAAU,UACN,OAAO,OACP,UAAU,QACR,OAAO,QAAQ,SAAS,QACxB,OAAO,QAAQ,OAAO,QAAQ,SAAS,SAAS,GAC7B,SAAS,OAAO,SAAS,OAAO,MAAM;EACjE,OAAO;GAAE;GAAG;GAAG,MAAM;GAAQ,OAAO,OAAO,OAAO,OAAO,QAAQ,IAAI;EAAE;CACzE;CAEA,MAAM,IAAI,WAAW,SAAS,OAAO,OAAO,MAAM,SAAS,QAAQ,OAAO,QAAQ;CAOlF,MAAM,IAAI,UALR,UAAU,UACN,OAAO,MACP,UAAU,QACR,OAAO,SAAS,SAAS,SACzB,OAAO,OAAO,OAAO,SAAS,SAAS,UAAU,GAC9B,SAAS,QAAQ,SAAS,QAAQ,MAAM;CACnE,OAAO;EAAE;EAAG;EAAG,MAAM;EAAQ,OAAO,OAAO,MAAM,OAAO,SAAS,IAAI;CAAE;AACzE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malilion/block-ui-react",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Block UI — block / pixel / crafting game-style React components: inventory, crafting, HUD, cards, forms and more.",
   "license": "MIT",
   "author": "Block UI Contributors",
@@ -42,9 +42,9 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
-    "@malilion/block-ui-icons": "^0.1.0",
-    "@malilion/block-ui-themes": "^0.1.0",
-    "@malilion/block-ui-tokens": "^0.1.0"
+    "@malilion/block-ui-icons": "^0.3.0",
+    "@malilion/block-ui-themes": "^0.3.0",
+    "@malilion/block-ui-tokens": "^0.3.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.6.1",