@mks2508/mks-ui 0.7.0 → 0.8.0

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

@@ -8,7 +8,7 @@ declare const buttonStyles: StyleSlots<ButtonSlot>;
  * @see {@link https://cva.style/docs/getting-started/variants}
  */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "ghost" | "secondary" | "destructive" | "success" | "warning" | "bare" | null | undefined;
+    variant?: "link" | "default" | "outline" | "success" | "destructive" | "warning" | "ghost" | "secondary" | "bare" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | "bare" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** State-specific style classes for Button. */

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

@@ -33,7 +33,7 @@ export declare const dataCardStyles: StyleSlots<DataCardSlot>;
  */
 export declare const dataCardVariants: (props?: ({
     size?: "default" | "compact" | "spacious" | null | undefined;
-    variant?: "default" | "destructive" | "success" | "warning" | "accent" | null | undefined;
+    variant?: "default" | "success" | "destructive" | "warning" | "accent" | null | undefined;
     glass?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**

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

@@ -0,0 +1,25 @@
+/**
+ * Styles for FileIcon / FolderIcon components.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileIcon
+ */
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the FileIcon component. */
+export type FileIconSlot = 'root';
+/**
+ * Default Tailwind classes for each FileIcon slot.
+ *
+ * | Slot | Region |
+ * |------|--------|
+ * | `root` | The `<img>` (or fallback glyph) element |
+ */
+export declare const FileIconStyles: StyleSlots<FileIconSlot>;
+/** CVA variants for the FileIcon root. */
+export declare const fileIconVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Visual regions for the FolderIcon component. */
+export type FolderIconSlot = 'root';
+/** Default Tailwind classes for each FolderIcon slot. */
+export declare const FolderIconStyles: StyleSlots<FolderIconSlot>;
+/** CVA variants for the FolderIcon root. */
+export declare const folderIconVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=FileIcon.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileIcon/FileIcon.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,iDAAiD;AACjD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAE1C,CAAC;AAEX,0CAA0C;AAC1C,eAAO,MAAM,gBAAgB,2FAG3B,CAAC;AAEH,mDAAmD;AACnD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC;AAEpC,yDAAyD;AACzD,eAAO,MAAM,gBAAgB,EAAE,UAAU,CAAC,cAAc,CAE9C,CAAC;AAEX,4CAA4C;AAC5C,eAAO,MAAM,kBAAkB,2FAG7B,CAAC"}

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

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/FileIcon/FileIcon.styles.ts
+/**
+* Styles for FileIcon / FolderIcon components.
+*
+* @module @mks2508/mks-ui/react/ui/FileIcon
+*/
+/**
+* Default Tailwind classes for each FileIcon slot.
+*
+* | Slot | Region |
+* |------|--------|
+* | `root` | The `<img>` (or fallback glyph) element |
+*/
+const FileIconStyles = { root: "shrink-0" };
+/** CVA variants for the FileIcon root. */
+const fileIconVariants = cva(FileIconStyles.root, {
+	variants: {},
+	defaultVariants: {}
+});
+/** Default Tailwind classes for each FolderIcon slot. */
+const FolderIconStyles = { root: "shrink-0" };
+/** CVA variants for the FolderIcon root. */
+const folderIconVariants = cva(FolderIconStyles.root, {
+	variants: {},
+	defaultVariants: {}
+});
+
+//#endregion
+export { FileIconStyles, FolderIconStyles, fileIconVariants, folderIconVariants };

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

@@ -0,0 +1,89 @@
+/**
+ * Types for FileIcon / FolderIcon components.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileIcon
+ */
+import type { SlotOverrides } from '../../../core/types';
+import type { FileIconSlot, FolderIconSlot } from './FileIcon.styles';
+/**
+ * Function that resolves a filename to an icon asset identifier.
+ *
+ * Return value is the filename of the SVG (e.g. `"typescript.svg"`)
+ * which is appended to `basePath` to form the full URL.
+ *
+ * Defaults (when `vscode-material-icon-theme-js` is available as an
+ * optional peer) use the Material Icon Theme resolver. Consumers may
+ * pass their own to support custom icon sets.
+ */
+export type FileIconResolver = (filename: string) => string;
+/**
+ * Function that resolves a folder name (and open state) to an icon asset.
+ */
+export type FolderIconResolver = (name: string, open: boolean) => string;
+/**
+ * Props for FileIcon.
+ *
+ * @see {@link FileIconSlot} for available slot names
+ */
+export interface IFileIconProps {
+    /** Filename (e.g. `"App.tsx"`, `"package.json"`, `".gitignore"`). */
+    filename: string;
+    /** Icon size in pixels. Default 16. */
+    size?: number;
+    /** Optional CSS class merged onto the root. */
+    className?: string;
+    /** Whether this entry is a submodule (renders a GitFork glyph). */
+    isSubmodule?: boolean;
+    /**
+     * Base path prefix where icon SVGs are hosted. Default `"/file-icons/"`.
+     * Consumers must serve the matching SVGs (same contract as Material Icon Theme).
+     */
+    basePath?: string;
+    /**
+     * Custom resolver to translate filename → SVG basename.
+     * Falls back to Material Icon Theme resolver if available at runtime.
+     */
+    resolve?: FileIconResolver;
+    /**
+     * Override default Tailwind classes for specific visual regions.
+     *
+     * @example
+     * ```tsx
+     * <FileIcon filename="App.tsx" slots={{ root: 'opacity-80' }} />
+     * ```
+     */
+    slots?: SlotOverrides<FileIconSlot>;
+}
+/**
+ * Props for FolderIcon.
+ *
+ * @see {@link FolderIconSlot} for available slot names
+ */
+export interface IFolderIconProps {
+    /** Folder name (e.g. `"src"`, `"components"`, `"node_modules"`). */
+    name: string;
+    /** Whether the folder is open/expanded. Default false. */
+    open?: boolean;
+    /** Icon size in pixels. Default 16. */
+    size?: number;
+    /** Optional CSS class merged onto the root. */
+    className?: string;
+    /**
+     * Base path prefix where icon SVGs are hosted. Default `"/file-icons/"`.
+     */
+    basePath?: string;
+    /**
+     * Custom resolver (closed + open). Falls back to Material Icon Theme if available.
+     */
+    resolve?: FolderIconResolver;
+    /**
+     * Override default Tailwind classes for specific visual regions.
+     *
+     * @example
+     * ```tsx
+     * <FolderIcon name="src" slots={{ root: 'opacity-80' }} />
+     * ```
+     */
+    slots?: SlotOverrides<FolderIconSlot>;
+}
+//# sourceMappingURL=FileIcon.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileIcon/FileIcon.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEtE;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;AAEzE;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;CACvC"}

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

@@ -0,0 +1,46 @@
+/**
+ * FileIcon / FolderIcon — Material Icon Theme-powered file/folder glyphs.
+ *
+ * Thin React wrapper over a configurable icon resolver. By default it
+ * consumes `vscode-material-icon-theme-js` (optional peer) to map a
+ * filename to an SVG basename, then renders an `<img>` pointing at
+ * `${basePath}${basename}`. Consumers are responsible for hosting the
+ * SVGs under `basePath` (defaults to `/file-icons/`).
+ *
+ * Ported from mks-mission-control with MC-specific plumbing stripped.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileIcon
+ */
+import type { IFileIconProps, IFolderIconProps } from './FileIcon.types';
+/**
+ * FileIcon — renders an icon for a given filename.
+ *
+ * @param filename - Filename used to resolve the icon asset
+ * @param slots - Override Tailwind classes per visual slot
+ *
+ * @example
+ * ```tsx
+ * <FileIcon filename="App.tsx" />         // react_ts.svg
+ * <FileIcon filename="package.json" />    // json.svg
+ * <FileIcon filename=".gitignore" size={20} />
+ * ```
+ */
+export declare const FileIcon: import("react").MemoExoticComponent<({ filename, size, className, isSubmodule, basePath, resolve, slots, }: IFileIconProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * FolderIcon — renders an icon for a given folder (supports open/closed state).
+ *
+ * @param name - Folder name used to resolve the icon asset
+ * @param open - Whether the folder is visually open
+ * @param slots - Override Tailwind classes per visual slot
+ *
+ * @example
+ * ```tsx
+ * <FolderIcon name="src" />              // folder-src.svg
+ * <FolderIcon name="src" open />         // folder-src-open.svg
+ * ```
+ */
+export declare const FolderIcon: import("react").MemoExoticComponent<({ name, open, size, className, basePath, resolve, slots, }: IFolderIconProps) => import("react/jsx-runtime").JSX.Element>;
+export { FileIconStyles, fileIconVariants, FolderIconStyles, folderIconVariants, } from './FileIcon.styles';
+export type { FileIconSlot, FolderIconSlot } from './FileIcon.styles';
+export type { IFileIconProps, IFolderIconProps, FileIconResolver, FolderIconResolver, } from './FileIcon.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileIcon/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAYH,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAGjB,MAAM,kBAAkB,CAAC;AAwE1B;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,8GAQlB,cAAc,6CAuBf,CAAC;AAEH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,mGAQpB,gBAAgB,6CAajB,CAAC;AAEH,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACtE,YAAY,EACV,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC"}

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

@@ -0,0 +1,138 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { FileIconStyles, FolderIconStyles, fileIconVariants, folderIconVariants } from "./FileIcon.styles.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/FileIcon/index.tsx
+/**
+* FileIcon / FolderIcon — Material Icon Theme-powered file/folder glyphs.
+*
+* Thin React wrapper over a configurable icon resolver. By default it
+* consumes `vscode-material-icon-theme-js` (optional peer) to map a
+* filename to an SVG basename, then renders an `<img>` pointing at
+* `${basePath}${basename}`. Consumers are responsible for hosting the
+* SVGs under `basePath` (defaults to `/file-icons/`).
+*
+* Ported from mks-mission-control with MC-specific plumbing stripped.
+*
+* @module @mks2508/mks-ui/react/ui/FileIcon
+*/
+/**
+* Try to load the Material Icon Theme resolver lazily.
+*
+* Uses a runtime require via dynamic lookup so that consumers who do
+* not install `vscode-material-icon-theme-js` simply get a `file.svg`
+* fallback instead of a bundler error.
+*/
+function tryLoadMaterialResolvers() {
+	try {
+		const mod = globalThis.require?.("vscode-material-icon-theme-js");
+		if (!mod) return {};
+		return {
+			file: mod.getIconForFile,
+			folder: mod.getIconForFolder,
+			folderOpen: mod.getIconForOpenFolder
+		};
+	} catch {
+		return {};
+	}
+}
+const MATERIAL = /* @__PURE__ */ tryLoadMaterialResolvers();
+/** Default filename → svg-basename resolver. */
+const defaultFileResolver = (filename) => MATERIAL.file?.(filename) ?? "file.svg";
+/** Default foldername → svg-basename resolver. */
+const defaultFolderResolver = (name, open) => {
+	if (open) return MATERIAL.folderOpen?.(name) ?? "folder-open.svg";
+	return MATERIAL.folder?.(name) ?? "folder.svg";
+};
+/** Minimal inline git-fork glyph used for submodules (no external icon dep). */
+function GitForkGlyph({ size, className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: cn("shrink-0 text-primary", className),
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "18",
+				r: "3"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "18",
+				cy: "6",
+				r: "3"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M18 9v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 12v3" })
+		]
+	});
+}
+/**
+* FileIcon — renders an icon for a given filename.
+*
+* @param filename - Filename used to resolve the icon asset
+* @param slots - Override Tailwind classes per visual slot
+*
+* @example
+* ```tsx
+* <FileIcon filename="App.tsx" />         // react_ts.svg
+* <FileIcon filename="package.json" />    // json.svg
+* <FileIcon filename=".gitignore" size={20} />
+* ```
+*/
+const FileIcon = memo(function FileIcon({ filename, size = 16, className, isSubmodule, basePath = "/file-icons/", resolve = defaultFileResolver, slots }) {
+	if (isSubmodule) return /* @__PURE__ */ jsx(GitForkGlyph, {
+		size,
+		className: cn(fileIconVariants(), slots?.root, className)
+	});
+	return /* @__PURE__ */ jsx("img", {
+		src: `${basePath}${resolve(filename)}`,
+		alt: "",
+		width: size,
+		height: size,
+		className: cn(fileIconVariants(), slots?.root, className),
+		loading: "lazy",
+		decoding: "async"
+	});
+});
+/**
+* FolderIcon — renders an icon for a given folder (supports open/closed state).
+*
+* @param name - Folder name used to resolve the icon asset
+* @param open - Whether the folder is visually open
+* @param slots - Override Tailwind classes per visual slot
+*
+* @example
+* ```tsx
+* <FolderIcon name="src" />              // folder-src.svg
+* <FolderIcon name="src" open />         // folder-src-open.svg
+* ```
+*/
+const FolderIcon = memo(function FolderIcon({ name, open = false, size = 16, className, basePath = "/file-icons/", resolve = defaultFolderResolver, slots }) {
+	return /* @__PURE__ */ jsx("img", {
+		src: `${basePath}${resolve(name, open)}`,
+		alt: "",
+		width: size,
+		height: size,
+		className: cn(folderIconVariants(), slots?.root, className),
+		loading: "lazy",
+		decoding: "async"
+	});
+});
+
+//#endregion
+export { FileIcon, FolderIcon };

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

@@ -0,0 +1,47 @@
+/**
+ * Styles for FileItem.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileItem
+ */
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions of the FileItem component. */
+export type FileItemSlot = 'root' | 'icon' | 'path' | 'modifiedChip' | 'boost' | 'gitStatus';
+/**
+ * Tailwind utility classes per git change status. All values resolve to
+ * theme design tokens (CSS variables) so the dot colours adapt across
+ * light/dark and custom themes without hardcoded hex.
+ *
+ * Consumers can override via `slots.gitStatus` when a view needs a
+ * different palette (e.g. VSCode-style gutter).
+ */
+export declare const FileItemGitStatusClasses: {
+    readonly modified: "bg-primary";
+    readonly added: "bg-accent-foreground";
+    readonly deleted: "bg-destructive";
+    readonly untracked: "bg-ring";
+    readonly renamed: "bg-secondary-foreground";
+};
+/**
+ * Default Tailwind classes for each FileItem slot.
+ *
+ * | Slot | Region |
+ * |------|--------|
+ * | `root` | Row container |
+ * | `icon` | Leading file/folder icon |
+ * | `path` | Middle-truncated path |
+ * | `modifiedChip` | Trailing "Xh ago" chip |
+ * | `boost` | Trailing boost (⭐) glyph |
+ * | `gitStatus` | Leading git change-status dot (only rendered when `changeStatus` is set to a non-null value) |
+ */
+export declare const FileItemStyles: StyleSlots<FileItemSlot>;
+/**
+ * CVA variants for the FileItem root.
+ *
+ * Density variants:
+ * - `compact` — 28px row (h-7), smaller icon
+ * - `comfortable` — 32px row (h-8), default icon size
+ */
+export declare const fileItemVariants: (props?: ({
+    density?: "compact" | "comfortable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=FileItem.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileItem/FileItem.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,gDAAgD;AAChD,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,MAAM,GACN,MAAM,GACN,cAAc,GACd,OAAO,GACP,WAAW,CAAC;AAEhB;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB;;;;;;CAM3B,CAAC;AAEX;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAO1C,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;8EAU3B,CAAC"}

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

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/FileItem/FileItem.styles.ts
+/**
+* Styles for FileItem.
+*
+* @module @mks2508/mks-ui/react/ui/FileItem
+*/
+/**
+* Tailwind utility classes per git change status. All values resolve to
+* theme design tokens (CSS variables) so the dot colours adapt across
+* light/dark and custom themes without hardcoded hex.
+*
+* Consumers can override via `slots.gitStatus` when a view needs a
+* different palette (e.g. VSCode-style gutter).
+*/
+const FileItemGitStatusClasses = {
+	modified: "bg-primary",
+	added: "bg-accent-foreground",
+	deleted: "bg-destructive",
+	untracked: "bg-ring",
+	renamed: "bg-secondary-foreground"
+};
+/**
+* Default Tailwind classes for each FileItem slot.
+*
+* | Slot | Region |
+* |------|--------|
+* | `root` | Row container |
+* | `icon` | Leading file/folder icon |
+* | `path` | Middle-truncated path |
+* | `modifiedChip` | Trailing "Xh ago" chip |
+* | `boost` | Trailing boost (⭐) glyph |
+* | `gitStatus` | Leading git change-status dot (only rendered when `changeStatus` is set to a non-null value) |
+*/
+const FileItemStyles = {
+	root: "file-list-item group flex items-center gap-1.5 px-2 cursor-pointer select-none transition-colors duration-100 hover:bg-accent/40 focus:bg-accent/50 focus:outline-none data-[active]:bg-accent/60",
+	icon: "",
+	path: "flex-1 min-w-0 text-xs font-mono text-foreground",
+	modifiedChip: "shrink-0 text-[10px] font-mono text-muted-foreground/60",
+	boost: "shrink-0 text-[11px] text-primary",
+	gitStatus: "shrink-0 inline-block size-1.5 rounded-full"
+};
+/**
+* CVA variants for the FileItem root.
+*
+* Density variants:
+* - `compact` — 28px row (h-7), smaller icon
+* - `comfortable` — 32px row (h-8), default icon size
+*/
+const fileItemVariants = cva(FileItemStyles.root, {
+	variants: { density: {
+		compact: "h-7",
+		comfortable: "h-8"
+	} },
+	defaultVariants: { density: "compact" }
+});
+
+//#endregion
+export { FileItemGitStatusClasses, FileItemStyles, fileItemVariants };

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

@@ -0,0 +1,84 @@
+/**
+ * Types for FileItem.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileItem
+ */
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { FileIconResolver } from '../FileIcon/FileIcon.types';
+import type { FileItemSlot, fileItemVariants } from './FileItem.styles';
+/** What kind of filesystem entry this row represents. */
+export type FileItemKind = 'file' | 'dir';
+/**
+ * Git change status for a file, rendered as a small dot in the `gitStatus`
+ * slot when set. Colours resolve to theme design tokens (see
+ * {@link FileItemGitStatusClasses}) so the dot reads correctly under any
+ * theme without hardcoded hex.
+ *
+ * | Status | Token | Meaning |
+ * |--------|-------|---------|
+ * | `modified`  | `bg-primary` | Tracked file with unstaged or staged modifications |
+ * | `added`     | `bg-accent-foreground` | New file staged |
+ * | `deleted`   | `bg-destructive` | Tracked file removed from the working tree |
+ * | `untracked` | `bg-ring` | New file not yet tracked by git |
+ * | `renamed`   | `bg-secondary-foreground` | File renamed/moved (porcelain `R`) |
+ */
+export type FileItemChangeStatus = 'modified' | 'added' | 'deleted' | 'untracked' | 'renamed';
+/**
+ * Visual density of the row.
+ *
+ * Maps 1:1 to the `density` CVA variant in `fileItemVariants`.
+ */
+export type FileItemDensity = NonNullable<VariantProps<typeof fileItemVariants>['density']>;
+/**
+ * Props for FileItem.
+ *
+ * @see {@link FileItemSlot} for available slot names
+ */
+export interface IFileItemProps extends Omit<VariantProps<typeof fileItemVariants>, 'density'> {
+    /** Full path relative to some root (e.g. `"src/components/Button/index.tsx"`). */
+    path: string;
+    /** Whether this is a file or a directory. */
+    kind: FileItemKind;
+    /** Last-modified timestamp; when present renders a "Xh ago"-style chip. */
+    modifiedAt?: Date;
+    /** Mark this row with a boost glyph (e.g. ⭐ recents/pinned). */
+    isBoosted?: boolean;
+    /**
+     * Git change status — when set to a non-null value, renders a small
+     * coloured dot in the `gitStatus` slot before the path. Accepts `null`
+     * explicitly so consumers that receive optional data from a backend
+     * (e.g. `?withGitStatus=true`) can pass through cleanly.
+     */
+    changeStatus?: FileItemChangeStatus | null;
+    /** Whether this row is currently selected (for highlighting). */
+    selected?: boolean;
+    /** Click / activate handler. */
+    onSelect?: () => void;
+    /** Row density. Default `"compact"` (28px, matches MC). */
+    density?: FileItemDensity;
+    /**
+     * Icon base path passed to FileIcon. Default `"/file-icons/"`.
+     */
+    iconBasePath?: string;
+    /** Custom file-icon resolver. */
+    iconResolve?: FileIconResolver;
+    /** Optional CSS class merged onto the root. */
+    className?: string;
+    /** Native tab index. Default 0 so rows are keyboard-reachable. */
+    tabIndex?: number;
+    /**
+     * Override default Tailwind classes for specific visual regions.
+     *
+     * @example
+     * ```tsx
+     * <FileItem
+     *   path="src/App.tsx"
+     *   kind="file"
+     *   slots={{ root: 'rounded-md', boost: 'text-warning' }}
+     * />
+     * ```
+     */
+    slots?: SlotOverrides<FileItemSlot>;
+}
+//# sourceMappingURL=FileItem.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileItem.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileItem/FileItem.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAExE,yDAAyD;AACzD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,KAAK,CAAC;AAE1C;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,oBAAoB,GAC5B,UAAU,GACV,OAAO,GACP,SAAS,GACT,WAAW,GACX,SAAS,CAAC;AAEd;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,CACvC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,SAAS,CAAC,CACjD,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC9D,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,IAAI,EAAE,YAAY,CAAC;IACnB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC3C,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC"}

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

@@ -0,0 +1,48 @@
+/**
+ * FileItem — compact file-row primitive (icon + path + modified-chip + boost).
+ *
+ * Trimmed port of `mks-mission-control`'s FileItem: git-status dots,
+ * staging, discard flow, context menu and multi-select were all stripped.
+ * This is the row shape expected by mention menus, file pickers and
+ * simple file lists.
+ *
+ * Layout (compact, 28px row):
+ *   [icon] [path — middle truncated] [modified-chip?] [⭐?]
+ *
+ * Keyboard: `role="option"`, `tabIndex=0`, Enter/Space fires `onSelect`.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileItem
+ */
+import type { IFileItemProps } from './FileItem.types';
+/**
+ * FileItem — single row rendering an icon, path, optional modified chip and boost star.
+ *
+ * @param density - Row density (`compact` 28px vs `comfortable` 32px)
+ * @param slots - Override Tailwind classes per visual slot
+ *
+ * @example
+ * ```tsx
+ * <FileItem
+ *   path="src/components/Button/index.tsx"
+ *   kind="file"
+ *   modifiedAt={new Date()}
+ *   isBoosted
+ *   onSelect={() => console.log('picked')}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With slot overrides
+ * <FileItem
+ *   path="src/App.tsx"
+ *   kind="file"
+ *   slots={{ root: 'rounded-md', boost: 'text-destructive' }}
+ * />
+ * ```
+ */
+export declare const FileItem: import("react").MemoExoticComponent<({ path, kind, modifiedAt, isBoosted, changeStatus, selected, onSelect, density, iconBasePath, iconResolve, className, tabIndex, slots, }: IFileItemProps) => import("react/jsx-runtime").JSX.Element>;
+export { FileItemGitStatusClasses, FileItemStyles, fileItemVariants, } from './FileItem.styles';
+export type { FileItemSlot } from './FileItem.styles';
+export type { IFileItemProps, FileItemKind, FileItemDensity, FileItemChangeStatus, } from './FileItem.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileItem/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAaH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAkBvD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,iLAclB,cAAc,6CA6Ef,CAAC;AAEH,OAAO,EACL,wBAAwB,EACxB,cAAc,EACd,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EACV,cAAc,EACd,YAAY,EACZ,eAAe,EACf,oBAAoB,GACrB,MAAM,kBAAkB,CAAC"}