@mks2508/mks-ui 0.7.0 → 0.8.1

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

@@ -0,0 +1,55 @@
+/**
+ * Types for FilePanel.
+ *
+ * @module @mks2508/mks-ui/react/ui/FilePanel
+ */
+import type { ReactNode } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '@/core/types';
+import type { FilePanelSlot, filePanelVariants } from './FilePanel.styles';
+/** Visual density for the panel frame. */
+export type FilePanelDensity = NonNullable<VariantProps<typeof filePanelVariants>['density']>;
+/**
+ * Props for FilePanel.
+ *
+ * FilePanel is a thin **frame**: header (title + actions), toolbar (search),
+ * body (tree or any children), and a footer (status). Each region is a slot
+ * so consumers compose the content — there is zero business logic here.
+ *
+ * @see {@link FilePanelSlot}
+ */
+export interface IFilePanelProps extends Omit<VariantProps<typeof filePanelVariants>, 'density' | 'bordered'> {
+    /** Panel title rendered in the header. */
+    title?: ReactNode;
+    /** Optional trailing actions (buttons, chips) next to the title. */
+    actions?: ReactNode;
+    /** Search input slot content (e.g. an `<Input>`). Toolbar is hidden when both this and `toolbar` are absent. */
+    search?: ReactNode;
+    /** Arbitrary toolbar content rendered next to `search`. */
+    toolbar?: ReactNode;
+    /** Body content — typically a `<FileTree>` or custom children. */
+    children?: ReactNode;
+    /** Footer status content (e.g. node count, last refresh). */
+    status?: ReactNode;
+    /** Optional trailing footer actions. */
+    footerActions?: ReactNode;
+    /** Density — proxied to child primitives via the consumer. */
+    density?: FilePanelDensity;
+    /** Whether to render border + rounded frame. Default `true`. */
+    bordered?: boolean;
+    /** Optional CSS class merged onto the root. */
+    className?: string;
+    /**
+     * Override default Tailwind classes for specific visual regions.
+     *
+     * @example
+     * ```tsx
+     * <FilePanel
+     *   title="Files"
+     *   slots={{ header: 'bg-primary/10', body: 'p-1' }}
+     * />
+     * ```
+     */
+    slots?: SlotOverrides<FilePanelSlot>;
+}
+//# sourceMappingURL=FilePanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilePanel.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FilePanel/FilePanel.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,WAAW,CACxC,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC,SAAS,CAAC,CAClD,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC5E,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gHAAgH;IAChH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wCAAwC;IACxC,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC"}

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

@@ -0,0 +1,55 @@
+/**
+ * FilePanel — IDE-style file-panel frame (header + toolbar + body + footer).
+ *
+ * Thin frame primitive: no business logic, no data fetching. Each region is
+ * a slot so consumers compose what goes inside — typically a `<FileTree>`
+ * in the body and an `<Input>` in the search slot.
+ *
+ * Layout:
+ *   ┌───────────────────────────────────┐
+ *   │ header (title · actions)          │  (sticky)
+ *   ├───────────────────────────────────┤
+ *   │ toolbar (search · extras)         │  (optional)
+ *   ├───────────────────────────────────┤
+ *   │                                   │
+ *   │ body (children — FileTree, etc.)  │  (scrollable)
+ *   │                                   │
+ *   ├───────────────────────────────────┤
+ *   │ footer (status · actions)         │  (optional)
+ *   └───────────────────────────────────┘
+ *
+ * @module @mks2508/mks-ui/react/ui/FilePanel
+ */
+import type { IFilePanelProps } from './FilePanel.types';
+/**
+ * FilePanel — frame around file-tree UI (header + toolbar + body + footer).
+ *
+ * @example
+ * ```tsx
+ * <FilePanel
+ *   title="Files"
+ *   search={<Input placeholder="Filter..." />}
+ *   status={`${count} files`}
+ * >
+ *   <FileTree nodes={nodes} onSelect={onSelect} />
+ * </FilePanel>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Borderless, with trailing actions
+ * <FilePanel
+ *   title="Project"
+ *   actions={<Button size="sm">Refresh</Button>}
+ *   bordered={false}
+ *   slots={{ header: 'bg-primary/5' }}
+ * >
+ *   {tree}
+ * </FilePanel>
+ * ```
+ */
+export declare const FilePanel: import("react").MemoExoticComponent<({ title, actions, search, toolbar, children, status, footerActions, density, bordered, className, slots, }: IFilePanelProps) => import("react/jsx-runtime").JSX.Element>;
+export { FilePanelStyles, filePanelVariants } from './FilePanel.styles';
+export type { FilePanelSlot } from './FilePanel.styles';
+export type { IFilePanelProps, FilePanelDensity } from './FilePanel.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FilePanel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAOH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS,mJAYnB,eAAe,6CAmDhB,CAAC;AAEH,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACxE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1,107 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { FilePanelStyles, filePanelVariants } from "./FilePanel.styles.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/FilePanel/index.tsx
+/**
+* FilePanel — IDE-style file-panel frame (header + toolbar + body + footer).
+*
+* Thin frame primitive: no business logic, no data fetching. Each region is
+* a slot so consumers compose what goes inside — typically a `<FileTree>`
+* in the body and an `<Input>` in the search slot.
+*
+* Layout:
+*   ┌───────────────────────────────────┐
+*   │ header (title · actions)          │  (sticky)
+*   ├───────────────────────────────────┤
+*   │ toolbar (search · extras)         │  (optional)
+*   ├───────────────────────────────────┤
+*   │                                   │
+*   │ body (children — FileTree, etc.)  │  (scrollable)
+*   │                                   │
+*   ├───────────────────────────────────┤
+*   │ footer (status · actions)         │  (optional)
+*   └───────────────────────────────────┘
+*
+* @module @mks2508/mks-ui/react/ui/FilePanel
+*/
+/**
+* FilePanel — frame around file-tree UI (header + toolbar + body + footer).
+*
+* @example
+* ```tsx
+* <FilePanel
+*   title="Files"
+*   search={<Input placeholder="Filter..." />}
+*   status={`${count} files`}
+* >
+*   <FileTree nodes={nodes} onSelect={onSelect} />
+* </FilePanel>
+* ```
+*
+* @example
+* ```tsx
+* // Borderless, with trailing actions
+* <FilePanel
+*   title="Project"
+*   actions={<Button size="sm">Refresh</Button>}
+*   bordered={false}
+*   slots={{ header: 'bg-primary/5' }}
+* >
+*   {tree}
+* </FilePanel>
+* ```
+*/
+const FilePanel = memo(function FilePanel({ title, actions, search, toolbar, children, status, footerActions, density = "compact", bordered = true, className, slots }) {
+	const hasHeader = title !== void 0 || actions !== void 0;
+	const hasToolbar = search !== void 0 || toolbar !== void 0;
+	const hasFooter = status !== void 0 || footerActions !== void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(filePanelVariants({
+			density,
+			bordered
+		}), slots?.root, className),
+		children: [
+			hasHeader && /* @__PURE__ */ jsxs("div", {
+				className: cn(FilePanelStyles.header, slots?.header),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn(FilePanelStyles.title, slots?.title),
+					children: title
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1 shrink-0",
+					children: actions
+				})]
+			}),
+			hasToolbar && /* @__PURE__ */ jsxs("div", {
+				className: cn(FilePanelStyles.toolbar, slots?.toolbar),
+				children: [search !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: cn(FilePanelStyles.search, slots?.search),
+					children: search
+				}), toolbar && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1 shrink-0",
+					children: toolbar
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn(FilePanelStyles.body, slots?.body),
+				children
+			}),
+			hasFooter && /* @__PURE__ */ jsxs("div", {
+				className: cn(FilePanelStyles.footer, slots?.footer),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn(FilePanelStyles.status, slots?.status),
+					children: status
+				}), footerActions && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1 shrink-0 ml-auto",
+					children: footerActions
+				})]
+			})
+		]
+	});
+});
+
+//#endregion
+export { FilePanel };

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

@@ -0,0 +1,31 @@
+/**
+ * Styles for FileTree.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileTree
+ */
+import type { StyleSlots } from '@/core/types';
+/** Visual regions of the FileTree component. */
+export type FileTreeSlot = 'root' | 'list' | 'node' | 'row' | 'indent' | 'chevron' | 'empty';
+/**
+ * Default Tailwind classes for each FileTree slot.
+ *
+ * | Slot | Region |
+ * |------|--------|
+ * | `root` | Outer container (role="tree") |
+ * | `list` | Child list (`role="group"`) |
+ * | `node` | Single node wrapper (row + children) |
+ * | `row` | Row line holding indent guides + chevron + FileItem |
+ * | `indent` | Leading indent spacer per depth level |
+ * | `chevron` | Expand/collapse glyph for directories |
+ * | `empty` | "No files" placeholder |
+ */
+export declare const FileTreeStyles: StyleSlots<FileTreeSlot>;
+/**
+ * CVA variants for the FileTree root.
+ *
+ * Density variants map to the underlying `FileItem` density so rows align.
+ */
+export declare const fileTreeVariants: (props?: ({
+    density?: "compact" | "comfortable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=FileTree.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileTree/FileTree.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,KAAK,GACL,QAAQ,GACR,SAAS,GACT,OAAO,CAAC;AAEZ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAS1C,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;8EAU3B,CAAC"}

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

@@ -0,0 +1,45 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/FileTree/FileTree.styles.ts
+/**
+* Styles for FileTree.
+*
+* @module @mks2508/mks-ui/react/ui/FileTree
+*/
+/**
+* Default Tailwind classes for each FileTree slot.
+*
+* | Slot | Region |
+* |------|--------|
+* | `root` | Outer container (role="tree") |
+* | `list` | Child list (`role="group"`) |
+* | `node` | Single node wrapper (row + children) |
+* | `row` | Row line holding indent guides + chevron + FileItem |
+* | `indent` | Leading indent spacer per depth level |
+* | `chevron` | Expand/collapse glyph for directories |
+* | `empty` | "No files" placeholder |
+*/
+const FileTreeStyles = {
+	root: "file-tree flex flex-col w-full text-foreground",
+	list: "flex flex-col",
+	node: "flex flex-col",
+	row: "flex items-center w-full",
+	indent: "shrink-0 h-full",
+	chevron: "shrink-0 inline-flex items-center justify-center size-4 text-muted-foreground/70 hover:text-foreground transition-transform duration-100",
+	empty: "px-3 py-2 text-xs font-mono text-muted-foreground/60"
+};
+/**
+* CVA variants for the FileTree root.
+*
+* Density variants map to the underlying `FileItem` density so rows align.
+*/
+const fileTreeVariants = cva(FileTreeStyles.root, {
+	variants: { density: {
+		compact: "",
+		comfortable: ""
+	} },
+	defaultVariants: { density: "compact" }
+});
+
+//#endregion
+export { FileTreeStyles, fileTreeVariants };

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

@@ -0,0 +1,95 @@
+/**
+ * Types for FileTree.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileTree
+ */
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '@/core/types';
+import type { FileIconResolver } from '../FileIcon/FileIcon.types';
+import type { FileItemChangeStatus } from '../FileItem/FileItem.types';
+import type { FileTreeSlot, fileTreeVariants } from './FileTree.styles';
+/** What kind of filesystem entry a tree node represents. */
+export type FileTreeNodeKind = 'file' | 'dir';
+/**
+ * A single node in a file tree.
+ *
+ * Nodes are identified by `id` (typically the relative path). Directories
+ * may have `children` eagerly populated, or `null`/`undefined` to indicate
+ * unloaded children that will be fetched lazily via `onToggle`.
+ */
+export interface IFileTreeNode {
+    /** Stable identifier — usually the relpath. */
+    id: string;
+    /** Display name (usually basename). */
+    name: string;
+    /** Full path relative to root (shown in `FileItem`). */
+    path: string;
+    /** File or directory. */
+    kind: FileTreeNodeKind;
+    /** Last-modified timestamp (rendered as trailing chip on the row). */
+    modifiedAt?: Date;
+    /** Whether this node is boosted (⭐ on the row). */
+    isBoosted?: boolean;
+    /** Optional git change status — proxied to the underlying `FileItem`. */
+    changeStatus?: FileItemChangeStatus | null;
+    /**
+     * Children for directories.
+     * - `undefined` → unloaded (will request on expand)
+     * - `[]` → loaded, empty
+     * - `IFileTreeNode[]` → loaded with entries
+     */
+    children?: IFileTreeNode[];
+}
+/** Visual density, proxied to `FileItem`. */
+export type FileTreeDensity = NonNullable<VariantProps<typeof fileTreeVariants>['density']>;
+/**
+ * Props for FileTree.
+ *
+ * @see {@link FileTreeSlot}
+ */
+export interface IFileTreeProps extends Omit<VariantProps<typeof fileTreeVariants>, 'density'> {
+    /** Root nodes to render. */
+    nodes: IFileTreeNode[];
+    /** Fired when a file row is activated (Enter / click on file). */
+    onSelect?: (node: IFileTreeNode) => void;
+    /**
+     * Fired when a directory is expanded or collapsed.
+     *
+     * Called with the node and the next-expanded state. Useful for lazy-loading
+     * children — consumers can fetch children and push them into `nodes`.
+     */
+    onToggle?: (node: IFileTreeNode, expanded: boolean) => void;
+    /**
+     * Controlled expanded-ids. If provided, the tree is controlled and
+     * `onToggle` is expected to update this set upstream.
+     * If omitted, the tree manages its own expand state internally.
+     */
+    expandedIds?: ReadonlySet<string> | readonly string[];
+    /** Controlled selected id. Highlights the matching row. */
+    selectedId?: string;
+    /** Row density (proxied to `FileItem`). Default `"compact"`. */
+    density?: FileTreeDensity;
+    /** Icon base path passed to inner `FileItem` rows. */
+    iconBasePath?: string;
+    /** Custom file-icon resolver passed to inner `FileItem` rows. */
+    iconResolve?: FileIconResolver;
+    /** Indent width in px per depth level. Default `12`. */
+    indentPx?: number;
+    /** Empty-state text shown when `nodes` is empty. Default `"No files"`. */
+    emptyLabel?: string;
+    /** Optional CSS class merged onto the root. */
+    className?: string;
+    /**
+     * Override default Tailwind classes for specific visual regions.
+     *
+     * @example
+     * ```tsx
+     * <FileTree
+     *   nodes={tree}
+     *   slots={{ chevron: 'text-primary', row: 'rounded-md' }}
+     * />
+     * ```
+     */
+    slots?: SlotOverrides<FileTreeSlot>;
+}
+//# sourceMappingURL=FileTree.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileTree/FileTree.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,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAExE,4DAA4D;AAC5D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,KAAK,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,IAAI,EAAE,gBAAgB,CAAC;IACvB,sEAAsE;IACtE,UAAU,CAAC,EAAE,IAAI,CAAC;IAClB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,YAAY,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC3C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED,6CAA6C;AAC7C,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,4BAA4B;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,MAAM,EAAE,CAAC;IACtD,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC"}

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

@@ -0,0 +1,60 @@
+/**
+ * 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
+ */
+import type { IFileTreeProps } from './FileTree.types';
+/**
+ * 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);
+ *   }}
+ * />
+ * ```
+ */
+export declare const FileTree: import("react").MemoExoticComponent<({ nodes, onSelect, onToggle, expandedIds, selectedId, density, iconBasePath, iconResolve, indentPx, emptyLabel, className, slots, }: IFileTreeProps) => import("react/jsx-runtime").JSX.Element>;
+export { FileTreeStyles, fileTreeVariants } from './FileTree.styles';
+export type { FileTreeSlot } from './FileTree.styles';
+export type { IFileTreeProps, IFileTreeNode, FileTreeNodeKind, FileTreeDensity, } from './FileTree.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileTree/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAQH,OAAO,KAAK,EAEV,cAAc,EACf,MAAM,kBAAkB,CAAC;AAkK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,QAAQ,4KAalB,cAAc,6CAsEf,CAAC;AAEH,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EACV,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,eAAe,GAChB,MAAM,kBAAkB,CAAC"}