@umplabs/truncated-value 0.1.0

package/dist/web-component.cjs

@@ -0,0 +1,116 @@
+'use strict';
+
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// 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: "..."; }
+`;
+
+// src/web-component.ts
+exports.TruncatedValueElement = class TruncatedValueElement extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.startLength = 6;
+    this.endLength = 4;
+    this.expandable = false;
+  }
+  render() {
+    const { start, middle, end, isTruncated } = truncate({
+      value: this.value,
+      startLength: this.startLength,
+      endLength: this.endLength
+    });
+    const middleFirstHalf = middle.slice(0, middle.length / 2);
+    const middleSecondHalf = middle.slice(middle.length / 2);
+    return lit.html`<span
+      part="container"
+      data-is-truncated="${isTruncated}"
+      tabindex="${this.expandable ? 0 : -1}"
+      class="truncated-value"
+      ><span part="start">${start}</span
+      ><span part="middle" class="tv-middle"
+        ><span>${middleFirstHalf}</span><span aria-hidden="true"></span
+        ><span>${middleSecondHalf}</span></span
+      ><span part="end">${end}</span></span
+    >`;
+  }
+};
+exports.TruncatedValueElement.styles = lit.css`
+    :host {
+      display: inline-block;
+    }
+    ${lit.unsafeCSS(styles)}
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.TruncatedValueElement.prototype, "value", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: "start-length" })
+], exports.TruncatedValueElement.prototype, "startLength", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, attribute: "end-length" })
+], exports.TruncatedValueElement.prototype, "endLength", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean })
+], exports.TruncatedValueElement.prototype, "expandable", 2);
+exports.TruncatedValueElement = __decorateClass([
+  decorators_js.customElement("truncated-value")
+], exports.TruncatedValueElement);
+//# sourceMappingURL=web-component.cjs.map
+//# sourceMappingURL=web-component.cjs.map

package/dist/web-component.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/truncate.ts","../src/core/styles.ts","../src/web-component.ts"],"names":["TruncatedValueElement","LitElement","html","css","unsafeCSS","property","customElement"],"mappings":"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","file":"web-component.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 { LitElement, html, css, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { truncate, styles } from \"./core\";\n\n/**\n * A web component that intelligently truncates long string values.\n *\n * @element truncated-value\n *\n * @attr {string} value - The string value to display and potentially truncate\n * @attr {number} start-length - Number of characters to show at the start (default: 6)\n * @attr {number} end-length - Number of characters to show at the end (default: 4)\n * @attr {boolean} expandable - Whether the component should expand on focus/click\n *\n * @csspart container - The main container element\n * @csspart start - The start portion text\n * @csspart middle - The middle portion container\n * @csspart end - The end portion text\n *\n *\n * @example\n * ```html\n * <truncated-value\n *   value=\"0x1234567890abcdef1234567890abcdef12345678\"\n *   start-length=\"8\"\n *   end-length=\"6\"\n *   expandable\n * ></truncated-value>\n * ```\n */\n@customElement(\"truncated-value\")\nexport class TruncatedValueElement extends LitElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n    }\n    ${unsafeCSS(styles)}\n  `;\n\n  @property({ type: String })\n  value = \"\";\n\n  @property({ type: Number, attribute: \"start-length\" })\n  startLength = 6;\n\n  @property({ type: Number, attribute: \"end-length\" })\n  endLength = 4;\n\n  @property({ type: Boolean })\n  expandable = false;\n\n  override render() {\n    const { start, middle, end, isTruncated } = truncate({\n      value: this.value,\n      startLength: this.startLength,\n      endLength: this.endLength,\n    });\n\n    const middleFirstHalf = middle.slice(0, middle.length / 2);\n    const middleSecondHalf = middle.slice(middle.length / 2);\n\n    return html`<span\n      part=\"container\"\n      data-is-truncated=\"${isTruncated}\"\n      tabindex=\"${this.expandable ? 0 : -1}\"\n      class=\"truncated-value\"\n      ><span part=\"start\">${start}</span\n      ><span part=\"middle\" class=\"tv-middle\"\n        ><span>${middleFirstHalf}</span><span aria-hidden=\"true\"></span\n        ><span>${middleSecondHalf}</span></span\n      ><span part=\"end\">${end}</span></span\n    >`;\n  }\n}\n\n// Declare for type checking\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"truncated-value\": TruncatedValueElement;\n  }\n}\n"]}

package/dist/web-component.d.cts

@@ -0,0 +1,44 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A web component that intelligently truncates long string values.
+ *
+ * @element truncated-value
+ *
+ * @attr {string} value - The string value to display and potentially truncate
+ * @attr {number} start-length - Number of characters to show at the start (default: 6)
+ * @attr {number} end-length - Number of characters to show at the end (default: 4)
+ * @attr {boolean} expandable - Whether the component should expand on focus/click
+ *
+ * @csspart container - The main container element
+ * @csspart start - The start portion text
+ * @csspart middle - The middle portion container
+ * @csspart end - The end portion text
+ *
+ *
+ * @example
+ * ```html
+ * <truncated-value
+ *   value="0x1234567890abcdef1234567890abcdef12345678"
+ *   start-length="8"
+ *   end-length="6"
+ *   expandable
+ * ></truncated-value>
+ * ```
+ */
+declare class TruncatedValueElement extends LitElement {
+    static styles: lit.CSSResult;
+    value: string;
+    startLength: number;
+    endLength: number;
+    expandable: boolean;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "truncated-value": TruncatedValueElement;
+    }
+}
+
+export { TruncatedValueElement };

package/dist/web-component.d.ts

@@ -0,0 +1,44 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A web component that intelligently truncates long string values.
+ *
+ * @element truncated-value
+ *
+ * @attr {string} value - The string value to display and potentially truncate
+ * @attr {number} start-length - Number of characters to show at the start (default: 6)
+ * @attr {number} end-length - Number of characters to show at the end (default: 4)
+ * @attr {boolean} expandable - Whether the component should expand on focus/click
+ *
+ * @csspart container - The main container element
+ * @csspart start - The start portion text
+ * @csspart middle - The middle portion container
+ * @csspart end - The end portion text
+ *
+ *
+ * @example
+ * ```html
+ * <truncated-value
+ *   value="0x1234567890abcdef1234567890abcdef12345678"
+ *   start-length="8"
+ *   end-length="6"
+ *   expandable
+ * ></truncated-value>
+ * ```
+ */
+declare class TruncatedValueElement extends LitElement {
+    static styles: lit.CSSResult;
+    value: string;
+    startLength: number;
+    endLength: number;
+    expandable: boolean;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "truncated-value": TruncatedValueElement;
+    }
+}
+
+export { TruncatedValueElement };

package/dist/web-component.js

@@ -0,0 +1,116 @@
+import { unsafeCSS, css, LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// 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: "..."; }
+`;
+
+// src/web-component.ts
+var TruncatedValueElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.startLength = 6;
+    this.endLength = 4;
+    this.expandable = false;
+  }
+  render() {
+    const { start, middle, end, isTruncated } = truncate({
+      value: this.value,
+      startLength: this.startLength,
+      endLength: this.endLength
+    });
+    const middleFirstHalf = middle.slice(0, middle.length / 2);
+    const middleSecondHalf = middle.slice(middle.length / 2);
+    return html`<span
+      part="container"
+      data-is-truncated="${isTruncated}"
+      tabindex="${this.expandable ? 0 : -1}"
+      class="truncated-value"
+      ><span part="start">${start}</span
+      ><span part="middle" class="tv-middle"
+        ><span>${middleFirstHalf}</span><span aria-hidden="true"></span
+        ><span>${middleSecondHalf}</span></span
+      ><span part="end">${end}</span></span
+    >`;
+  }
+};
+TruncatedValueElement.styles = css`
+    :host {
+      display: inline-block;
+    }
+    ${unsafeCSS(styles)}
+  `;
+__decorateClass([
+  property({ type: String })
+], TruncatedValueElement.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number, attribute: "start-length" })
+], TruncatedValueElement.prototype, "startLength", 2);
+__decorateClass([
+  property({ type: Number, attribute: "end-length" })
+], TruncatedValueElement.prototype, "endLength", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TruncatedValueElement.prototype, "expandable", 2);
+TruncatedValueElement = __decorateClass([
+  customElement("truncated-value")
+], TruncatedValueElement);
+
+export { TruncatedValueElement };
+//# sourceMappingURL=web-component.js.map
+//# sourceMappingURL=web-component.js.map

package/dist/web-component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/truncate.ts","../src/core/styles.ts","../src/web-component.ts"],"names":[],"mappings":"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","file":"web-component.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 { LitElement, html, css, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { truncate, styles } from \"./core\";\n\n/**\n * A web component that intelligently truncates long string values.\n *\n * @element truncated-value\n *\n * @attr {string} value - The string value to display and potentially truncate\n * @attr {number} start-length - Number of characters to show at the start (default: 6)\n * @attr {number} end-length - Number of characters to show at the end (default: 4)\n * @attr {boolean} expandable - Whether the component should expand on focus/click\n *\n * @csspart container - The main container element\n * @csspart start - The start portion text\n * @csspart middle - The middle portion container\n * @csspart end - The end portion text\n *\n *\n * @example\n * ```html\n * <truncated-value\n *   value=\"0x1234567890abcdef1234567890abcdef12345678\"\n *   start-length=\"8\"\n *   end-length=\"6\"\n *   expandable\n * ></truncated-value>\n * ```\n */\n@customElement(\"truncated-value\")\nexport class TruncatedValueElement extends LitElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n    }\n    ${unsafeCSS(styles)}\n  `;\n\n  @property({ type: String })\n  value = \"\";\n\n  @property({ type: Number, attribute: \"start-length\" })\n  startLength = 6;\n\n  @property({ type: Number, attribute: \"end-length\" })\n  endLength = 4;\n\n  @property({ type: Boolean })\n  expandable = false;\n\n  override render() {\n    const { start, middle, end, isTruncated } = truncate({\n      value: this.value,\n      startLength: this.startLength,\n      endLength: this.endLength,\n    });\n\n    const middleFirstHalf = middle.slice(0, middle.length / 2);\n    const middleSecondHalf = middle.slice(middle.length / 2);\n\n    return html`<span\n      part=\"container\"\n      data-is-truncated=\"${isTruncated}\"\n      tabindex=\"${this.expandable ? 0 : -1}\"\n      class=\"truncated-value\"\n      ><span part=\"start\">${start}</span\n      ><span part=\"middle\" class=\"tv-middle\"\n        ><span>${middleFirstHalf}</span><span aria-hidden=\"true\"></span\n        ><span>${middleSecondHalf}</span></span\n      ><span part=\"end\">${end}</span></span\n    >`;\n  }\n}\n\n// Declare for type checking\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"truncated-value\": TruncatedValueElement;\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,131 @@
+{
+  "name": "@umplabs/truncated-value",
+  "version": "0.1.0",
+  "description": "A component that intelligently truncates long string values with interactive expansion and full searchability",
+  "keywords": [
+    "truncate",
+    "ellipsis",
+    "address",
+    "ethereum",
+    "web3",
+    "react",
+    "web-component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "UMP Labs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/umpeth/truncated-value.git"
+  },
+  "bugs": {
+    "url": "https://github.com/umpeth/truncated-value/issues"
+  },
+  "homepage": "https://github.com/umpeth/truncated-value#readme",
+  "type": "module",
+  "exports": {
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.js"
+      },
+      "require": {
+        "types": "./dist/react.d.cts",
+        "default": "./dist/react.cjs"
+      }
+    },
+    "./web-component": {
+      "import": {
+        "types": "./dist/web-component.d.ts",
+        "default": "./dist/web-component.js"
+      },
+      "require": {
+        "types": "./dist/web-component.d.cts",
+        "default": "./dist/web-component.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./dist/web-component.js",
+    "./dist/web-component.cjs"
+  ],
+  "peerDependencies": {
+    "lit": "^3.2.0",
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "lit": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@playwright/test": "^1.58.1",
+    "@size-limit/file": "^12.0.0",
+    "@storybook/react-vite": "^10.2.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.0.0",
+    "@types/node": "^25.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitest/coverage-v8": "^4.0.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "happy-dom": "^20.4.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.8.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "serve": "^14.2.5",
+    "size-limit": "^12.0.0",
+    "storybook": "^10.2.2",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "typescript-eslint": "^8.54.0",
+    "vitest": "^4.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "!(*.{js,jsx,ts,tsx})": [
+      "prettier --write --ignore-unknown"
+    ]
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "lint": "eslint src tests",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "size": "size-limit"
+  }
+}