@mks2508/mks-ui 0.9.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.d.ts +55 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.styles.js +62 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.types.d.ts +92 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/ChromeShell.types.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/index.d.ts +71 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/index.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/ChromeShell/index.js +114 -0
- package/dist/react-ui/blocks/Terminal/chrome.d.ts +1 -0
- package/dist/react-ui/blocks/Terminal/chrome.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/chrome.js +3 -1
- package/dist/react-ui/blocks/Terminal/index.d.ts +1 -0
- package/dist/react-ui/blocks/Terminal/index.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/index.js +3 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelWterm.js +20 -9
- package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.js +19 -6
- package/dist/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.js +31 -9
- package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.d.ts +31 -2
- package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.js +41 -5
- package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.d.ts +22 -0
- package/dist/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.d.ts +8 -0
- package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.js +54 -12
- package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.d.ts +52 -0
- package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.js +160 -0
- package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.d.ts +46 -0
- package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.js +195 -0
- package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.d.ts +39 -0
- package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.js +251 -0
- package/dist/react-ui/blocks/Terminal/renderers/index.d.ts +20 -0
- package/dist/react-ui/blocks/Terminal/renderers/index.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/renderers/types.d.ts +47 -0
- package/dist/react-ui/blocks/Terminal/renderers/types.d.ts.map +1 -0
- package/dist/react-ui/blocks/Terminal/restty.d.ts +2 -0
- package/dist/react-ui/blocks/Terminal/restty.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/restty.js +2 -1
- package/dist/react-ui/blocks/Terminal/wterm.d.ts +2 -0
- package/dist/react-ui/blocks/Terminal/wterm.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/wterm.js +2 -1
- package/dist/react-ui/blocks/Terminal/xterm.d.ts +2 -0
- package/dist/react-ui/blocks/Terminal/xterm.d.ts.map +1 -1
- package/dist/react-ui/blocks/Terminal/xterm.js +2 -1
- package/dist/react-ui/index.d.ts +2 -2
- package/dist/react-ui/index.d.ts.map +1 -1
- package/dist/react-ui/index.js +5 -3
- package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.d.ts +30 -0
- package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.d.ts.map +1 -0
- package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.js +31 -0
- package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.types.d.ts +66 -0
- package/dist/react-ui/ui/MiddleTruncate/MiddleTruncate.types.d.ts.map +1 -0
- package/dist/react-ui/ui/MiddleTruncate/index.d.ts +79 -0
- package/dist/react-ui/ui/MiddleTruncate/index.d.ts.map +1 -0
- package/dist/react-ui/ui/MiddleTruncate/index.js +164 -0
- package/dist/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.styles.js +1 -1
- package/dist/react-ui/ui/MiddleTruncatePath/index.d.ts +7 -1
- package/dist/react-ui/ui/MiddleTruncatePath/index.d.ts.map +1 -1
- package/dist/react-ui/ui/MiddleTruncatePath/index.js +21 -17
- package/dist/react-ui/ui/index.d.ts +1 -0
- package/dist/react-ui/ui/index.d.ts.map +1 -1
- package/dist/react-ui/ui/index.js +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Terminal renderers barrel.
|
|
3
|
+
*
|
|
4
|
+
* Chrome-less terminal renderers for maximum composability.
|
|
5
|
+
* Each renderer wraps a specific terminal implementation (xterm.js,
|
|
6
|
+
* wterm, restty) without any chrome, toolbar, or status bar.
|
|
7
|
+
*
|
|
8
|
+
* All renderers:
|
|
9
|
+
* - Lazy-load their peer dependency on first render
|
|
10
|
+
* - Gracefully fallback if the dependency is missing
|
|
11
|
+
* - Forward refs with ITerminalRendererRef interface
|
|
12
|
+
* - Read fontSize from useTerminalSettings context (override via props)
|
|
13
|
+
*
|
|
14
|
+
* @module components/devenv/terminal/renderers
|
|
15
|
+
*/
|
|
16
|
+
export { XTermRenderer } from './XTermRenderer';
|
|
17
|
+
export { WtermRenderer } from './WtermRenderer';
|
|
18
|
+
export { ResttyRenderer } from './ResttyRenderer';
|
|
19
|
+
export type { ITerminalRendererProps, ITerminalRendererRef, } from './types';
|
|
20
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/renderers/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,YAAY,EACV,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Terminal renderer types.
|
|
3
|
+
*
|
|
4
|
+
* Common interfaces for chrome-less terminal renderers.
|
|
5
|
+
* These renderers provide the raw terminal surface without
|
|
6
|
+
* any chrome (toolbar, status bar, header) for maximum
|
|
7
|
+
* composability.
|
|
8
|
+
*
|
|
9
|
+
* @module components/devenv/terminal/renderers/types
|
|
10
|
+
*/
|
|
11
|
+
/**
|
|
12
|
+
* Props for chrome-less terminal renderers.
|
|
13
|
+
*
|
|
14
|
+
* All renderers accept sessionId for tracking, fontSize
|
|
15
|
+
* override (defaults from useTerminalSettings context),
|
|
16
|
+
* and an optional onReady callback when the terminal
|
|
17
|
+
* is initialized and ready for interaction.
|
|
18
|
+
*/
|
|
19
|
+
export interface ITerminalRendererProps {
|
|
20
|
+
/** Optional session identifier for debugging/telemetry */
|
|
21
|
+
readonly sessionId?: string;
|
|
22
|
+
/** Font size override (defaults to useTerminalSettings context) */
|
|
23
|
+
readonly fontSize?: number;
|
|
24
|
+
/** Font family override (defaults to JetBrains Mono) */
|
|
25
|
+
readonly fontFamily?: string;
|
|
26
|
+
/** Called when terminal is initialized and ready for interaction */
|
|
27
|
+
readonly onReady?: () => void;
|
|
28
|
+
/** Custom class name for the container */
|
|
29
|
+
readonly className?: string;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Imperative handle ref for terminal renderers.
|
|
33
|
+
*
|
|
34
|
+
* All renderers must forward a ref implementing this interface
|
|
35
|
+
* so parents can programmatically control the terminal.
|
|
36
|
+
*/
|
|
37
|
+
export interface ITerminalRendererRef {
|
|
38
|
+
/** Focus the terminal for input */
|
|
39
|
+
focus(): void;
|
|
40
|
+
/** Write data to the terminal (no newline) */
|
|
41
|
+
write(data: string): void;
|
|
42
|
+
/** Clear the terminal buffer */
|
|
43
|
+
clear(): void;
|
|
44
|
+
/** Resize the terminal to given dimensions */
|
|
45
|
+
resize(cols: number, rows: number): void;
|
|
46
|
+
}
|
|
47
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/renderers/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;;;;;GAOG;AACH,MAAM,WAAW,sBAAsB;IACrC,0DAA0D;IAC1D,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAE5B,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,wDAAwD;IACxD,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAE7B,oEAAoE;IACpE,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAE9B,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;GAKG;AACH,MAAM,WAAW,oBAAoB;IACnC,mCAAmC;IACnC,KAAK,IAAI,IAAI,CAAC;IAEd,8CAA8C;IAC9C,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B,gCAAgC;IAChC,KAAK,IAAI,IAAI,CAAC;IAEd,8CAA8C;IAC9C,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1C"}
|
|
@@ -24,4 +24,6 @@ export { TerminalInteractivePanelRestty } from './panel/TerminalInteractivePanel
|
|
|
24
24
|
export { TerminalThemeSelector, type ITerminalThemeSelectorProps } from './panel/TerminalThemeSelector';
|
|
25
25
|
export { ResttyTerminal, ResttySessionProvider, useResttySession, ResttyProvider, useRestty, useResttyPane, useResttyPanes, useResttyVisibility, useResttyPlugins, } from './restty/index';
|
|
26
26
|
export type { IResttyTerminalProps, IResttyTerminalRef, IResttySessionProviderProps, IResttySessionContextValue, IResttyContextValue, IUseResttyPaneReturn, IUseResttyPanesReturn, IUseResttyVisibilityOptions, IUseResttyPluginsReturn, Restty, ResttyPlugin, ResttyPluginInfo, ResttyPaneHandle, ResttyFontSource, ResttyPaneSplitDirection, GhosttyTheme, } from './restty/index';
|
|
27
|
+
export { ResttyRenderer } from './renderers/ResttyRenderer';
|
|
28
|
+
export type { ITerminalRendererProps, ITerminalRendererRef, } from './renderers/types';
|
|
27
29
|
//# sourceMappingURL=restty.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"restty.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/restty.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAGxF,OAAO,EAAE,qBAAqB,EAAE,KAAK,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAGxG,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EACV,oBAAoB,EACpB,kBAAkB,EAClB,2BAA2B,EAC3B,0BAA0B,EAC1B,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,2BAA2B,EAC3B,uBAAuB,EACvB,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,wBAAwB,EACxB,YAAY,GACb,MAAM,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"restty.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/restty.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAGxF,OAAO,EAAE,qBAAqB,EAAE,KAAK,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAGxG,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EACV,oBAAoB,EACpB,kBAAkB,EAClB,2BAA2B,EAC3B,0BAA0B,EAC1B,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,2BAA2B,EAC3B,uBAAuB,EACvB,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,gBAAgB,EAChB,wBAAwB,EACxB,YAAY,GACb,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,YAAY,EACV,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC"}
|
|
@@ -8,5 +8,6 @@ import { useResttyPanes } from "./restty/useResttyPanes.js";
|
|
|
8
8
|
import { useResttyVisibility } from "./restty/useResttyVisibility.js";
|
|
9
9
|
import { useResttyPlugins } from "./restty/useResttyPlugins.js";
|
|
10
10
|
import "./restty/index.js";
|
|
11
|
+
import { ResttyRenderer } from "./renderers/ResttyRenderer.js";
|
|
11
12
|
|
|
12
|
-
export { ResttyProvider, ResttySessionProvider, ResttyTerminal, TerminalInteractivePanelRestty, TerminalThemeSelector, useRestty, useResttyPane, useResttyPanes, useResttyPlugins, useResttySession, useResttyVisibility };
|
|
13
|
+
export { ResttyProvider, ResttyRenderer, ResttySessionProvider, ResttyTerminal, TerminalInteractivePanelRestty, TerminalThemeSelector, useRestty, useResttyPane, useResttyPanes, useResttyPlugins, useResttySession, useResttyVisibility };
|
|
@@ -17,4 +17,6 @@
|
|
|
17
17
|
*/
|
|
18
18
|
export { TerminalInteractivePanelWterm } from './panel/TerminalInteractivePanelWterm';
|
|
19
19
|
export { WtermJsonTransport } from './wterm/WtermJsonTransport';
|
|
20
|
+
export { WtermRenderer } from './renderers/WtermRenderer';
|
|
21
|
+
export type { ITerminalRendererProps, ITerminalRendererRef, } from './renderers/types';
|
|
20
22
|
//# sourceMappingURL=wterm.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wterm.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/wterm.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC"}
|
|
1
|
+
{"version":3,"file":"wterm.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/wterm.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,YAAY,EACV,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { WtermJsonTransport } from "./wterm/WtermJsonTransport.js";
|
|
2
2
|
import { TerminalInteractivePanelWterm } from "./panel/TerminalInteractivePanelWterm.js";
|
|
3
|
+
import { WtermRenderer } from "./renderers/WtermRenderer.js";
|
|
3
4
|
|
|
4
|
-
export { TerminalInteractivePanelWterm, WtermJsonTransport };
|
|
5
|
+
export { TerminalInteractivePanelWterm, WtermJsonTransport, WtermRenderer };
|
|
@@ -22,5 +22,7 @@ export { TerminalInteractivePanelXterm } from './panel/TerminalInteractivePanelX
|
|
|
22
22
|
export { XTermAdapter } from './XTermAdapter';
|
|
23
23
|
export { XTermWrapper, useTerminalSearch, type IXTermWrapperProps, } from './TerminalXterm';
|
|
24
24
|
export { LogLinesViewer, type ILogLinesViewerProps } from './panel/LogLinesViewer';
|
|
25
|
+
export { XTermRenderer } from './renderers/XTermRenderer';
|
|
25
26
|
export type { ITerminalLogsPanelProps, ITerminalLogsPanelRef, } from './panel/TerminalLogsPanel.types';
|
|
27
|
+
export type { ITerminalRendererProps, ITerminalRendererRef, } from './renderers/types';
|
|
26
28
|
//# sourceMappingURL=xterm.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xterm.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/xterm.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG1E,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AAGtF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,KAAK,kBAAkB,GACxB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,cAAc,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnF,YAAY,EACV,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,iCAAiC,CAAC"}
|
|
1
|
+
{"version":3,"file":"xterm.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/xterm.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG1E,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,qBAAqB,GAC3B,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AAGtF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,KAAK,kBAAkB,GACxB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,cAAc,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnF,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAG1D,YAAY,EACV,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,iCAAiC,CAAC;AAEzC,YAAY,EACV,sBAAsB,EACtB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC"}
|
|
@@ -5,5 +5,6 @@ import { terminalLogsPanelStyles } from "./panel/TerminalLogsPanel/TerminalLogsP
|
|
|
5
5
|
import { TerminalLogsPanel } from "./panel/TerminalLogsPanel/index.js";
|
|
6
6
|
import { TerminalInteractivePanelXterm } from "./panel/TerminalInteractivePanelXterm.js";
|
|
7
7
|
import { XTermAdapter } from "./XTermAdapter.js";
|
|
8
|
+
import { XTermRenderer } from "./renderers/XTermRenderer.js";
|
|
8
9
|
|
|
9
|
-
export { LogLinesViewer, TerminalInteractivePanelXterm, TerminalLogsPanel, TerminalPanel, XTermAdapter, XTermWrapper, terminalLogsPanelStyles, useTerminalSearch };
|
|
10
|
+
export { LogLinesViewer, TerminalInteractivePanelXterm, TerminalLogsPanel, TerminalPanel, XTermAdapter, XTermRenderer, XTermWrapper, terminalLogsPanelStyles, useTerminalSearch };
|
package/dist/react-ui/index.d.ts
CHANGED
|
@@ -18,6 +18,6 @@ export * from './icons';
|
|
|
18
18
|
export * from './lib';
|
|
19
19
|
export { Sidebar, SidebarNav, SidebarToggle, SidebarContent, SidebarIndicator, SidebarFluidIndicator, SidebarSafeArea, SidebarItem, SidebarSubContent, SidebarSubLink, SidebarTooltip, useSidebarContext, useSidebarKeyboard, useSidebarIndicator, useSubContent, generateSidebarStyles, generateIndicatorStyles, type SidebarProps, type SidebarNavProps, type SidebarToggleProps, type SidebarContentProps, type SidebarIndicatorProps, type SidebarSafeAreaProps, type SidebarItemProps, type SidebarState, type SidebarToggleState, type SidebarItemState, type SidebarIndicatorState, type SidebarContextValue, type SidebarDimensions, type SidebarSafeAreas, type SidebarAnimations, type SidebarConfig, type SidebarRenderProp, type SidebarToggleRenderProp, type SidebarItemRenderProp, type SidebarIndicatorRenderProp, type SidebarVisualStyle, type SidebarSubContentProps, type SidebarSubLinkProps, type SidebarTooltipProps, SidebarCollapseMode, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarLayoutBehaviour, SidebarWidth, SidebarTransitionDuration, SidebarZIndex, SidebarBorderRadius, SidebarSafeAreaPosition, SidebarTimingFunction, SidebarIconLibrary, DEFAULT_DIMENSIONS, DEFAULT_SAFE_AREAS, DEFAULT_ANIMATIONS, DEFAULT_CONFIG, DEFAULT_VISUAL_STYLE, SIDEBAR_VISUAL_PRESETS, } from './blocks/Sidebar';
|
|
20
20
|
export { MobileBottomNav, NavVariant, NavSize, LabelPosition, AnimationType, NavItemState, IconSize, ZIndexLevel, BlurIntensity, useIOSSafariFix, useIOSFixedReset, detectIOSVersion, type RootProps, type NavListProps, type NavItemProps, type NavContextValue, type SpringConfig, type TweenConfig, type AnimationConfig, type GlassConfig, type BaseNavProps, type IOSSafariFixConfig, DEFAULT_ANIMATION_CONFIG, DEFAULT_GLASS_CONFIG, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, rootVariants, navListVariants, navItemVariants, iconVariants, labelVariants, navBadgeVariants, spacerVariants, } from './blocks/BottomNavBar';
|
|
21
|
-
export { TerminalPanelChrome, TerminalPanelHeader, TerminalPanelFooter,
|
|
22
|
-
export type { ITerminalPanelHeaderProps, ITerminalPanelFooterProps, IParsedLogEntry, TLogLevel, TLogLevelFilter, ITerminalSession, ILevelFilterButton, TTerminalAction, } from './blocks/Terminal';
|
|
21
|
+
export { TerminalPanelChrome, TerminalPanelHeader, TerminalPanelFooter, ChromeShell, LogParserService, TerminalActionBar, TerminalStatusBar, TerminalConnectionStatus, TerminalClearButton, LOG_LEVEL_STYLES, STATUS_COLORS, } from './blocks/Terminal';
|
|
22
|
+
export type { ITerminalPanelChromeProps, ITerminalPanelHeaderProps, ITerminalPanelFooterProps, IChromeShellProps, TChromeShellAccent, TChromeShellSize, TChromeShellSlot, TChromeShellVariant, IParsedLogEntry, TLogLevel, TLogLevelFilter, ITerminalSession, ILevelFilterButton, TTerminalAction, } from './blocks/Terminal';
|
|
23
23
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,cAAc,cAAc,CAAC;AAG7B,cAAc,MAAM,CAAC;AAGrB,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,OAAO,CAAC;AAItB,OAAO,EACL,OAAO,EACP,UAAU,EACV,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,sBAAsB,EACtB,YAAY,EACZ,yBAAyB,EACzB,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,eAAe,EACf,UAAU,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,wBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,cAAc,GACf,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,cAAc,cAAc,CAAC;AAG7B,cAAc,MAAM,CAAC;AAGrB,cAAc,cAAc,CAAC;AAG7B,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC;AAGxB,cAAc,OAAO,CAAC;AAItB,OAAO,EACL,OAAO,EACP,UAAU,EACV,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAC/B,KAAK,kBAAkB,EACvB,KAAK,sBAAsB,EAC3B,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,sBAAsB,EACtB,YAAY,EACZ,yBAAyB,EACzB,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,eAAe,EACf,UAAU,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,wBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,YAAY,EACZ,eAAe,EACf,eAAe,EACf,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,cAAc,GACf,MAAM,uBAAuB,CAAC;AAS/B,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EAEnB,WAAW,EAEX,gBAAgB,EAEhB,iBAAiB,EACjB,iBAAiB,EACjB,wBAAwB,EACxB,mBAAmB,EAEnB,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EAEV,yBAAyB,EACzB,yBAAyB,EACzB,yBAAyB,EAEzB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EAEnB,eAAe,EACf,SAAS,EACT,eAAe,EAEf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAChB,MAAM,mBAAmB,CAAC"}
|
package/dist/react-ui/index.js
CHANGED
|
@@ -75,7 +75,9 @@ import { fieldVariants } from "./ui/Field/Field.styles.js";
|
|
|
75
75
|
import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./ui/Field/index.js";
|
|
76
76
|
import { FileIconStyles, FolderIconStyles, fileIconVariants, folderIconVariants } from "./ui/FileIcon/FileIcon.styles.js";
|
|
77
77
|
import { FileIcon, FolderIcon } from "./ui/FileIcon/index.js";
|
|
78
|
-
import {
|
|
78
|
+
import { MiddleTruncateStyles, middleTruncateVariants } from "./ui/MiddleTruncate/MiddleTruncate.styles.js";
|
|
79
|
+
import { MiddleTruncate } from "./ui/MiddleTruncate/index.js";
|
|
80
|
+
import { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles } from "./ui/MiddleTruncatePath/MiddleTruncatePath.styles.js";
|
|
79
81
|
import { MiddleTruncatePath } from "./ui/MiddleTruncatePath/index.js";
|
|
80
82
|
import { FileItemGitStatusClasses, FileItemStyles, fileItemVariants } from "./ui/FileItem/FileItem.styles.js";
|
|
81
83
|
import { FileItem } from "./ui/FileItem/index.js";
|
|
@@ -164,13 +166,13 @@ import "./blocks/BottomNavBar/index.js";
|
|
|
164
166
|
import { LogParserService } from "./blocks/Terminal/parsing/LogParserService.js";
|
|
165
167
|
import { LOG_LEVEL_STYLES, STATUS_COLORS } from "./blocks/Terminal/Terminal.tokens.js";
|
|
166
168
|
import { TerminalClearButton } from "./blocks/Terminal/controls/TerminalAtoms.js";
|
|
167
|
-
import { TerminalSettingsPopover } from "./blocks/Terminal/panel/TerminalSettingsPopover/index.js";
|
|
168
169
|
import { TerminalActionBar } from "./blocks/Terminal/controls/TerminalActionBar/index.js";
|
|
169
170
|
import { TerminalConnectionStatus } from "./blocks/Terminal/controls/TerminalConnectionStatus/index.js";
|
|
170
171
|
import { TerminalStatusBar } from "./blocks/Terminal/controls/TerminalStatusBar/index.js";
|
|
171
172
|
import { TerminalPanelHeader } from "./blocks/Terminal/panel/TerminalPanelHeader/index.js";
|
|
172
173
|
import { TerminalPanelChrome } from "./blocks/Terminal/panel/TerminalPanelChrome.js";
|
|
174
|
+
import { ChromeShell } from "./blocks/Terminal/ChromeShell/index.js";
|
|
173
175
|
import { TerminalPanelFooter } from "./blocks/Terminal/panel/TerminalPanelFooter/index.js";
|
|
174
176
|
import "./blocks/Terminal/index.js";
|
|
175
177
|
|
|
176
|
-
export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, AnimationType, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BlurIntensity, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DEFAULT_ANIMATIONS, DEFAULT_ANIMATION_CONFIG, DEFAULT_CONFIG, DEFAULT_DIMENSIONS, DEFAULT_GLASS_CONFIG, DEFAULT_GOOEY_CONFIG, DEFAULT_SAFE_AREAS, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, DEFAULT_VISUAL_STYLE, DOT_MATRIX_PATTERNS, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DotMatrix, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileIcon, FileIconStyles, FileItem, FileItemGitStatusClasses, FileItemStyles, FilePanel, FilePanelStyles, FileTree, FileTreeStyles, FolderIcon, FolderIconStyles, GOOEY_DEFAULTS, Globe, GooeyButton, GooeyCanvas, GooeyFilter, GooeyMorphingSurface, Highlight, HighlightItem, HomeIcon, HugeIcons, IconSize, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LOG_LEVEL_STYLES, Label, LabelPosition, Layers, LayoutPanelTopIcon, ListIcon, LogParserService, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MiddleTruncatePath, MiddleTruncatePathStyles, MobileBottomNav, Morph, MorphPath, MorphingPopover, MorphingPopoverWithTarget, NavItemState, NavSize, NavVariant, OperationCard, OperationCardActions, OperationCardHeader, OperationCardProgress, OperationCardRoot, OperationCardStats, OperationCardStyles, OperationCardVisualizer, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, SIDEBAR_VISUAL_PRESETS, STATUS_COLORS, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Sidebar, SidebarBorderRadius, SidebarCollapseMode, SidebarContent, SidebarFluidIndicator, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarIconLibrary, SidebarIndicator, SidebarItem, SidebarLayoutBehaviour, SidebarNav, SidebarSafeArea, SidebarSafeAreaPosition, SidebarSubContent, SidebarSubLink, SidebarTimingFunction, SidebarToggle, SidebarTooltip, SidebarTransitionDuration, SidebarWidth, SidebarZIndex, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalActionBar, TerminalClearButton, TerminalConnectionStatus, TerminalIcon, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader,
|
|
178
|
+
export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, AnimationType, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BlurIntensity, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, ChromeShell, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DEFAULT_ANIMATIONS, DEFAULT_ANIMATION_CONFIG, DEFAULT_CONFIG, DEFAULT_DIMENSIONS, DEFAULT_GLASS_CONFIG, DEFAULT_GOOEY_CONFIG, DEFAULT_SAFE_AREAS, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, DEFAULT_VISUAL_STYLE, DOT_MATRIX_PATTERNS, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DotMatrix, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileIcon, FileIconStyles, FileItem, FileItemGitStatusClasses, FileItemStyles, FilePanel, FilePanelStyles, FileTree, FileTreeStyles, FolderIcon, FolderIconStyles, GOOEY_DEFAULTS, Globe, GooeyButton, GooeyCanvas, GooeyFilter, GooeyMorphingSurface, Highlight, HighlightItem, HomeIcon, HugeIcons, IconSize, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LOG_LEVEL_STYLES, Label, LabelPosition, Layers, LayoutPanelTopIcon, ListIcon, LogParserService, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MiddleTruncate, MiddleTruncatePath, MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles, MiddleTruncateStyles, MobileBottomNav, Morph, MorphPath, MorphingPopover, MorphingPopoverWithTarget, NavItemState, NavSize, NavVariant, OperationCard, OperationCardActions, OperationCardHeader, OperationCardProgress, OperationCardRoot, OperationCardStats, OperationCardStyles, OperationCardVisualizer, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, SIDEBAR_VISUAL_PRESETS, STATUS_COLORS, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Sidebar, SidebarBorderRadius, SidebarCollapseMode, SidebarContent, SidebarFluidIndicator, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarIconLibrary, SidebarIndicator, SidebarItem, SidebarLayoutBehaviour, SidebarNav, SidebarSafeArea, SidebarSafeAreaPosition, SidebarSubContent, SidebarSubLink, SidebarTimingFunction, SidebarToggle, SidebarTooltip, SidebarTransitionDuration, SidebarWidth, SidebarZIndex, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalActionBar, TerminalClearButton, TerminalConnectionStatus, TerminalIcon, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, TerminalStatusBar, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, ZIndexLevel, accordionVariants, badgeVariants, bracketVariants, buildColorMatrixValues, buildDelays, buildFilterString, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, computeBlur, dataCardStyles, dataCardVariants, detectIOSVersion, dialogStyles, dynamicToggleStyles, dynamicToggleVariants, fieldVariants, fileIconVariants, fileItemVariants, filePanelVariants, fileTreeVariants, folderIconVariants, generateIndicatorStyles, generateSidebarStyles, getResponsiveDuration, getResponsiveStagger, getStrictContext, iconVariants, inputGroupAddonVariants, inputGroupButtonVariants, labelVariants, middleTruncateVariants, morphPathDown, morphPathUp, badgeVariants$1 as navBadgeVariants, navItemVariants, navListVariants, operationCardVariants, popoverStyles, progressStyles, rootVariants, shouldShowSeparator, spacerVariants, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useDynamicToggle, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIOSFixedReset, useIOSSafariFix, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, useMorphPath, useOperationCard, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSidebarContext, useSidebarIndicator, useSidebarKeyboard, useSubContent, useSwitch, useTooltip, useViewTransitions };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Styles for MiddleTruncate.
|
|
3
|
+
*
|
|
4
|
+
* @module @mks2508/mks-ui/react/ui/MiddleTruncate
|
|
5
|
+
*/
|
|
6
|
+
import type { StyleSlots } from '../../../core/types';
|
|
7
|
+
/**
|
|
8
|
+
* Visual regions of the MiddleTruncate component.
|
|
9
|
+
*
|
|
10
|
+
* | Slot | Region |
|
|
11
|
+
* |------|--------|
|
|
12
|
+
* | `root` | Container `<span>` wrapping start + ellipsis + end segments |
|
|
13
|
+
* | `start` | Truncatable leading portion (collapses when narrow) |
|
|
14
|
+
* | `ellipsis` | Ellipsis character(s) between start and end |
|
|
15
|
+
* | `end` | Fixed trailing portion (always visible) |
|
|
16
|
+
*/
|
|
17
|
+
export type TMiddleTruncateSlot = 'root' | 'start' | 'ellipsis' | 'end';
|
|
18
|
+
/**
|
|
19
|
+
* Default Tailwind classes for each MiddleTruncate slot.
|
|
20
|
+
*
|
|
21
|
+
* Uses CSS-only flex truncation — `start` segment has `min-w-0 flex-1 truncate`
|
|
22
|
+
* so the browser truncates it automatically when the container is too narrow.
|
|
23
|
+
* No JS measurement, no ResizeObserver.
|
|
24
|
+
*/
|
|
25
|
+
export declare const MiddleTruncateStyles: StyleSlots<TMiddleTruncateSlot>;
|
|
26
|
+
/** CVA variants for the MiddleTruncate root. */
|
|
27
|
+
export declare const middleTruncateVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
28
|
+
/** Tailwind classes used when text is short enough to skip splitting. */
|
|
29
|
+
export declare const MiddleTruncateShortRootStyles: "truncate";
|
|
30
|
+
//# sourceMappingURL=MiddleTruncate.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MiddleTruncate.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC;AAExE;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,UAAU,CAAC,mBAAmB,CAKvD,CAAC;AAEX,gDAAgD;AAChD,eAAO,MAAM,sBAAsB,2FAGjC,CAAC;AAEH,yEAAyE;AACzE,eAAO,MAAM,6BAA6B,EAAG,UAAmB,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { cva } from "class-variance-authority";
|
|
2
|
+
|
|
3
|
+
//#region src/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.ts
|
|
4
|
+
/**
|
|
5
|
+
* Styles for MiddleTruncate.
|
|
6
|
+
*
|
|
7
|
+
* @module @mks2508/mks-ui/react/ui/MiddleTruncate
|
|
8
|
+
*/
|
|
9
|
+
/**
|
|
10
|
+
* Default Tailwind classes for each MiddleTruncate slot.
|
|
11
|
+
*
|
|
12
|
+
* Uses CSS-only flex truncation — `start` segment has `min-w-0 flex-1 truncate`
|
|
13
|
+
* so the browser truncates it automatically when the container is too narrow.
|
|
14
|
+
* No JS measurement, no ResizeObserver.
|
|
15
|
+
*/
|
|
16
|
+
const MiddleTruncateStyles = {
|
|
17
|
+
root: "inline-flex items-baseline min-w-0 max-w-full",
|
|
18
|
+
start: "truncate min-w-0 flex-1",
|
|
19
|
+
ellipsis: "shrink-0",
|
|
20
|
+
end: "shrink-0"
|
|
21
|
+
};
|
|
22
|
+
/** CVA variants for the MiddleTruncate root. */
|
|
23
|
+
const middleTruncateVariants = cva(MiddleTruncateStyles.root, {
|
|
24
|
+
variants: {},
|
|
25
|
+
defaultVariants: {}
|
|
26
|
+
});
|
|
27
|
+
/** Tailwind classes used when text is short enough to skip splitting. */
|
|
28
|
+
const MiddleTruncateShortRootStyles = "truncate";
|
|
29
|
+
|
|
30
|
+
//#endregion
|
|
31
|
+
export { MiddleTruncateShortRootStyles, MiddleTruncateStyles, middleTruncateVariants };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Types for MiddleTruncate.
|
|
3
|
+
*
|
|
4
|
+
* @module @mks2508/mks-ui/react/ui/MiddleTruncate
|
|
5
|
+
*/
|
|
6
|
+
import type { SlotOverrides } from '../../../core/types';
|
|
7
|
+
import type { TMiddleTruncateSlot } from './MiddleTruncate.styles';
|
|
8
|
+
/**
|
|
9
|
+
* Props for `<MiddleTruncate>`.
|
|
10
|
+
*
|
|
11
|
+
* Supports two strategies via discriminated union:
|
|
12
|
+
* - `strategy: 'chars'` — split by individual characters (hashes, UUIDs, commit SHAs)
|
|
13
|
+
* - `strategy: 'segments'` — split by a separator string (paths, domains, k8s names)
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* // Char-based truncation (keep 6 start + 4 end chars)
|
|
18
|
+
* <MiddleTruncate strategy="chars" text="0xABCDEF1234567890" keepStart={6} keepEnd={4} />
|
|
19
|
+
* // → 0xABCD…7890
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* // Segment-based truncation (file path)
|
|
25
|
+
* <MiddleTruncate strategy="segments" separator="/" text="src/components/Button/index.tsx" keepEnd={2} />
|
|
26
|
+
* // → src/…/Button/index.tsx
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export type IMiddleTruncateProps = {
|
|
30
|
+
/** Full text to truncate. */
|
|
31
|
+
text: string;
|
|
32
|
+
/** Character-level truncation. */
|
|
33
|
+
strategy: 'chars';
|
|
34
|
+
/** Leading characters locked visible. Default 0. */
|
|
35
|
+
keepStart?: number;
|
|
36
|
+
/** Trailing characters locked visible. Default 6. */
|
|
37
|
+
keepEnd?: number;
|
|
38
|
+
/** Ellipsis character. Default '…'. */
|
|
39
|
+
ellipsis?: string;
|
|
40
|
+
/** Tooltip on hover. Default: full text. */
|
|
41
|
+
title?: string;
|
|
42
|
+
/** Optional CSS class merged onto the root span. */
|
|
43
|
+
className?: string;
|
|
44
|
+
/** Override default Tailwind classes per visual slot. */
|
|
45
|
+
slots?: SlotOverrides<TMiddleTruncateSlot>;
|
|
46
|
+
} | {
|
|
47
|
+
/** Full text to truncate. */
|
|
48
|
+
text: string;
|
|
49
|
+
/** Segment-level truncation split by separator. */
|
|
50
|
+
strategy: 'segments';
|
|
51
|
+
/** Required separator string (e.g. '/' for paths, '.' for domains, '-' for k8s). */
|
|
52
|
+
separator: string;
|
|
53
|
+
/** Leading segments locked visible. Default 0. */
|
|
54
|
+
keepStart?: number;
|
|
55
|
+
/** Trailing segments locked visible. Default 1. */
|
|
56
|
+
keepEnd?: number;
|
|
57
|
+
/** Ellipsis character. Default '…'. */
|
|
58
|
+
ellipsis?: string;
|
|
59
|
+
/** Tooltip on hover. Default: full text. */
|
|
60
|
+
title?: string;
|
|
61
|
+
/** Optional CSS class merged onto the root span. */
|
|
62
|
+
className?: string;
|
|
63
|
+
/** Override default Tailwind classes per visual slot. */
|
|
64
|
+
slots?: SlotOverrides<TMiddleTruncateSlot>;
|
|
65
|
+
};
|
|
66
|
+
//# sourceMappingURL=MiddleTruncate.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MiddleTruncate.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncate/MiddleTruncate.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,oBAAoB,GAC5B;IACE,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;CAC5C,GACD;IACE,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,EAAE,UAAU,CAAC;IACrB,oFAAoF;IACpF,SAAS,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;CAC5C,CAAC"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MiddleTruncate — CSS-only middle truncation primitive.
|
|
3
|
+
*
|
|
4
|
+
* Truncates text from the middle, preserving the start and/or end portions.
|
|
5
|
+
* Supports two strategies:
|
|
6
|
+
*
|
|
7
|
+
* - `strategy='chars'` — splits by individual characters, useful for hashes,
|
|
8
|
+
* UUIDs, commit SHAs, or any long identifier where you want to keep the
|
|
9
|
+
* first N and last M characters visible.
|
|
10
|
+
*
|
|
11
|
+
* - `strategy='segments'` — splits by a separator string (e.g. '/', '.', '-'),
|
|
12
|
+
* useful for file paths, domain names, or k8s resource names where segment
|
|
13
|
+
* boundaries are semantically meaningful.
|
|
14
|
+
*
|
|
15
|
+
* Uses CSS-only flex truncation: the `start` segment uses `flex-1 min-w-0 truncate`
|
|
16
|
+
* so the browser truncates it automatically when the container is too narrow.
|
|
17
|
+
* Zero JS measurement, zero ResizeObserver.
|
|
18
|
+
*
|
|
19
|
+
* @module @mks2508/mks-ui/react/ui/MiddleTruncate
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // Hash truncation — preserve first 6 and last 4 chars
|
|
24
|
+
* <MiddleTruncate strategy="chars" text="0xABCDEF1234567890" keepStart={6} keepEnd={4} />
|
|
25
|
+
* // → 0xABCD…7890
|
|
26
|
+
* ```
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```tsx
|
|
30
|
+
* // File path — preserve filename + parent dir
|
|
31
|
+
* <MiddleTruncate
|
|
32
|
+
* strategy="segments"
|
|
33
|
+
* separator="/"
|
|
34
|
+
* text="src/components/Terminal/primitives/ChromeShell.tsx"
|
|
35
|
+
* keepEnd={2}
|
|
36
|
+
* />
|
|
37
|
+
* // → src/…/ChromeShell.tsx
|
|
38
|
+
* ```
|
|
39
|
+
*
|
|
40
|
+
* @example
|
|
41
|
+
* ```tsx
|
|
42
|
+
* // Domain — preserve root + TLD
|
|
43
|
+
* <MiddleTruncate
|
|
44
|
+
* strategy="segments"
|
|
45
|
+
* separator="."
|
|
46
|
+
* text="api.production.eu-west.example.com"
|
|
47
|
+
* keepStart={1}
|
|
48
|
+
* keepEnd={2}
|
|
49
|
+
* />
|
|
50
|
+
* // → api.…example.com
|
|
51
|
+
* ```
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```tsx
|
|
55
|
+
* // With slot overrides for custom styling
|
|
56
|
+
* <MiddleTruncate
|
|
57
|
+
* strategy="segments"
|
|
58
|
+
* separator="/"
|
|
59
|
+
* text={path}
|
|
60
|
+
* keepEnd={2}
|
|
61
|
+
* slots={{
|
|
62
|
+
* start: 'text-muted-foreground/60',
|
|
63
|
+
* ellipsis: 'text-muted-foreground/40 mx-0.5',
|
|
64
|
+
* end: 'font-semibold text-foreground',
|
|
65
|
+
* }}
|
|
66
|
+
* />
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
import type { IMiddleTruncateProps } from './MiddleTruncate.types';
|
|
70
|
+
/**
|
|
71
|
+
* Middle-truncates text, preserving start and/or end portions.
|
|
72
|
+
*
|
|
73
|
+
* @param props - See {@link IMiddleTruncateProps}
|
|
74
|
+
*/
|
|
75
|
+
export declare const MiddleTruncate: import("react").MemoExoticComponent<(props: IMiddleTruncateProps) => React.ReactElement>;
|
|
76
|
+
export { MiddleTruncateStyles, middleTruncateVariants, } from './MiddleTruncate.styles';
|
|
77
|
+
export type { TMiddleTruncateSlot } from './MiddleTruncate.styles';
|
|
78
|
+
export type { IMiddleTruncateProps } from './MiddleTruncate.types';
|
|
79
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncate/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAWH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE;;;;GAIG;AACH,eAAO,MAAM,cAAc,8CAClB,oBAAoB,KAC1B,KAAK,CAAC,YAAY,CAqBnB,CAAC;AA+FH,OAAO,EACL,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { cn } from "../../lib/utils.js";
|
|
4
|
+
import { MiddleTruncateShortRootStyles, MiddleTruncateStyles, middleTruncateVariants } from "./MiddleTruncate.styles.js";
|
|
5
|
+
import { memo } from "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
|
|
8
|
+
//#region src/react-ui/ui/MiddleTruncate/index.tsx
|
|
9
|
+
/**
|
|
10
|
+
* MiddleTruncate — CSS-only middle truncation primitive.
|
|
11
|
+
*
|
|
12
|
+
* Truncates text from the middle, preserving the start and/or end portions.
|
|
13
|
+
* Supports two strategies:
|
|
14
|
+
*
|
|
15
|
+
* - `strategy='chars'` — splits by individual characters, useful for hashes,
|
|
16
|
+
* UUIDs, commit SHAs, or any long identifier where you want to keep the
|
|
17
|
+
* first N and last M characters visible.
|
|
18
|
+
*
|
|
19
|
+
* - `strategy='segments'` — splits by a separator string (e.g. '/', '.', '-'),
|
|
20
|
+
* useful for file paths, domain names, or k8s resource names where segment
|
|
21
|
+
* boundaries are semantically meaningful.
|
|
22
|
+
*
|
|
23
|
+
* Uses CSS-only flex truncation: the `start` segment uses `flex-1 min-w-0 truncate`
|
|
24
|
+
* so the browser truncates it automatically when the container is too narrow.
|
|
25
|
+
* Zero JS measurement, zero ResizeObserver.
|
|
26
|
+
*
|
|
27
|
+
* @module @mks2508/mks-ui/react/ui/MiddleTruncate
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```tsx
|
|
31
|
+
* // Hash truncation — preserve first 6 and last 4 chars
|
|
32
|
+
* <MiddleTruncate strategy="chars" text="0xABCDEF1234567890" keepStart={6} keepEnd={4} />
|
|
33
|
+
* // → 0xABCD…7890
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* ```tsx
|
|
38
|
+
* // File path — preserve filename + parent dir
|
|
39
|
+
* <MiddleTruncate
|
|
40
|
+
* strategy="segments"
|
|
41
|
+
* separator="/"
|
|
42
|
+
* text="src/components/Terminal/primitives/ChromeShell.tsx"
|
|
43
|
+
* keepEnd={2}
|
|
44
|
+
* />
|
|
45
|
+
* // → src/…/ChromeShell.tsx
|
|
46
|
+
* ```
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* ```tsx
|
|
50
|
+
* // Domain — preserve root + TLD
|
|
51
|
+
* <MiddleTruncate
|
|
52
|
+
* strategy="segments"
|
|
53
|
+
* separator="."
|
|
54
|
+
* text="api.production.eu-west.example.com"
|
|
55
|
+
* keepStart={1}
|
|
56
|
+
* keepEnd={2}
|
|
57
|
+
* />
|
|
58
|
+
* // → api.…example.com
|
|
59
|
+
* ```
|
|
60
|
+
*
|
|
61
|
+
* @example
|
|
62
|
+
* ```tsx
|
|
63
|
+
* // With slot overrides for custom styling
|
|
64
|
+
* <MiddleTruncate
|
|
65
|
+
* strategy="segments"
|
|
66
|
+
* separator="/"
|
|
67
|
+
* text={path}
|
|
68
|
+
* keepEnd={2}
|
|
69
|
+
* slots={{
|
|
70
|
+
* start: 'text-muted-foreground/60',
|
|
71
|
+
* ellipsis: 'text-muted-foreground/40 mx-0.5',
|
|
72
|
+
* end: 'font-semibold text-foreground',
|
|
73
|
+
* }}
|
|
74
|
+
* />
|
|
75
|
+
* ```
|
|
76
|
+
*/
|
|
77
|
+
/**
|
|
78
|
+
* Middle-truncates text, preserving start and/or end portions.
|
|
79
|
+
*
|
|
80
|
+
* @param props - See {@link IMiddleTruncateProps}
|
|
81
|
+
*/
|
|
82
|
+
const MiddleTruncate = memo(function MiddleTruncate(props) {
|
|
83
|
+
const { text, strategy, keepStart = 0, keepEnd = strategy === "chars" ? 6 : 1, ellipsis = "…", title, className, slots } = props;
|
|
84
|
+
const tooltip = title ?? text;
|
|
85
|
+
if (strategy === "chars") return /* @__PURE__ */ jsx(CharTruncator, {
|
|
86
|
+
text,
|
|
87
|
+
keepStart,
|
|
88
|
+
keepEnd,
|
|
89
|
+
ellipsis,
|
|
90
|
+
tooltip,
|
|
91
|
+
className,
|
|
92
|
+
slots
|
|
93
|
+
});
|
|
94
|
+
const sep = props.separator;
|
|
95
|
+
return /* @__PURE__ */ jsx(SegmentTruncator, {
|
|
96
|
+
text,
|
|
97
|
+
separator: sep,
|
|
98
|
+
keepStart,
|
|
99
|
+
keepEnd,
|
|
100
|
+
ellipsis,
|
|
101
|
+
tooltip,
|
|
102
|
+
className,
|
|
103
|
+
slots
|
|
104
|
+
});
|
|
105
|
+
});
|
|
106
|
+
function CharTruncator({ text, keepStart, keepEnd, ellipsis, tooltip, className, slots }) {
|
|
107
|
+
if (text.length <= keepStart + keepEnd) return /* @__PURE__ */ jsx("span", {
|
|
108
|
+
className: cn(MiddleTruncateShortRootStyles, slots?.root, className),
|
|
109
|
+
title: tooltip,
|
|
110
|
+
children: text
|
|
111
|
+
});
|
|
112
|
+
const start = text.slice(0, keepStart);
|
|
113
|
+
const end = text.slice(-keepEnd);
|
|
114
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
115
|
+
className: cn(middleTruncateVariants(), slots?.root, className),
|
|
116
|
+
title: tooltip,
|
|
117
|
+
children: [
|
|
118
|
+
/* @__PURE__ */ jsx("span", {
|
|
119
|
+
className: cn(MiddleTruncateStyles.start, slots?.start),
|
|
120
|
+
children: start
|
|
121
|
+
}),
|
|
122
|
+
/* @__PURE__ */ jsx("span", {
|
|
123
|
+
className: cn(MiddleTruncateStyles.ellipsis, slots?.ellipsis),
|
|
124
|
+
children: ellipsis
|
|
125
|
+
}),
|
|
126
|
+
/* @__PURE__ */ jsx("span", {
|
|
127
|
+
className: cn(MiddleTruncateStyles.end, slots?.end),
|
|
128
|
+
children: end
|
|
129
|
+
})
|
|
130
|
+
]
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
function SegmentTruncator({ text, separator, keepStart, keepEnd, ellipsis, tooltip, className, slots }) {
|
|
134
|
+
const segments = text.split(separator);
|
|
135
|
+
if (segments.length <= keepStart + keepEnd) return /* @__PURE__ */ jsx("span", {
|
|
136
|
+
className: cn(MiddleTruncateShortRootStyles, slots?.root, className),
|
|
137
|
+
title: tooltip,
|
|
138
|
+
children: text
|
|
139
|
+
});
|
|
140
|
+
const endSegments = segments.slice(-keepEnd);
|
|
141
|
+
const start = segments.slice(0, -keepEnd).join(separator) + separator;
|
|
142
|
+
const end = endSegments.join(separator);
|
|
143
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
144
|
+
className: cn(middleTruncateVariants(), slots?.root, className),
|
|
145
|
+
title: tooltip,
|
|
146
|
+
children: [
|
|
147
|
+
/* @__PURE__ */ jsx("span", {
|
|
148
|
+
className: cn(MiddleTruncateStyles.start, slots?.start),
|
|
149
|
+
children: start
|
|
150
|
+
}),
|
|
151
|
+
/* @__PURE__ */ jsx("span", {
|
|
152
|
+
className: cn(MiddleTruncateStyles.ellipsis, slots?.ellipsis),
|
|
153
|
+
children: ellipsis
|
|
154
|
+
}),
|
|
155
|
+
/* @__PURE__ */ jsx("span", {
|
|
156
|
+
className: cn(MiddleTruncateStyles.end, slots?.end),
|
|
157
|
+
children: end
|
|
158
|
+
})
|
|
159
|
+
]
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
//#endregion
|
|
164
|
+
export { MiddleTruncate };
|
|
@@ -29,4 +29,4 @@ const middleTruncatePathVariants = cva(MiddleTruncatePathStyles.root, {
|
|
|
29
29
|
const MiddleTruncatePathShortRootStyles = "truncate";
|
|
30
30
|
|
|
31
31
|
//#endregion
|
|
32
|
-
export { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles
|
|
32
|
+
export { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles };
|