+3
-2
@@ -10,3 +10,3 @@ import { useId } from "react"; | ||
| const [start, end] = [body.slice(1, cutAt), body.slice(cutAt, -1)]; | ||
| const minWidth = prefix.length + min * 2 + 1; | ||
| const minWidth = prefix.length + min * 2; | ||
| return /* @__PURE__ */ jsxs("span", { | ||
@@ -19,3 +19,3 @@ id, | ||
| width: "100%", | ||
| minWidth: `${minWidth}ch`, | ||
| minWidth: `${minWidth + 1}ch`, | ||
| textDecoration: "inherit", | ||
@@ -39,2 +39,3 @@ containerType: "inline-size", | ||
| display: "inline-flex", | ||
| minWidth: `${minWidth}ch`, | ||
| maxWidth: `${value.length - 1}ch`, | ||
@@ -41,0 +42,0 @@ width: "round(down, calc(100% - 1ch), 2ch)", |
+1
-1
| { | ||
| "name": "midcut", | ||
| "version": "0.1.0", | ||
| "version": "0.2.0", | ||
| "description": "A <1kb React component that accurately middle-truncates monospaced text", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
+3
-2
@@ -18,3 +18,3 @@ import { useId } from "react"; | ||
| const minWidth = prefix.length + min * 2 + 1; | ||
| const minWidth = prefix.length + min * 2; | ||
@@ -29,3 +29,3 @@ return ( | ||
| width: "100%", | ||
| minWidth: `${minWidth}ch`, | ||
| minWidth: `${minWidth + 1}ch`, | ||
| textDecoration: "inherit", | ||
@@ -51,2 +51,3 @@ containerType: "inline-size", | ||
| display: "inline-flex", | ||
| minWidth: `${minWidth}ch`, | ||
| maxWidth: `${value.length - 1}ch`, | ||
@@ -53,0 +54,0 @@ width: "round(down, calc(100% - 1ch), 2ch)", |
7424
0.94%144
1.41%