@umplabs/truncated-value 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 UMP Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,178 @@
+# truncated-value
+
+Truncate long strings safely, without destroying searchability or verifiability.
+
+## The Problem: Address Poisoning
+
+Almost all apps, wallets and explorers display addresses truncated to their first and last few characters (e.g. `0xd8dA...6045`). [Address poisoning scams](https://support.metamask.io/stay-safe/protect-yourself/wallet-and-hardware/address-poisoning-scams) exploit this: attackers generate addresses matching the visible prefix and suffix, seed them into transaction histories, and wait for users to copy the wrong one.
+
+**Truncation hides the characters that matter most for verification.**
+
+## How This Helps
+
+`@umplabs/truncated-value` keeps the **full value in the DOM at all times**. The middle portion is visually collapsed with CSS, but never removed.
+
+- **Browser find (Ctrl+F) matches the complete address**, even while truncated
+- **Optional expansion**: Enable `expandable` to let users click/focus to inspect every character before copying
+
+Poisoned addresses become significantly harder to miss.
+
+## Installation
+
+```bash
+npm install @umplabs/truncated-value
+# or
+pnpm add @umplabs/truncated-value
+# or
+yarn add @umplabs/truncated-value
+```
+
+## Usage
+
+### React
+
+```tsx
+import { TruncatedValue } from "@umplabs/truncated-value/react";
+
+function App() {
+  return (
+    <TruncatedValue
+      value="0x1234567890abcdef1234567890abcdef12345678"
+      startLength={6}
+      endLength={4}
+      expandable
+    />
+  );
+}
+```
+
+### Web Component (Vue, Svelte, or any framework)
+
+```ts
+// Import once to register the custom element
+import "@umplabs/truncated-value/web-component";
+```
+
+```html
+<truncated-value
+  value="0x1234567890abcdef1234567890abcdef12345678"
+  start-length="6"
+  end-length="4"
+  expandable
+></truncated-value>
+```
+
+### CDN (No bundler required)
+
+```html
+<script type="module" src="https://unpkg.com/@umplabs/truncated-value"></script>
+
+<truncated-value
+  value="0x1234567890abcdef1234567890abcdef12345678"
+  expandable
+></truncated-value>
+```
+
+## Examples
+
+### Ethereum Address
+
+```tsx
+<TruncatedValue value="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" expandable />
+// Displays: 0xd8dA...6045
+```
+
+### Transaction Hash
+
+```tsx
+<TruncatedValue
+  value="0xf7b9d38a3c5e4e7b9d38a3c5e4e7b9d38a3c5e4e7b9d38a3c5e4e7b9d38a3c5e4e"
+  startLength={10}
+  endLength={8}
+  expandable
+/>
+// Displays: 0xf7b9d38a...38a3c5e4e
+```
+
+### IPFS CID
+
+```tsx
+<TruncatedValue
+  value="QmYwAPJzv5CZsnA625s3Xf2nemtYgPpHdWEz79ojWnPbdG"
+  startLength={6}
+  endLength={6}
+  expandable
+/>
+// Displays: QmYwAP...nPbdG
+```
+
+### Custom Styling
+
+```tsx
+<TruncatedValue
+  value="0x1234567890abcdef"
+  expandable
+  className="my-custom-class"
+/>
+```
+
+## Features
+
+- **Smart truncation**: Shows start and end characters, visually collapses the middle
+- **Interactive expansion** (optional): Click or focus to reveal and verify the full value
+- **Fully searchable**: Browser find (Ctrl+F) works on the complete text, even when truncated
+- **Multi-framework**: React component + Web Component (Vue, Svelte, vanilla HTML)
+- **Accessible**: Keyboard navigation and ARIA attributes
+- **Tiny footprint**: Tree-shakable, minimal dependencies
+
+## Unopinionated by Design
+
+This component ships with **no visual opinions** — no colors, fonts, sizes, or spacing baked in. The only built-in CSS handles the truncation mechanics (collapsing the middle text and cursor hints). Everything else — how it looks, how it fits your brand — is up to you. Style it with plain CSS, theme tokens, or your design system as you would any other inline element.
+
+## API
+
+### React Component Props
+
+| Prop          | Type      | Default | Description                                          |
+| ------------- | --------- | ------- | ---------------------------------------------------- |
+| `value`       | `string`  | `""`    | The string value to display and potentially truncate |
+| `startLength` | `number`  | `6`     | Number of characters to show at the start            |
+| `endLength`   | `number`  | `4`     | Number of characters to show at the end              |
+| `expandable`  | `boolean` | `false` | Whether the component expands on focus/click         |
+| `className`   | `string`  | -       | Additional CSS class name                            |
+
+### Web Component Attributes
+
+| Attribute      | Type      | Default | Description                                  |
+| -------------- | --------- | ------- | -------------------------------------------- |
+| `value`        | `string`  | `""`    | The string value to display                  |
+| `start-length` | `number`  | `6`     | Characters to show at the start              |
+| `end-length`   | `number`  | `4`     | Characters to show at the end                |
+| `expandable`   | `boolean` | `false` | Whether the component expands on focus/click |
+
+### Shadow DOM Parts (Web Component)
+
+Style internal elements using `::part()`:
+
+```css
+truncated-value::part(container) {
+  font-weight: bold;
+}
+
+truncated-value::part(start),
+truncated-value::part(end) {
+  color: #888;
+}
+
+truncated-value::part(middle) {
+  color: #666;
+}
+```
+
+## Browser Support
+
+Modern browsers (Chrome, Firefox, Safari, Edge).
+
+## License
+
+MIT

package/dist/react.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/core/truncate.ts
+function truncate(options) {
+  const { value, startLength = 6, endLength = 4 } = options;
+  if (!value) {
+    return {
+      start: "",
+      middle: "",
+      end: "",
+      isTruncated: false
+    };
+  }
+  const isTruncated = startLength + endLength < value.length;
+  const excess = Math.max(0, startLength + endLength - value.length);
+  const adjustedStartLength = startLength - (startLength > endLength ? Math.ceil : Math.floor)(excess / 2);
+  const adjustedEndLength = endLength - (startLength > endLength ? Math.floor : Math.ceil)(excess / 2);
+  const safeStartLength = Math.max(
+    0,
+    Math.min(adjustedStartLength, value.length)
+  );
+  const safeEndLength = Math.max(
+    0,
+    Math.min(adjustedEndLength, value.length - safeStartLength)
+  );
+  const start = value.slice(0, safeStartLength);
+  const end = safeEndLength > 0 ? value.slice(-safeEndLength) : "";
+  const middle = value.slice(
+    safeStartLength,
+    safeEndLength > 0 ? -safeEndLength : value.length
+  );
+  return {
+    start,
+    middle,
+    end,
+    isTruncated
+  };
+}
+
+// src/core/styles.ts
+var styles = `
+[tabindex].truncated-value { --isTruncated: 0; }
+[tabindex].truncated-value:not(:is(:active, :focus-within, [data-is-truncated="false"])) { --isTruncated: 1; cursor: zoom-in; }
+[tabindex="-1"].truncated-value:not([data-is-truncated="false"]) { --isTruncated: 1 !important; cursor: default !important; }
+[tabindex].truncated-value > .tv-middle > span:not(:empty) { font-size: calc((1 - var(--isTruncated)) * 1em); }
+[tabindex].truncated-value > .tv-middle > span:empty { font-size: calc(var(--isTruncated) * 1em); pointer-events: none; }
+[tabindex].truncated-value > .tv-middle > span:empty::after { content: "..."; }
+`;
+var TruncatedValue = ({
+  value = "",
+  startLength = 6,
+  endLength = 4,
+  expandable = false,
+  className,
+  style
+}) => {
+  const { start, middle, end, isTruncated } = truncate({
+    value,
+    startLength,
+    endLength
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: styles }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        "data-is-truncated": isTruncated,
+        tabIndex: expandable ? 0 : -1,
+        className: `truncated-value${className ? ` ${className}` : ""}`,
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: start }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tv-middle", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: middle.slice(0, middle.length / 2) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: middle.slice(middle.length / 2) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: end })
+        ]
+      }
+    )
+  ] });
+};
+
+exports.TruncatedValue = TruncatedValue;
+//# sourceMappingURL=react.cjs.map
+//# sourceMappingURL=react.cjs.map

package/dist/react.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/truncate.ts","../src/core/styles.ts","../src/TruncatedValue.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":"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","file":"react.cjs","sourcesContent":["import type { TruncateOptions, TruncateResult } from \"./types\";\n\n/**\n * Truncates a string value intelligently, preserving the start and end portions.\n *\n * The function handles edge cases like:\n * - Strings shorter than the requested lengths (adjusts proportionally)\n * - Zero or very large length values\n * - Empty strings\n *\n * @example\n * ```ts\n * const result = truncate({\n *   value: \"0x1234567890abcdef1234567890abcdef12345678\",\n *   startLength: 6,\n *   endLength: 4\n * });\n * // result.start = \"0x1234\"\n * // result.middle = \"567890abcdef1234567890abcdef1234\"\n * // result.end = \"5678\"\n * // result.isTruncated = true\n * ```\n */\nexport function truncate(options: TruncateOptions): TruncateResult {\n  const { value, startLength = 6, endLength = 4 } = options;\n\n  // Handle empty or undefined values\n  if (!value) {\n    return {\n      start: \"\",\n      middle: \"\",\n      end: \"\",\n      isTruncated: false,\n    };\n  }\n\n  // Determine if truncation is needed\n  const isTruncated = startLength + endLength < value.length;\n\n  // Calculate excess characters when string is shorter than requested lengths\n  const excess = Math.max(0, startLength + endLength - value.length);\n\n  // Adjust lengths proportionally when string is too short\n  const adjustedStartLength =\n    startLength -\n    (startLength > endLength ? Math.ceil : Math.floor)(excess / 2);\n  const adjustedEndLength =\n    endLength - (startLength > endLength ? Math.floor : Math.ceil)(excess / 2);\n\n  // Ensure we don't get negative lengths\n  const safeStartLength = Math.max(\n    0,\n    Math.min(adjustedStartLength, value.length)\n  );\n  const safeEndLength = Math.max(\n    0,\n    Math.min(adjustedEndLength, value.length - safeStartLength)\n  );\n\n  // Split the value into start, middle, and end segments\n  const start = value.slice(0, safeStartLength);\n  const end = safeEndLength > 0 ? value.slice(-safeEndLength) : \"\";\n  const middle = value.slice(\n    safeStartLength,\n    safeEndLength > 0 ? -safeEndLength : value.length\n  );\n\n  return {\n    start,\n    middle,\n    end,\n    isTruncated,\n  };\n}\n","/**\n * CSS styles for the TruncatedValue component.\n *\n * How it works:\n * - `--isTruncated` CSS variable (0=expanded, 1=truncated) represents state\n * - Visual default is truncated; expands on :active or :focus-within\n * - Short values (data-is-truncated=\"false\") stay expanded\n * - Non-expandable (tabindex=\"-1\") stays truncated unless value is short\n * - Middle text: font-size set to 0 when truncated (hidden but searchable)\n * - Ellipsis: empty span with ::after content, font-size set inverse\n */\nexport const styles = `\n[tabindex].truncated-value { --isTruncated: 0; }\n[tabindex].truncated-value:not(:is(:active, :focus-within, [data-is-truncated=\"false\"])) { --isTruncated: 1; cursor: zoom-in; }\n[tabindex=\"-1\"].truncated-value:not([data-is-truncated=\"false\"]) { --isTruncated: 1 !important; cursor: default !important; }\n[tabindex].truncated-value > .tv-middle > span:not(:empty) { font-size: calc((1 - var(--isTruncated)) * 1em); }\n[tabindex].truncated-value > .tv-middle > span:empty { font-size: calc(var(--isTruncated) * 1em); pointer-events: none; }\n[tabindex].truncated-value > .tv-middle > span:empty::after { content: \"...\"; }\n`;\n","import * as React from \"react\";\nimport { truncate, styles, type TruncatedValueBaseProps } from \"./core\";\n\n/**\n * Props for the TruncatedValue React component\n */\nexport interface TruncatedValueProps extends TruncatedValueBaseProps {\n  /** Additional CSS class name applied to the interactive element */\n  className?: string;\n  /** Inline styles applied to the component */\n  style?: React.CSSProperties;\n}\n\n/**\n * A component that intelligently truncates long string values, displaying the start and end\n * while hiding the middle portion. Features interactive focus states that reveal the full value.\n * The complete text remains searchable via browser find functionality even when truncated.\n *\n * Commonly used for displaying addresses, hashes, or other long identifiers where the beginning\n * and end are most important for identification.\n *\n * @example\n * ```tsx\n * <TruncatedValue\n *   value=\"0x1234567890abcdef1234567890abcdef12345678\"\n *   startLength={8}\n *   endLength={6}\n *   expandable\n * />\n * // Displays: 0x123456...345678 (expandable on focus)\n *\n * <TruncatedValue\n *   value=\"0x1234567890abcdef1234567890abcdef12345678\"\n *   expandable={false}\n * />\n * // Displays: 0x1234...5678 (always truncated)\n * // Full text remains searchable with Ctrl+F/Cmd+F\n * ```\n */\nexport const TruncatedValue: React.FC<TruncatedValueProps> = ({\n  value = \"\",\n  startLength = 6,\n  endLength = 4,\n  expandable = false,\n  className,\n  style,\n}) => {\n  const { start, middle, end, isTruncated } = truncate({\n    value,\n    startLength,\n    endLength,\n  });\n\n  return (\n    <>\n      <style>{styles}</style>\n      <span\n        data-is-truncated={isTruncated}\n        tabIndex={expandable ? 0 : -1}\n        className={`truncated-value${className ? ` ${className}` : \"\"}`}\n        style={style}\n      >\n        <span>{start}</span>\n        <span className=\"tv-middle\">\n          <span>{middle.slice(0, middle.length / 2)}</span>\n          <span aria-hidden=\"true\"></span>\n          <span>{middle.slice(middle.length / 2)}</span>\n        </span>\n        <span>{end}</span>\n      </span>\n    </>\n  );\n};\n"]}

package/dist/react.d.cts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+/**
+ * Props shared between React and Web Component implementations
+ */
+interface TruncatedValueBaseProps {
+    /** The string value to display and potentially truncate */
+    value?: string;
+    /** Number of characters to show at the start when truncated (default: 6) */
+    startLength?: number;
+    /** Number of characters to show at the end when truncated (default: 4) */
+    endLength?: number;
+    /** Whether the component should expand on focus/click (default: false) */
+    expandable?: boolean;
+}
+
+/**
+ * Props for the TruncatedValue React component
+ */
+interface TruncatedValueProps extends TruncatedValueBaseProps {
+    /** Additional CSS class name applied to the interactive element */
+    className?: string;
+    /** Inline styles applied to the component */
+    style?: React.CSSProperties;
+}
+/**
+ * A component that intelligently truncates long string values, displaying the start and end
+ * while hiding the middle portion. Features interactive focus states that reveal the full value.
+ * The complete text remains searchable via browser find functionality even when truncated.
+ *
+ * Commonly used for displaying addresses, hashes, or other long identifiers where the beginning
+ * and end are most important for identification.
+ *
+ * @example
+ * ```tsx
+ * <TruncatedValue
+ *   value="0x1234567890abcdef1234567890abcdef12345678"
+ *   startLength={8}
+ *   endLength={6}
+ *   expandable
+ * />
+ * // Displays: 0x123456...345678 (expandable on focus)
+ *
+ * <TruncatedValue
+ *   value="0x1234567890abcdef1234567890abcdef12345678"
+ *   expandable={false}
+ * />
+ * // Displays: 0x1234...5678 (always truncated)
+ * // Full text remains searchable with Ctrl+F/Cmd+F
+ * ```
+ */
+declare const TruncatedValue: React.FC<TruncatedValueProps>;
+
+export { TruncatedValue, type TruncatedValueProps };

package/dist/react.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+/**
+ * Props shared between React and Web Component implementations
+ */
+interface TruncatedValueBaseProps {
+    /** The string value to display and potentially truncate */
+    value?: string;
+    /** Number of characters to show at the start when truncated (default: 6) */
+    startLength?: number;
+    /** Number of characters to show at the end when truncated (default: 4) */
+    endLength?: number;
+    /** Whether the component should expand on focus/click (default: false) */
+    expandable?: boolean;
+}
+
+/**
+ * Props for the TruncatedValue React component
+ */
+interface TruncatedValueProps extends TruncatedValueBaseProps {
+    /** Additional CSS class name applied to the interactive element */
+    className?: string;
+    /** Inline styles applied to the component */
+    style?: React.CSSProperties;
+}
+/**
+ * A component that intelligently truncates long string values, displaying the start and end
+ * while hiding the middle portion. Features interactive focus states that reveal the full value.
+ * The complete text remains searchable via browser find functionality even when truncated.
+ *
+ * Commonly used for displaying addresses, hashes, or other long identifiers where the beginning
+ * and end are most important for identification.
+ *
+ * @example
+ * ```tsx
+ * <TruncatedValue
+ *   value="0x1234567890abcdef1234567890abcdef12345678"
+ *   startLength={8}
+ *   endLength={6}
+ *   expandable
+ * />
+ * // Displays: 0x123456...345678 (expandable on focus)
+ *
+ * <TruncatedValue
+ *   value="0x1234567890abcdef1234567890abcdef12345678"
+ *   expandable={false}
+ * />
+ * // Displays: 0x1234...5678 (always truncated)
+ * // Full text remains searchable with Ctrl+F/Cmd+F
+ * ```
+ */
+declare const TruncatedValue: React.FC<TruncatedValueProps>;
+
+export { TruncatedValue, type TruncatedValueProps };

package/dist/react.js

@@ -0,0 +1,87 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+// src/core/truncate.ts
+function truncate(options) {
+  const { value, startLength = 6, endLength = 4 } = options;
+  if (!value) {
+    return {
+      start: "",
+      middle: "",
+      end: "",
+      isTruncated: false
+    };
+  }
+  const isTruncated = startLength + endLength < value.length;
+  const excess = Math.max(0, startLength + endLength - value.length);
+  const adjustedStartLength = startLength - (startLength > endLength ? Math.ceil : Math.floor)(excess / 2);
+  const adjustedEndLength = endLength - (startLength > endLength ? Math.floor : Math.ceil)(excess / 2);
+  const safeStartLength = Math.max(
+    0,
+    Math.min(adjustedStartLength, value.length)
+  );
+  const safeEndLength = Math.max(
+    0,
+    Math.min(adjustedEndLength, value.length - safeStartLength)
+  );
+  const start = value.slice(0, safeStartLength);
+  const end = safeEndLength > 0 ? value.slice(-safeEndLength) : "";
+  const middle = value.slice(
+    safeStartLength,
+    safeEndLength > 0 ? -safeEndLength : value.length
+  );
+  return {
+    start,
+    middle,
+    end,
+    isTruncated
+  };
+}
+
+// src/core/styles.ts
+var styles = `
+[tabindex].truncated-value { --isTruncated: 0; }
+[tabindex].truncated-value:not(:is(:active, :focus-within, [data-is-truncated="false"])) { --isTruncated: 1; cursor: zoom-in; }
+[tabindex="-1"].truncated-value:not([data-is-truncated="false"]) { --isTruncated: 1 !important; cursor: default !important; }
+[tabindex].truncated-value > .tv-middle > span:not(:empty) { font-size: calc((1 - var(--isTruncated)) * 1em); }
+[tabindex].truncated-value > .tv-middle > span:empty { font-size: calc(var(--isTruncated) * 1em); pointer-events: none; }
+[tabindex].truncated-value > .tv-middle > span:empty::after { content: "..."; }
+`;
+var TruncatedValue = ({
+  value = "",
+  startLength = 6,
+  endLength = 4,
+  expandable = false,
+  className,
+  style
+}) => {
+  const { start, middle, end, isTruncated } = truncate({
+    value,
+    startLength,
+    endLength
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: styles }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-is-truncated": isTruncated,
+        tabIndex: expandable ? 0 : -1,
+        className: `truncated-value${className ? ` ${className}` : ""}`,
+        style,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: start }),
+          /* @__PURE__ */ jsxs("span", { className: "tv-middle", children: [
+            /* @__PURE__ */ jsx("span", { children: middle.slice(0, middle.length / 2) }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: middle.slice(middle.length / 2) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: end })
+        ]
+      }
+    )
+  ] });
+};
+
+export { TruncatedValue };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/truncate.ts","../src/core/styles.ts","../src/TruncatedValue.tsx"],"names":[],"mappings":"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","file":"react.js","sourcesContent":["import type { TruncateOptions, TruncateResult } from \"./types\";\n\n/**\n * Truncates a string value intelligently, preserving the start and end portions.\n *\n * The function handles edge cases like:\n * - Strings shorter than the requested lengths (adjusts proportionally)\n * - Zero or very large length values\n * - Empty strings\n *\n * @example\n * ```ts\n * const result = truncate({\n *   value: \"0x1234567890abcdef1234567890abcdef12345678\",\n *   startLength: 6,\n *   endLength: 4\n * });\n * // result.start = \"0x1234\"\n * // result.middle = \"567890abcdef1234567890abcdef1234\"\n * // result.end = \"5678\"\n * // result.isTruncated = true\n * ```\n */\nexport function truncate(options: TruncateOptions): TruncateResult {\n  const { value, startLength = 6, endLength = 4 } = options;\n\n  // Handle empty or undefined values\n  if (!value) {\n    return {\n      start: \"\",\n      middle: \"\",\n      end: \"\",\n      isTruncated: false,\n    };\n  }\n\n  // Determine if truncation is needed\n  const isTruncated = startLength + endLength < value.length;\n\n  // Calculate excess characters when string is shorter than requested lengths\n  const excess = Math.max(0, startLength + endLength - value.length);\n\n  // Adjust lengths proportionally when string is too short\n  const adjustedStartLength =\n    startLength -\n    (startLength > endLength ? Math.ceil : Math.floor)(excess / 2);\n  const adjustedEndLength =\n    endLength - (startLength > endLength ? Math.floor : Math.ceil)(excess / 2);\n\n  // Ensure we don't get negative lengths\n  const safeStartLength = Math.max(\n    0,\n    Math.min(adjustedStartLength, value.length)\n  );\n  const safeEndLength = Math.max(\n    0,\n    Math.min(adjustedEndLength, value.length - safeStartLength)\n  );\n\n  // Split the value into start, middle, and end segments\n  const start = value.slice(0, safeStartLength);\n  const end = safeEndLength > 0 ? value.slice(-safeEndLength) : \"\";\n  const middle = value.slice(\n    safeStartLength,\n    safeEndLength > 0 ? -safeEndLength : value.length\n  );\n\n  return {\n    start,\n    middle,\n    end,\n    isTruncated,\n  };\n}\n","/**\n * CSS styles for the TruncatedValue component.\n *\n * How it works:\n * - `--isTruncated` CSS variable (0=expanded, 1=truncated) represents state\n * - Visual default is truncated; expands on :active or :focus-within\n * - Short values (data-is-truncated=\"false\") stay expanded\n * - Non-expandable (tabindex=\"-1\") stays truncated unless value is short\n * - Middle text: font-size set to 0 when truncated (hidden but searchable)\n * - Ellipsis: empty span with ::after content, font-size set inverse\n */\nexport const styles = `\n[tabindex].truncated-value { --isTruncated: 0; }\n[tabindex].truncated-value:not(:is(:active, :focus-within, [data-is-truncated=\"false\"])) { --isTruncated: 1; cursor: zoom-in; }\n[tabindex=\"-1\"].truncated-value:not([data-is-truncated=\"false\"]) { --isTruncated: 1 !important; cursor: default !important; }\n[tabindex].truncated-value > .tv-middle > span:not(:empty) { font-size: calc((1 - var(--isTruncated)) * 1em); }\n[tabindex].truncated-value > .tv-middle > span:empty { font-size: calc(var(--isTruncated) * 1em); pointer-events: none; }\n[tabindex].truncated-value > .tv-middle > span:empty::after { content: \"...\"; }\n`;\n","import * as React from \"react\";\nimport { truncate, styles, type TruncatedValueBaseProps } from \"./core\";\n\n/**\n * Props for the TruncatedValue React component\n */\nexport interface TruncatedValueProps extends TruncatedValueBaseProps {\n  /** Additional CSS class name applied to the interactive element */\n  className?: string;\n  /** Inline styles applied to the component */\n  style?: React.CSSProperties;\n}\n\n/**\n * A component that intelligently truncates long string values, displaying the start and end\n * while hiding the middle portion. Features interactive focus states that reveal the full value.\n * The complete text remains searchable via browser find functionality even when truncated.\n *\n * Commonly used for displaying addresses, hashes, or other long identifiers where the beginning\n * and end are most important for identification.\n *\n * @example\n * ```tsx\n * <TruncatedValue\n *   value=\"0x1234567890abcdef1234567890abcdef12345678\"\n *   startLength={8}\n *   endLength={6}\n *   expandable\n * />\n * // Displays: 0x123456...345678 (expandable on focus)\n *\n * <TruncatedValue\n *   value=\"0x1234567890abcdef1234567890abcdef12345678\"\n *   expandable={false}\n * />\n * // Displays: 0x1234...5678 (always truncated)\n * // Full text remains searchable with Ctrl+F/Cmd+F\n * ```\n */\nexport const TruncatedValue: React.FC<TruncatedValueProps> = ({\n  value = \"\",\n  startLength = 6,\n  endLength = 4,\n  expandable = false,\n  className,\n  style,\n}) => {\n  const { start, middle, end, isTruncated } = truncate({\n    value,\n    startLength,\n    endLength,\n  });\n\n  return (\n    <>\n      <style>{styles}</style>\n      <span\n        data-is-truncated={isTruncated}\n        tabIndex={expandable ? 0 : -1}\n        className={`truncated-value${className ? ` ${className}` : \"\"}`}\n        style={style}\n      >\n        <span>{start}</span>\n        <span className=\"tv-middle\">\n          <span>{middle.slice(0, middle.length / 2)}</span>\n          <span aria-hidden=\"true\"></span>\n          <span>{middle.slice(middle.length / 2)}</span>\n        </span>\n        <span>{end}</span>\n      </span>\n    </>\n  );\n};\n"]}