@mks2508/mks-ui 0.7.0 → 0.8.1

package/dist/react-ui/ui/FileTree/index.js

@@ -0,0 +1,226 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { FileItem } from "../FileItem/index.js";
+import { FileTreeStyles, fileTreeVariants } from "./FileTree.styles.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/FileTree/index.tsx
+/**
+* FileTree — collapsible tree renderer over `FileItem` rows.
+*
+* Lightweight tree over the `FileItem` primitive. Directories render a
+* chevron that toggles expansion; files act as leaves. Supports either
+* uncontrolled expansion (internal state) or controlled via `expandedIds`
+* + `onToggle` (useful for lazy-loading children).
+*
+* Keyboard: rows are reachable via Tab (inherited from `FileItem`). Enter/
+* Space on a file fires `onSelect`; Enter/Space on a dir toggles expansion.
+* ArrowRight expands a dir, ArrowLeft collapses it.
+*
+* @module @mks2508/mks-ui/react/ui/FileTree
+*/
+/** Default pixel width per indent level. */
+const DEFAULT_INDENT_PX = 12;
+/** Normalise the `expandedIds` prop into a stable `Set<string>`. */
+function toSet(ids) {
+	if (!ids) return null;
+	if (ids instanceof Set) return new Set(ids);
+	return new Set(ids);
+}
+/** Single row (FileItem + chevron + indent) with recursive children rendering. */
+const NodeRow = memo(function NodeRow({ node, depth, expanded, selectedId, indentPx, density, iconBasePath, iconResolve, slots, onToggle, onSelect }) {
+	const isDir = node.kind === "dir";
+	const isExpanded = isDir && expanded.has(node.id);
+	const isSelected = selectedId === node.id;
+	const handleRowSelect = useCallback(() => {
+		if (isDir) onToggle(node, !isExpanded);
+		else onSelect(node);
+	}, [
+		isDir,
+		isExpanded,
+		node,
+		onSelect,
+		onToggle
+	]);
+	const handleChevronClick = useCallback((e) => {
+		e.stopPropagation();
+		onToggle(node, !isExpanded);
+	}, [
+		isExpanded,
+		node,
+		onToggle
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (!isDir) return;
+		if (e.key === "ArrowRight" && !isExpanded) {
+			e.preventDefault();
+			onToggle(node, true);
+		} else if (e.key === "ArrowLeft" && isExpanded) {
+			e.preventDefault();
+			onToggle(node, false);
+		}
+	}, [
+		isDir,
+		isExpanded,
+		node,
+		onToggle
+	]);
+	const children = isExpanded ? node.children ?? [] : [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(FileTreeStyles.node, slots?.node),
+		role: "none",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn(FileTreeStyles.row, slots?.row),
+			onKeyDown: handleKeyDown,
+			children: [
+				depth > 0 && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn(FileTreeStyles.indent, slots?.indent),
+					style: { width: depth * indentPx }
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": isExpanded ? "Collapse" : "Expand",
+					"aria-expanded": isDir ? isExpanded : void 0,
+					tabIndex: -1,
+					onClick: handleChevronClick,
+					className: cn(FileTreeStyles.chevron, !isDir && "invisible", isExpanded && "rotate-90", slots?.chevron),
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 12 12",
+						width: "10",
+						height: "10",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						children: /* @__PURE__ */ jsx("path", { d: "M4.5 3 L8 6 L4.5 9" })
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-1 min-w-0",
+					children: /* @__PURE__ */ jsx(FileItem, {
+						path: node.path,
+						kind: node.kind,
+						modifiedAt: node.modifiedAt,
+						isBoosted: node.isBoosted,
+						changeStatus: node.changeStatus,
+						selected: isSelected,
+						onSelect: handleRowSelect,
+						density,
+						iconBasePath,
+						iconResolve
+					})
+				})
+			]
+		}), isExpanded && children.length > 0 && /* @__PURE__ */ jsx("div", {
+			role: "group",
+			className: cn(FileTreeStyles.list, slots?.list),
+			children: children.map((child) => /* @__PURE__ */ jsx(NodeRow, {
+				node: child,
+				depth: depth + 1,
+				expanded,
+				selectedId,
+				indentPx,
+				density,
+				iconBasePath,
+				iconResolve,
+				slots,
+				onToggle,
+				onSelect
+			}, child.id))
+		})]
+	});
+});
+/**
+* FileTree — tree of `FileItem` rows with expand/collapse.
+*
+* @example
+* ```tsx
+* <FileTree
+*   nodes={[
+*     {
+*       id: 'src',
+*       name: 'src',
+*       path: 'src',
+*       kind: 'dir',
+*       children: [
+*         { id: 'src/App.tsx', name: 'App.tsx', path: 'src/App.tsx', kind: 'file' },
+*       ],
+*     },
+*   ]}
+*   onSelect={(n) => console.log('selected', n.path)}
+*   onToggle={(n, exp) => console.log('toggled', n.path, exp)}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // Controlled expansion for lazy loading
+* const [expanded, setExpanded] = useState<Set<string>>(new Set());
+* <FileTree
+*   nodes={nodes}
+*   expandedIds={expanded}
+*   onToggle={(n, exp) => {
+*     setExpanded((prev) => {
+*       const next = new Set(prev);
+*       if (exp) next.add(n.id); else next.delete(n.id);
+*       return next;
+*     });
+*     if (exp && !n.children) loadChildren(n);
+*   }}
+* />
+* ```
+*/
+const FileTree = memo(function FileTree({ nodes, onSelect, onToggle, expandedIds, selectedId, density = "compact", iconBasePath, iconResolve, indentPx = DEFAULT_INDENT_PX, emptyLabel = "No files", className, slots }) {
+	const controlled = expandedIds !== void 0;
+	const controlledSet = useMemo(() => toSet(expandedIds), [expandedIds]);
+	const [internal, setInternal] = useState(() => /* @__PURE__ */ new Set());
+	const expanded = controlled ? controlledSet : internal;
+	const handleToggle = useCallback((node, next) => {
+		if (!controlled) setInternal((prev) => {
+			const nextSet = new Set(prev);
+			if (next) nextSet.add(node.id);
+			else nextSet.delete(node.id);
+			return nextSet;
+		});
+		onToggle?.(node, next);
+	}, [controlled, onToggle]);
+	const handleSelect = useCallback((node) => {
+		onSelect?.(node);
+	}, [onSelect]);
+	if (!nodes || nodes.length === 0) return /* @__PURE__ */ jsx("div", {
+		role: "tree",
+		className: cn(fileTreeVariants({ density }), slots?.root, className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn(FileTreeStyles.empty, slots?.empty),
+			children: emptyLabel
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		role: "tree",
+		className: cn(fileTreeVariants({ density }), slots?.root, className),
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			className: cn(FileTreeStyles.list, slots?.list),
+			children: nodes.map((node) => /* @__PURE__ */ jsx(NodeRow, {
+				node,
+				depth: 0,
+				expanded,
+				selectedId,
+				indentPx,
+				density,
+				iconBasePath,
+				iconResolve,
+				slots,
+				onToggle: handleToggle,
+				onSelect: handleSelect
+			}, node.id))
+		})
+	});
+});
+
+//#endregion
+export { FileTree };

package/dist/react-ui/ui/GooeyButton/GooeyButton.types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Types for the GooeyButton component — a clickable pill that reveals a
+ * card via a gooey SVG-filter morph.
+ *
+ * @module @mks2508/mks-ui/react/ui/GooeyButton
+ */
+import type { ReactNode } from 'react';
+import type { IGooeyMorphConfig, IGooeyMorphSlots } from '@/react-ui/primitives/GooeyMorphingSurface';
+export interface IGooeyButtonProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Default open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Change callback for the open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Content rendered inside the pill. */
+    pill: ReactNode;
+    /** Content rendered inside the card body (revealed when open). */
+    card: ReactNode;
+    /** Partial override of the morph config. */
+    config?: Partial<IGooeyMorphConfig>;
+    /** Close when Escape is pressed. Default: true. */
+    closeOnEscape?: boolean;
+    /** Close when clicking outside the host element. Default: true. */
+    closeOnOutside?: boolean;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Extra className for the host. */
+    className?: string;
+    /** Per-slot className overrides (forwarded to primitive). */
+    slots?: IGooeyMorphSlots;
+    /** aria-label for the trigger button (defaults to "Toggle"). */
+    'aria-label'?: string;
+}
+//# sourceMappingURL=GooeyButton.types.d.ts.map

package/dist/react-ui/ui/GooeyButton/GooeyButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GooeyButton.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/GooeyButton/GooeyButton.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EACX,iBAAiB,EACjB,gBAAgB,EAChB,MAAM,4CAA4C,CAAC;AAEpD,MAAM,WAAW,iBAAiB;IACjC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,IAAI,EAAE,SAAS,CAAC;IAChB,kEAAkE;IAClE,IAAI,EAAE,SAAS,CAAC;IAChB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/react-ui/ui/GooeyButton/gooey-button-8rHWiw0w.css

@@ -0,0 +1,47 @@
+/* =============================================================================
+ *  GooeyButton — transparent hit area over the pill region.
+ *
+ *  The visual pill is drawn by the <GooeyMorphingSurface> primitive; this
+ *  layer is a single button that captures clicks in both open and closed
+ *  states without painting anything. All layout math comes from the
+ *  primitive's CSS custom props (--gms-pill-w, --gms-pill-h).
+ * ============================================================================= */
+
+.gbtn-host {
+	position: relative;
+	display: inline-block;
+}
+
+.gbtn-trigger {
+	position: absolute;
+	top: 0;
+	/* Follow the pill's computed X (which honours `pillOffsetX`) instead of
+	 * centring the hit-area in the host. Centring worked only while
+	 * `pillOffsetX === 0`; any non-zero offset drifted the visual pill away
+	 * from the invisible trigger. See `GooeyButton/index.tsx` — the host
+	 * exposes `--gms-pill-x` identical to the primitive's internal value. */
+	left: var(--gms-pill-x);
+	z-index: 3;
+	width: var(--gms-pill-w);
+	height: var(--gms-pill-h);
+	padding: 0;
+	margin: 0;
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+	font: inherit;
+	color: inherit;
+	/* Pill-shaped focus ring. */
+	border-radius: 9999px;
+}
+
+.gbtn-trigger:focus-visible {
+	outline: 2px solid var(--ring, currentColor);
+	outline-offset: 2px;
+}
+
+.gbtn-trigger:disabled {
+	cursor: not-allowed;
+	pointer-events: none;
+}
+

package/dist/react-ui/ui/GooeyButton/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * GooeyButton — clickable pill that reveals a card via a gooey SVG-filter morph.
+ *
+ * Thin ergonomic wrapper over `<GooeyMorphingSurface>`: owns open/close
+ * state (controlled or uncontrolled), toggles on click, and optionally
+ * closes on Escape / outside click.
+ *
+ * @module @mks2508/mks-ui/react/ui/GooeyButton
+ */
+import './gooey-button.css';
+import type { IGooeyButtonProps } from './GooeyButton.types';
+export * from './GooeyButton.types';
+/**
+ * A pill-shaped button that morphs into a card when opened.
+ *
+ * @example
+ * ```tsx
+ * <GooeyButton
+ *   pill={<><DownIcon /> <span>Pull origin</span></>}
+ *   card={<ProgressCard transfer={transfer} />}
+ *   onOpenChange={(open) => open && startPull()}
+ * />
+ * ```
+ */
+export declare function GooeyButton({ open: controlledOpen, defaultOpen, onOpenChange, pill, card, config, closeOnEscape, closeOnOutside, disabled, className, slots, 'aria-label': ariaLabel, }: IGooeyButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/ui/GooeyButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/GooeyButton/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAWH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,cAAc,qBAAqB,CAAC;AAEpC;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAoB,EACpB,cAAqB,EACrB,QAAgB,EAChB,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAoB,GAClC,EAAE,iBAAiB,2CAyFnB"}

package/dist/react-ui/ui/GooeyButton/index.js

@@ -0,0 +1,118 @@
+import { cn } from "../../lib/utils.js";
+import { DEFAULT_GOOEY_CONFIG } from "../../primitives/GooeyMorphingSurface/GooeyMorphingSurface.types.js";
+import { GooeyMorphingSurface } from "../../primitives/GooeyMorphingSurface/index.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import "./gooey-button.js";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/GooeyButton/index.tsx
+/**
+* GooeyButton — clickable pill that reveals a card via a gooey SVG-filter morph.
+*
+* Thin ergonomic wrapper over `<GooeyMorphingSurface>`: owns open/close
+* state (controlled or uncontrolled), toggles on click, and optionally
+* closes on Escape / outside click.
+*
+* @module @mks2508/mks-ui/react/ui/GooeyButton
+*/
+/**
+* A pill-shaped button that morphs into a card when opened.
+*
+* @example
+* ```tsx
+* <GooeyButton
+*   pill={<><DownIcon /> <span>Pull origin</span></>}
+*   card={<ProgressCard transfer={transfer} />}
+*   onOpenChange={(open) => open && startPull()}
+* />
+* ```
+*/
+function GooeyButton({ open: controlledOpen, defaultOpen = false, onOpenChange, pill, card, config, closeOnEscape = true, closeOnOutside = true, disabled = false, className, slots, "aria-label": ariaLabel = "Toggle" }) {
+	const [open, setOpen] = useControlledState({
+		value: controlledOpen,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const hostRef = useRef(null);
+	const hostStyle = useMemo(() => {
+		const pillWidth = config?.pillWidth ?? DEFAULT_GOOEY_CONFIG.pillWidth;
+		const pillHeight = config?.pillHeight ?? DEFAULT_GOOEY_CONFIG.pillHeight;
+		const cardWidth = config?.cardWidth ?? DEFAULT_GOOEY_CONFIG.cardWidth;
+		const pillOffsetX = config?.pillOffsetX ?? DEFAULT_GOOEY_CONFIG.pillOffsetX;
+		const pillX = (cardWidth - pillWidth) / 2 + pillOffsetX;
+		return {
+			"--gms-pill-w": `${pillWidth}px`,
+			"--gms-pill-h": `${pillHeight}px`,
+			"--gms-pill-x": `${pillX}px`
+		};
+	}, [
+		config?.pillWidth,
+		config?.pillHeight,
+		config?.cardWidth,
+		config?.pillOffsetX
+	]);
+	const toggle = useCallback(() => {
+		if (disabled) return;
+		setOpen(!open);
+	}, [
+		disabled,
+		open,
+		setOpen
+	]);
+	const close = useCallback(() => setOpen(false), [setOpen]);
+	useEffect(() => {
+		if (!open || !closeOnEscape) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") close();
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [
+		open,
+		closeOnEscape,
+		close
+	]);
+	useEffect(() => {
+		if (!open || !closeOnOutside) return;
+		const onPointerDown = (e) => {
+			const host = hostRef.current;
+			if (!host) return;
+			if (e.target instanceof Node && host.contains(e.target)) return;
+			close();
+		};
+		const raf = requestAnimationFrame(() => {
+			window.addEventListener("pointerdown", onPointerDown);
+		});
+		return () => {
+			cancelAnimationFrame(raf);
+			window.removeEventListener("pointerdown", onPointerDown);
+		};
+	}, [
+		open,
+		closeOnOutside,
+		close
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: hostRef,
+		className: cn("gbtn-host", className),
+		style: hostStyle,
+		children: [/* @__PURE__ */ jsx(GooeyMorphingSurface, {
+			open,
+			pill,
+			card,
+			config,
+			slots
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: toggle,
+			disabled,
+			"aria-expanded": open,
+			"aria-label": ariaLabel,
+			className: "gbtn-trigger"
+		})]
+	});
+}
+
+//#endregion
+export { GooeyButton };

package/dist/react-ui/ui/Input/Input.styles.d.ts

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /** Visual regions for the Input component. */
 type InputSlot = 'root';
 declare const inputStyles: StyleSlots<InputSlot>;

package/dist/react-ui/ui/Input/Input.types.d.ts

@@ -1,4 +1,4 @@
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { InputSlot } from './Input.styles';
 /** Props for the Input component. */
 interface IInputProps extends React.ComponentProps<'input'> {

package/dist/react-ui/ui/InputGroup/InputGroup.styles.d.ts

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /** Visual regions for the InputGroup component family. */
 type InputGroupSlot = 'root' | 'addon' | 'button' | 'text' | 'input' | 'textarea';
 declare const inputGroupStyles: StyleSlots<InputGroupSlot>;

package/dist/react-ui/ui/InputGroup/InputGroup.types.d.ts

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { inputGroupAddonVariants, inputGroupButtonVariants, InputGroupSlot } from './InputGroup.styles';
 /** Props for the InputGroup container. */
 interface IInputGroupProps extends React.ComponentProps<'div'> {

package/dist/react-ui/ui/Label/Label.styles.d.ts

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 type LabelSlot = 'root';
 declare const labelStyles: StyleSlots<LabelSlot>;
 export { labelStyles };

package/dist/react-ui/ui/Label/Label.types.d.ts

@@ -1,4 +1,4 @@
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { LabelSlot } from './Label.styles';
 /** Props for the Label component. */
 interface ILabelProps extends React.ComponentProps<'label'> {

package/dist/react-ui/ui/Menu/Menu.styles.d.ts

@@ -12,7 +12,7 @@
  * // menuStyles.popup => default popup classes
  * ```
  */
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /**
  * Union of all visual regions (slots) in the Menu component tree.
  *

package/dist/react-ui/ui/Menu/Menu.types.d.ts

@@ -10,8 +10,8 @@
 import type * as React from 'react';
 import type { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import type { HTMLMotionProps, Transition } from 'motion/react';
-import type { IBaseConfig, SlotOverrides } from '../../../core/types';
-import type { IHighlightProps, IHighlightItemProps } from '../../../react-ui/primitives/Highlight';
+import type { IBaseConfig, SlotOverrides } from '@/core/types';
+import type { IHighlightProps, IHighlightItemProps } from '@/react-ui/primitives/Highlight';
 import type { MenuSlot } from './Menu.styles';
 /**
  * Configuration interface for Menu behavior and animation.

package/dist/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.styles.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Styles for MiddleTruncatePath.
+ *
+ * @module @mks2508/mks-ui/react/ui/MiddleTruncatePath
+ */
+import type { StyleSlots } from '@/core/types';
+/** Visual regions of the MiddleTruncatePath component. */
+export type MiddleTruncatePathSlot = 'root' | 'start' | 'end';
+/**
+ * Default Tailwind classes for each MiddleTruncatePath slot.
+ *
+ * | Slot | Region |
+ * |------|--------|
+ * | `root` | Container `<span>` wrapping start + end segments |
+ * | `start` | Truncatable start segments (ellipsised when narrow) |
+ * | `end` | Fixed trailing segments (always visible) |
+ */
+export declare const MiddleTruncatePathStyles: StyleSlots<MiddleTruncatePathSlot>;
+/** CVA variants for the MiddleTruncatePath root. */
+export declare const middleTruncatePathVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Tailwind classes used when the path is short enough to skip splitting. */
+export declare const MiddleTruncatePathShortRootStyles: "truncate";
+//# sourceMappingURL=MiddleTruncatePath.styles.d.ts.map

package/dist/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiddleTruncatePath.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,0DAA0D;AAC1D,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9D;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,EAAE,UAAU,CAAC,sBAAsB,CAI9D,CAAC;AAEX,oDAAoD;AACpD,eAAO,MAAM,0BAA0B,2FAGrC,CAAC;AAEH,6EAA6E;AAC7E,eAAO,MAAM,iCAAiC,EAAG,UAAmB,CAAC"}

package/dist/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.styles.js

@@ -0,0 +1,32 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.styles.ts
+/**
+* Styles for MiddleTruncatePath.
+*
+* @module @mks2508/mks-ui/react/ui/MiddleTruncatePath
+*/
+/**
+* Default Tailwind classes for each MiddleTruncatePath slot.
+*
+* | Slot | Region |
+* |------|--------|
+* | `root` | Container `<span>` wrapping start + end segments |
+* | `start` | Truncatable start segments (ellipsised when narrow) |
+* | `end` | Fixed trailing segments (always visible) |
+*/
+const MiddleTruncatePathStyles = {
+	root: "flex min-w-0 overflow-hidden",
+	start: "shrink min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+	end: "shrink-0 whitespace-nowrap"
+};
+/** CVA variants for the MiddleTruncatePath root. */
+const middleTruncatePathVariants = cva(MiddleTruncatePathStyles.root, {
+	variants: {},
+	defaultVariants: {}
+});
+/** Tailwind classes used when the path is short enough to skip splitting. */
+const MiddleTruncatePathShortRootStyles = "truncate";
+
+//#endregion
+export { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles, middleTruncatePathVariants };

package/dist/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Types for MiddleTruncatePath.
+ *
+ * @module @mks2508/mks-ui/react/ui/MiddleTruncatePath
+ */
+import type { SlotOverrides } from '@/core/types';
+import type { MiddleTruncatePathSlot } from './MiddleTruncatePath.styles';
+/**
+ * Props for MiddleTruncatePath.
+ *
+ * @see {@link MiddleTruncatePathSlot} for available slot names
+ */
+export interface IMiddleTruncatePathProps {
+    /** Full file path (e.g. `"src/components/shell/AppShell.tsx"`). */
+    path: string;
+    /** How many trailing segments to always show (parent + filename). Default 2. */
+    keepEnd?: number;
+    /** Optional CSS class merged onto the root (container). */
+    className?: string;
+    /**
+     * Optional CSS class for the start (truncatable) segment.
+     * @deprecated Prefer `slots.start` for new code.
+     */
+    startClassName?: string;
+    /**
+     * Optional CSS class for the end (fixed) segment.
+     * @deprecated Prefer `slots.end` for new code.
+     */
+    endClassName?: string;
+    /**
+     * Override default Tailwind classes per visual slot.
+     *
+     * @example
+     * ```tsx
+     * <MiddleTruncatePath
+     *   path="src/index.ts"
+     *   slots={{ start: 'text-muted-foreground/60', end: 'font-semibold' }}
+     * />
+     * ```
+     */
+    slots?: SlotOverrides<MiddleTruncatePathSlot>;
+}
+//# sourceMappingURL=MiddleTruncatePath.types.d.ts.map

package/dist/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiddleTruncatePath.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncatePath/MiddleTruncatePath.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAE1E;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CAC/C"}