@malilion/block-ui-react 0.1.0 → 0.2.0

package/dist/styles.css

@@ -730,6 +730,105 @@
   padding-top: 0;
   filter: drop-shadow(1px 1px 0 var(--block-border));
 }
+.block-root-YWJbx {
+  position: relative;
+  display: inline-flex;
+}
+
+.block-chevron-KdTgQ {
+  display: inline-flex;
+  transition: transform var(--block-duration-instant) var(--block-ease-step);
+}
+
+.block-root-YWJbx[data-open] .block-chevron-KdTgQ {
+  transform: rotate(180deg);
+}
+
+.block-menu-KgvDw {
+  position: fixed;
+  top: var(--block-float-y, 0);
+  left: var(--block-float-x, 0);
+  z-index: var(--block-z-dropdown);
+  display: flex;
+  flex-direction: column;
+  min-width: max(var(--block-float-anchor-width, 0px), 200px);
+  max-width: min(320px, calc(100vw - var(--block-space-4)));
+  max-height: calc(100vh - var(--block-space-4));
+  overflow-y: auto;
+  padding: var(--block-space-1);
+  background-color: var(--block-surface);
+  border: var(--block-border-width) solid var(--block-border);
+  box-shadow: var(--block-shadow-bevel), var(--block-shadow-drop);
+}
+
+.block-menu-KgvDw[hidden] {
+  display: none;
+}
+
+.block-item-u39c- {
+  display: flex;
+  align-items: center;
+  gap: var(--block-space-2);
+  width: 100%;
+  min-height: var(--block-size-control-sm);
+  padding: var(--block-space-1) var(--block-space-2);
+  font: inherit;
+  font-size: var(--block-font-size-sm);
+  font-weight: var(--block-font-weight-medium);
+  text-align: left;
+  color: var(--block-text);
+  background: transparent;
+  border: var(--block-border-width-thin) solid transparent;
+  cursor: pointer;
+}
+
+.block-item-u39c-:hover:not([aria-disabled]),
+.block-item-u39c-:focus-visible {
+  background-color: var(--block-slot-hover);
+  border-color: var(--block-border);
+}
+
+.block-item-u39c-:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: -3px;
+}
+
+.block-item-u39c-[aria-disabled] {
+  color: var(--block-text-muted);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.block-item-u39c-[data-danger] {
+  color: var(--block-redstone-light);
+}
+
+.block-icon-OVCC3 {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 16px;
+}
+
+.block-label-r-rZl {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.block-shortcut-5Sekq {
+  flex-shrink: 0;
+  margin-left: var(--block-space-3);
+  font-family: var(--block-font-mono);
+  font-size: var(--block-font-size-xs);
+  color: var(--block-text-muted);
+}
+
+.block-separator-xmDN6 {
+  height: 4px;
+  margin: var(--block-space-1) 0;
+  background-color: var(--block-shadow-bevel-dark);
+  box-shadow: inset -2px -2px 0 var(--block-shadow-bevel-light);
+}
 .block-field-mjy2g {
   display: flex;
   flex-direction: column;
@@ -2549,6 +2648,221 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
 .block-play-3bOpR {
   flex-shrink: 0;
 }
+.block-anchor-3LOJ3 {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.block-tooltip-K9Jn9 {
+  position: fixed;
+  top: var(--block-float-y, 0);
+  left: var(--block-float-x, 0);
+  z-index: var(--block-z-tooltip);
+  width: max-content;
+  max-width: min(280px, calc(100vw - var(--block-space-4)));
+  padding: var(--block-space-1) var(--block-space-2);
+  font-family: var(--block-font-body);
+  font-size: var(--block-font-size-sm);
+  font-weight: var(--block-font-weight-medium);
+  line-height: var(--block-line-height-tight);
+  text-align: left;
+  text-transform: none;
+  white-space: normal;
+  color: var(--block-text-primary);
+  background-color: var(--block-obsidian-dark);
+  border: var(--block-border-width-thin) solid var(--block-black);
+  box-shadow:
+    inset 0 0 0 2px var(--block-obsidian-light),
+    var(--block-shadow-drop);
+}
+
+.block-tooltip-K9Jn9[hidden] {
+  display: none;
+}
+
+.block-tooltip-K9Jn9[data-size="sm"] {
+  max-width: min(200px, calc(100vw - var(--block-space-4)));
+}
+
+/* Pixel arrow, aligned with the anchor's center even when the box slides. */
+.block-tooltip-K9Jn9::after {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--block-obsidian-light);
+}
+
+.block-tooltip-K9Jn9[data-placement="top"]::after,
+.block-tooltip-K9Jn9[data-placement="bottom"]::after {
+  left: calc(var(--block-float-arrow, 50%) - 4px);
+}
+
+.block-tooltip-K9Jn9[data-placement="left"]::after,
+.block-tooltip-K9Jn9[data-placement="right"]::after {
+  top: calc(var(--block-float-arrow, 50%) - 4px);
+}
+
+.block-tooltip-K9Jn9[data-placement="top"]::after {
+  top: 100%;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
+.block-tooltip-K9Jn9[data-placement="bottom"]::after {
+  bottom: 100%;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+.block-tooltip-K9Jn9[data-placement="left"]::after {
+  left: 100%;
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+
+.block-tooltip-K9Jn9[data-placement="right"]::after {
+  right: 100%;
+  clip-path: polygon(100% 0, 100% 100%, 0 50%);
+}
+.block-wrapper-tQfa- {
+  max-width: 100%;
+  overflow-x: auto;
+  background-color: var(--block-surface);
+  border: var(--block-border-width) solid var(--block-border);
+  box-shadow: var(--block-shadow-bevel);
+  scrollbar-width: thin;
+}
+
+.block-wrapper-tQfa-:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: 2px;
+}
+
+.block-table-x1Qnx {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--block-font-size-sm);
+  color: var(--block-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.block-caption-T-Obe {
+  padding: var(--block-space-2) var(--block-space-3);
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-md);
+  font-weight: var(--block-font-weight-bold);
+  letter-spacing: var(--block-letter-spacing-wide);
+  text-align: left;
+  text-transform: uppercase;
+  text-shadow: var(--block-shadow-text);
+  background-color: var(--block-surface-header);
+  border-bottom: var(--block-border-width-thin) solid var(--block-border);
+}
+
+.block-col-L7kx6 {
+  width: var(--block-table-col-width);
+}
+
+.block-headerCell-LQKy8 {
+  padding: var(--block-space-2) var(--block-space-3);
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-xs);
+  font-weight: var(--block-font-weight-bold);
+  letter-spacing: var(--block-letter-spacing-wide);
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--block-text-muted);
+  background-color: var(--block-surface-alt);
+  border-bottom: var(--block-border-width) solid var(--block-border);
+}
+
+.block-sticky-M7fKZ {
+  overflow: visible;
+}
+
+.block-sticky-M7fKZ .block-headerCell-LQKy8 {
+  position: sticky;
+  top: 0;
+  z-index: var(--block-z-sticky);
+}
+
+.block-cell-yLLKH {
+  padding: var(--block-space-2) var(--block-space-3);
+  border-bottom: var(--block-border-width-thin) solid var(--block-shadow-bevel-dark);
+  vertical-align: middle;
+}
+
+.block-table-x1Qnx[data-size="sm"] .block-headerCell-LQKy8,
+.block-table-x1Qnx[data-size="sm"] .block-cell-yLLKH {
+  padding: var(--block-space-1) var(--block-space-2);
+}
+
+.block-rowHeader-cYBI3 {
+  font-weight: var(--block-font-weight-bold);
+  text-align: left;
+}
+
+.block-row-cNM95:last-child .block-cell-yLLKH {
+  border-bottom: 0;
+}
+
+.block-table-x1Qnx[data-striped] .block-row-cNM95:nth-child(even) {
+  background-color: color-mix(in srgb, var(--block-surface-alt) 70%, transparent);
+}
+
+.block-row-cNM95:hover {
+  background-color: var(--block-slot-hover);
+}
+
+.block-table-x1Qnx [data-align="start"] {
+  text-align: start;
+}
+
+.block-table-x1Qnx [data-align="center"] {
+  text-align: center;
+}
+
+.block-table-x1Qnx [data-align="end"] {
+  text-align: end;
+}
+
+.block-sortButton-Lr2ri {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--block-space-1);
+  margin: calc(-1 * var(--block-space-1));
+  padding: var(--block-space-1);
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  cursor: pointer;
+}
+
+.block-sortButton-Lr2ri:hover,
+.block-sortButton-Lr2ri[data-direction] {
+  color: var(--block-text);
+}
+
+.block-sortButton-Lr2ri:focus-visible {
+  outline: 3px solid var(--block-focus);
+  outline-offset: 0;
+}
+
+.block-sortIcon-tm-Vg {
+  display: inline-flex;
+  opacity: 0.35;
+}
+
+.block-sortButton-Lr2ri[data-direction] .block-sortIcon-tm-Vg {
+  opacity: 1;
+}
+
+.block-empty-B21lk {
+  padding: var(--block-space-6) var(--block-space-3);
+  text-align: center;
+  color: var(--block-text-muted);
+}
 .block-sidebar-h3ahB {
   display: flex;
   flex-direction: column;
@@ -2971,6 +3285,221 @@ div.block-slot-ZIG6g:not([role="gridcell"]):not([tabindex]) {
     display: none;
   }
 }
+.block-pagination-jR1nM {
+  min-width: 0;
+}
+
+.block-list-Z1jbw {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--block-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.block-page-BkAnx,
+.block-arrow-ry9f4 {
+  min-width: var(--block-size-control-md);
+  padding-inline: var(--block-space-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.block-pagination-jR1nM[data-size="sm"] .block-page-BkAnx,
+.block-pagination-jR1nM[data-size="sm"] .block-arrow-ry9f4 {
+  min-width: var(--block-size-control-sm);
+  padding-inline: var(--block-space-1);
+}
+
+.block-ellipsis-nx5KR {
+  display: inline-flex;
+  justify-content: center;
+  min-width: var(--block-space-6);
+  font-family: var(--block-font-display);
+  color: var(--block-text-muted);
+}
+
+.block-status-jjwdn {
+  padding-inline: var(--block-space-3);
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-sm);
+  font-weight: var(--block-font-weight-bold);
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--block-text);
+}
+.block-stack-z5qhc {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.block-stack-z5qhc[data-direction="row"] {
+  flex-direction: row;
+}
+
+.block-stack-z5qhc[data-wrap] {
+  flex-wrap: wrap;
+}
+
+.block-stack-z5qhc[data-gap="0"] {
+  gap: var(--block-space-0);
+}
+
+.block-stack-z5qhc[data-gap="1"] {
+  gap: var(--block-space-1);
+}
+
+.block-stack-z5qhc[data-gap="2"] {
+  gap: var(--block-space-2);
+}
+
+.block-stack-z5qhc[data-gap="3"] {
+  gap: var(--block-space-3);
+}
+
+.block-stack-z5qhc[data-gap="4"] {
+  gap: var(--block-space-4);
+}
+
+.block-stack-z5qhc[data-gap="5"] {
+  gap: var(--block-space-5);
+}
+
+.block-stack-z5qhc[data-gap="6"] {
+  gap: var(--block-space-6);
+}
+
+.block-stack-z5qhc[data-gap="8"] {
+  gap: var(--block-space-8);
+}
+
+.block-stack-z5qhc[data-gap="10"] {
+  gap: var(--block-space-10);
+}
+
+.block-stack-z5qhc[data-gap="12"] {
+  gap: var(--block-space-12);
+}
+
+.block-stack-z5qhc[data-align="start"] {
+  align-items: flex-start;
+}
+
+.block-stack-z5qhc[data-align="center"] {
+  align-items: center;
+}
+
+.block-stack-z5qhc[data-align="end"] {
+  align-items: flex-end;
+}
+
+.block-stack-z5qhc[data-align="stretch"] {
+  align-items: stretch;
+}
+
+.block-stack-z5qhc[data-align="baseline"] {
+  align-items: baseline;
+}
+
+.block-stack-z5qhc[data-justify="start"] {
+  justify-content: flex-start;
+}
+
+.block-stack-z5qhc[data-justify="center"] {
+  justify-content: center;
+}
+
+.block-stack-z5qhc[data-justify="end"] {
+  justify-content: flex-end;
+}
+
+.block-stack-z5qhc[data-justify="between"] {
+  justify-content: space-between;
+}
+
+.block-stack-z5qhc[data-justify="around"] {
+  justify-content: space-around;
+}
+
+@media (max-width: 767.98px) {
+  .block-stack-z5qhc[data-stack-mobile] {
+    flex-direction: column;
+  }
+}
+.block-divider-7wQzM {
+  --divider-thickness: 4px;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  color: var(--block-text-muted);
+}
+
+/* Horizontal / vertical lines share one look, drawn by .divider or .line. */
+.block-divider-7wQzM:not([data-labelled]),
+.block-line-WiUib {
+  background-color: var(--block-border);
+}
+
+.block-divider-7wQzM[data-orientation="horizontal"]:not([data-labelled]),
+.block-line-WiUib {
+  width: 100%;
+  height: var(--divider-thickness);
+}
+
+.block-divider-7wQzM[data-orientation="vertical"] {
+  align-self: stretch;
+  width: var(--divider-thickness);
+  min-height: 1em;
+}
+
+.block-divider-7wQzM[data-variant="bevel"]:not([data-labelled]),
+.block-divider-7wQzM[data-variant="bevel"] .block-line-WiUib {
+  background-color: var(--block-shadow-bevel-dark);
+  box-shadow: inset -2px -2px 0 var(--block-shadow-bevel-light);
+}
+
+.block-divider-7wQzM[data-variant="line"] {
+  --divider-thickness: 2px;
+}
+
+.block-divider-7wQzM[data-variant="dashed"]:not([data-labelled]),
+.block-divider-7wQzM[data-variant="dashed"] .block-line-WiUib {
+  background-color: transparent;
+  background-image: linear-gradient(90deg, var(--block-border) 50%, transparent 50%);
+  background-size: 8px 100%;
+}
+
+.block-divider-7wQzM[data-orientation="vertical"][data-variant="dashed"] {
+  background-image: linear-gradient(180deg, var(--block-border) 50%, transparent 50%);
+  background-size: 100% 8px;
+}
+
+.block-divider-7wQzM[data-labelled] {
+  display: flex;
+  align-items: center;
+  gap: var(--block-space-3);
+  width: 100%;
+}
+
+.block-line-WiUib {
+  flex: 1;
+  min-width: var(--block-space-4);
+}
+
+.block-label-5tJ-t {
+  flex-shrink: 0;
+  font-family: var(--block-font-display);
+  font-size: var(--block-font-size-sm);
+  font-weight: var(--block-font-weight-bold);
+  letter-spacing: var(--block-letter-spacing-wide);
+  text-transform: uppercase;
+}
 .block-overlay-gc2QW {
   position: fixed;
   inset: 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.2.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-themes": "^0.2.0",
+    "@malilion/block-ui-icons": "^0.2.0",
+    "@malilion/block-ui-tokens": "^0.2.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.6.1",