@versini/ui-truncate 6.3.10 → 7.0.0

package/README.md

@@ -9,10 +9,15 @@ The Truncate component provides intelligent text truncation with toggle function
 
 ## Table of Contents
 
+- [Table of Contents](#table-of-contents)
 - [Features](#features)
 - [Installation](#installation)
 - [Usage](#usage)
+- [Props](#props)
+- [Example](#example)
+- [Behavior](#behavior)
 - [Rich Content Truncation](#rich-content-truncation)
+- [License](#license)
 
 ## Features
 
@@ -38,7 +43,7 @@ import { Truncate } from "@versini/ui-truncate";
 
 function App() {
   return (
-    <Truncate length={100} mode="dark" focusMode="light">
+    <Truncate length={100} mode="dark">
       This is a very long text that needs to be truncated.
     </Truncate>
   );
@@ -52,7 +57,6 @@ function App() {
 | `children`             | `React.ReactNode`                               | `null`     | The content to render. If not a string, it will be rendered as-is.                                                                                        |
 | `length`               | `number`                                        | `200`      | The maximum number of characters to display before truncating.                                                                                            |
 | `mode`                 | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The mode of the button used for toggling truncated text.                                                                                                  |
-| `focusMode`            | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The focus mode of the button, affecting the focus ring's appearance.                                                                                      |
 | `enableRichTruncation` | `boolean`                                       | `false`    | When `true`, measures nested React content text and truncates it. Collapsed view is plain text (styling removed); expanded view restores full formatting. |
 
 ## Example
@@ -63,9 +67,9 @@ import { Truncate } from "@versini/ui-truncate";
 function App() {
   return (
     <div>
-      <Truncate length={50} mode="light" focusMode="dark">
-        Lorem ipsum dolor sit amet. Sed do ut labore et dolore magna aliqua. Sed
-        do ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.
+      <Truncate length={50} mode="light">
+        Lorem ipsum dolor sit amet. Sed do ut labore et dolore magna. Sed do ut
+        labore et dolore magna. Lorem ipsum dolor sit amet.
       </Truncate>
     </div>
   );
@@ -76,7 +80,7 @@ function App() {
 
 - If the `children` prop is not a string, the component will render the `children` as-is without truncation.
 - If the text exceeds the specified `length`, it will be truncated, and a button will appear to toggle between the truncated and full text.
-- The button's appearance and focus ring can be customized using the `mode` and `focusMode` props.
+- The button's appearance can be customized using the `mode` prop.
 - When `enableRichTruncation` is `true`, the component traverses nested React nodes, measures their combined textual content, and in the collapsed state renders a flattened plain text slice (no markup) so the toggle button appears immediately after the text. Expanding restores the original rich markup.
 
 ## Rich Content Truncation

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 
-export declare const Truncate: ({ children, length, mode, focusMode, enableRichTruncation, noBorder, }: TruncateProps) => JSX.Element;
+export declare const Truncate: ({ children, length, mode, enableRichTruncation, noBorder, }: TruncateProps) => JSX.Element;
 
 declare type TruncateProps = {
     /**
@@ -26,12 +26,6 @@ declare type TruncateProps = {
      * @default "system"
      */
     mode?: "dark" | "light" | "system" | "alt-system";
-    /**
-     * The type of focus for the Button. This will change the color
-     * of the focus ring around the Button.
-     * @default "system"
-     */
-    focusMode?: "dark" | "light" | "system" | "alt-system";
     /**
      * Whether or not to render the Button with a border.
      * @default false

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-truncate v6.3.10
+  @versini/ui-truncate v7.0.0
   © 2026 gizmette.com
 */
 
@@ -119,7 +119,7 @@ const DEFAULT_LENGTH = 200;
     }
     /* c8 ignore next 1 */ return false; // Unsupported node types treated as non-block for spacing
 };
-const Truncate = ({ children, length = 200, mode = "system", focusMode = "system", enableRichTruncation = false, noBorder = false })=>{
+const Truncate = ({ children, length = 200, mode = "system", enableRichTruncation = false, noBorder = false })=>{
     const [isExpanded, setIsExpanded] = useState(false);
     const nonStringBypass = typeof children !== "string" && !enableRichTruncation;
     const fullText = useMemo(()=>{
@@ -178,7 +178,6 @@ const Truncate = ({ children, length = 200, mode = "system", focusMode = "system
             displayContent,
             isTruncated && /*#__PURE__*/ jsx(Button, {
                 mode: mode,
-                focusMode: focusMode,
                 noBorder: noBorder,
                 className: needsInlineSpacing ? "ml-2" : undefined,
                 size: "small",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-truncate",
-	"version": "6.3.10",
+	"version": "7.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -40,11 +40,11 @@
 		"@testing-library/jest-dom": "6.9.1"
 	},
 	"dependencies": {
-		"@versini/ui-button": "12.3.0",
+		"@versini/ui-button": "13.0.0",
 		"tailwindcss": "4.2.1"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "193b1479b6c92d2a479135fe7c51e7383b94c43a"
+	"gitHead": "a295349019d1512796f266bba535de383f12b6ee"
 }