@negative-space/file-tree 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Matheus Bastani
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,15 @@
+# @negative-space/file-tree
+
+A lightweight and flexible file tree component for React.
+
+## Installation
+
+    # Using Yarn
+    yarn add @negative-space/file-tree
+
+    # Using npm
+    npm install @negative-space/file-tree
+
+## Contributing
+
+Feel free to fork, tweak, and send a pull request!

package/dist/index.d.mts

@@ -0,0 +1,77 @@
+import { FlexProps } from '@negative-space/flex';
+import React from 'react';
+import { IconButtonProps } from '@negative-space/button';
+
+interface FileTreeFolderProps extends Omit<FlexProps, 'children' | 'className' | 'style' | 'prefix'> {
+    classNames?: {
+        root?: string;
+        header?: string;
+        collapseButton?: IconButtonProps['classNames'];
+        prefix?: string;
+        label?: string;
+        suffix?: string;
+        children?: string;
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        header?: React.CSSProperties;
+        collapseButton?: IconButtonProps['styles'];
+        prefix?: React.CSSProperties;
+        label?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+        children?: React.CSSProperties;
+    };
+    prefix?: React.ReactNode;
+    label?: React.ReactNode;
+    suffix?: React.ReactNode;
+    children?: React.ReactNode;
+    collapsable?: boolean;
+    collapsed?: boolean;
+    setCollapsed?: (collapsed: boolean) => void;
+    active?: boolean;
+}
+
+interface FileTreeItemProps extends Omit<FlexProps, 'children' | 'className' | 'style' | 'prefix'> {
+    classNames?: {
+        root?: string;
+        prefix?: string;
+        label?: string;
+        suffix?: string;
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        prefix?: React.CSSProperties;
+        label?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+    };
+    prefix?: React.ReactNode;
+    label?: React.ReactNode;
+    suffix?: React.ReactNode;
+    active?: boolean;
+}
+
+type FileTreeEntry = {
+    folder: Omit<FileTreeFolderProps, 'children'>;
+    items?: FileTreeEntry[];
+    item?: never;
+} | {
+    item: FileTreeItemProps;
+    folder?: never;
+    items?: never;
+};
+interface FileTreeProps extends Omit<FlexProps, 'children'> {
+    classNames?: {
+        root?: string;
+        folders?: FileTreeFolderProps['classNames'];
+        items?: FileTreeItemProps['classNames'];
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        folders?: FileTreeFolderProps['styles'];
+        items?: FileTreeItemProps['styles'];
+    };
+    items?: FileTreeEntry[];
+}
+declare const FileTree: React.ForwardRefExoticComponent<FileTreeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { FileTree, type FileTreeProps };

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+import { FlexProps } from '@negative-space/flex';
+import React from 'react';
+import { IconButtonProps } from '@negative-space/button';
+
+interface FileTreeFolderProps extends Omit<FlexProps, 'children' | 'className' | 'style' | 'prefix'> {
+    classNames?: {
+        root?: string;
+        header?: string;
+        collapseButton?: IconButtonProps['classNames'];
+        prefix?: string;
+        label?: string;
+        suffix?: string;
+        children?: string;
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        header?: React.CSSProperties;
+        collapseButton?: IconButtonProps['styles'];
+        prefix?: React.CSSProperties;
+        label?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+        children?: React.CSSProperties;
+    };
+    prefix?: React.ReactNode;
+    label?: React.ReactNode;
+    suffix?: React.ReactNode;
+    children?: React.ReactNode;
+    collapsable?: boolean;
+    collapsed?: boolean;
+    setCollapsed?: (collapsed: boolean) => void;
+    active?: boolean;
+}
+
+interface FileTreeItemProps extends Omit<FlexProps, 'children' | 'className' | 'style' | 'prefix'> {
+    classNames?: {
+        root?: string;
+        prefix?: string;
+        label?: string;
+        suffix?: string;
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        prefix?: React.CSSProperties;
+        label?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+    };
+    prefix?: React.ReactNode;
+    label?: React.ReactNode;
+    suffix?: React.ReactNode;
+    active?: boolean;
+}
+
+type FileTreeEntry = {
+    folder: Omit<FileTreeFolderProps, 'children'>;
+    items?: FileTreeEntry[];
+    item?: never;
+} | {
+    item: FileTreeItemProps;
+    folder?: never;
+    items?: never;
+};
+interface FileTreeProps extends Omit<FlexProps, 'children'> {
+    classNames?: {
+        root?: string;
+        folders?: FileTreeFolderProps['classNames'];
+        items?: FileTreeItemProps['classNames'];
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        folders?: FileTreeFolderProps['styles'];
+        items?: FileTreeItemProps['styles'];
+    };
+    items?: FileTreeEntry[];
+}
+declare const FileTree: React.ForwardRefExoticComponent<FileTreeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { FileTree, type FileTreeProps };

package/dist/index.js

@@ -0,0 +1,213 @@
+'use strict';
+
+var flex = require('@negative-space/flex');
+var system = require('@negative-space/system');
+var React = require('react');
+var button = require('@negative-space/button');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/FileTree.tsx
+var FileTreeFolder = React__default.default.forwardRef(
+  ({
+    classNames,
+    styles,
+    collapsable = true,
+    collapsed = true,
+    setCollapsed: setCollapsedProp,
+    prefix,
+    label,
+    suffix,
+    active,
+    children,
+    ...props
+  }, ref) => {
+    const { global } = system.useNSUI();
+    const [collapsedState, setCollapsedState] = React.useState(collapsed);
+    React.useEffect(() => {
+      setCollapsedState(collapsed);
+    }, [collapsed]);
+    const isCollapsed = setCollapsedProp ? collapsed : collapsedState;
+    const handleCollapse = () => {
+      const nextCollapsed = !isCollapsed;
+      setCollapsedState(nextCollapsed);
+      setCollapsedProp?.(nextCollapsed);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      flex.Flex,
+      {
+        ref,
+        direction: "column",
+        className: system.cn(`${global?.prefixCls}-file-tree-folder`, classNames?.root),
+        "data-active": active,
+        style: styles?.root,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            flex.Flex,
+            {
+              className: system.cn(`${global?.prefixCls}-file-tree-folder-header`, classNames?.header),
+              "data-active": active,
+              "data-collapsed": isCollapsed,
+              style: styles?.header,
+              children: [
+                collapsable && /* @__PURE__ */ jsxRuntime.jsx(
+                  button.IconButton,
+                  {
+                    classNames: classNames?.collapseButton,
+                    "data-collapsed": isCollapsed,
+                    styles: styles?.collapseButton,
+                    onClick: handleCollapse,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      system.ChevronDown,
+                      {
+                        style: {
+                          transform: isCollapsed ? "rotate(-90deg)" : "",
+                          ...styles?.collapseButton?.icon
+                        }
+                      }
+                    )
+                  }
+                ),
+                prefix && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: system.cn(`${global?.prefixCls}-file-tree-folder-prefix`, classNames?.prefix),
+                    style: styles?.prefix,
+                    children: prefix
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: system.cn(`${global?.prefixCls}-file-tree-folder-label`, classNames?.label),
+                    style: styles?.label,
+                    children: label
+                  }
+                ),
+                suffix && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: system.cn(`${global?.prefixCls}-file-tree-folder-suffix`, classNames?.suffix),
+                    style: styles?.suffix,
+                    children: suffix
+                  }
+                )
+              ]
+            }
+          ),
+          !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: system.cn(`${global?.prefixCls}-file-tree-folder-children`, classNames?.children),
+              style: styles?.children,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FileTreeFolder.displayName = "FileTreeFolder";
+var FileTreeItem = React__default.default.forwardRef(
+  ({ classNames, styles, prefix, label, suffix, active, ...props }, ref) => {
+    const { global } = system.useNSUI();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      flex.Flex,
+      {
+        ref,
+        className: system.cn(`${global?.prefixCls}-file-tree-item`, classNames?.root),
+        "data-active": active,
+        style: styles?.root,
+        ...props,
+        children: [
+          prefix && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: system.cn(`${global?.prefixCls}-file-tree-item-prefix`, classNames?.prefix),
+              style: styles?.prefix,
+              children: prefix
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: system.cn(`${global?.prefixCls}-file-tree-item-label`, classNames?.label),
+              style: styles?.label,
+              children: label
+            }
+          ),
+          suffix && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: system.cn(`${global?.prefixCls}-file-tree-item-suffix`, classNames?.suffix),
+              style: styles?.suffix,
+              children: suffix
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FileTreeItem.displayName = "FileTreeItem";
+var FileTree = React__default.default.forwardRef(
+  ({ className, classNames, styles, items = [], ...props }, ref) => {
+    const { global } = system.useNSUI();
+    const renderEntries = (entries) => entries.map((entry, index) => {
+      if (entry.folder) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          FileTreeFolder,
+          {
+            ...entry.folder,
+            classNames: {
+              ...classNames?.folders,
+              ...entry.folder.classNames
+            },
+            styles: {
+              ...styles?.folders,
+              ...entry.folder.styles
+            },
+            children: entry.items && renderEntries(entry.items)
+          },
+          index
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FileTreeItem,
+        {
+          ...entry.item,
+          classNames: {
+            ...classNames?.items,
+            ...entry.item.classNames
+          },
+          styles: {
+            ...styles?.items,
+            ...entry.item.styles
+          }
+        },
+        index
+      );
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      flex.Flex,
+      {
+        ref,
+        direction: "column",
+        className: system.cn(`${global?.prefixCls}-file-tree`, className, classNames?.root),
+        style: styles?.root,
+        ...props,
+        children: renderEntries(items)
+      }
+    );
+  }
+);
+FileTree.displayName = "FileTree";
+
+exports.FileTree = FileTree;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FileTreeFolder.tsx","../src/FileTreeItem.tsx","../src/FileTree.tsx"],"names":["React","useNSUI","useState","useEffect","jsxs","Flex","cn","jsx","IconButton","ChevronDown"],"mappings":"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","file":"index.js","sourcesContent":["import { IconButton, type IconButtonProps } from '@negative-space/button'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { ChevronDown, cn, useNSUI } from '@negative-space/system'\nimport React, { useEffect, useState } from 'react'\n\nexport interface FileTreeFolderProps extends Omit<\n  FlexProps,\n  'children' | 'className' | 'style' | 'prefix'\n> {\n  classNames?: {\n    root?: string\n    header?: string\n    collapseButton?: IconButtonProps['classNames']\n    prefix?: string\n    label?: string\n    suffix?: string\n    children?: string\n  }\n  styles?: {\n    root?: React.CSSProperties\n    header?: React.CSSProperties\n    collapseButton?: IconButtonProps['styles']\n    prefix?: React.CSSProperties\n    label?: React.CSSProperties\n    suffix?: React.CSSProperties\n    children?: React.CSSProperties\n  }\n  prefix?: React.ReactNode\n  label?: React.ReactNode\n  suffix?: React.ReactNode\n  children?: React.ReactNode\n  collapsable?: boolean\n  collapsed?: boolean\n  setCollapsed?: (collapsed: boolean) => void\n  active?: boolean\n}\n\nexport const FileTreeFolder = React.forwardRef<HTMLDivElement, FileTreeFolderProps>(\n  (\n    {\n      classNames,\n      styles,\n      collapsable = true,\n      collapsed = true,\n      setCollapsed: setCollapsedProp,\n      prefix,\n      label,\n      suffix,\n      active,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { global } = useNSUI()\n    const [collapsedState, setCollapsedState] = useState(collapsed)\n\n    useEffect(() => {\n      setCollapsedState(collapsed)\n    }, [collapsed])\n\n    const isCollapsed = setCollapsedProp ? collapsed : collapsedState\n\n    const handleCollapse = () => {\n      const nextCollapsed = !isCollapsed\n\n      setCollapsedState(nextCollapsed)\n      setCollapsedProp?.(nextCollapsed)\n    }\n\n    return (\n      <Flex\n        ref={ref}\n        direction=\"column\"\n        className={cn(`${global?.prefixCls}-file-tree-folder`, classNames?.root)}\n        data-active={active}\n        style={styles?.root}\n        {...props}\n      >\n        <Flex\n          className={cn(`${global?.prefixCls}-file-tree-folder-header`, classNames?.header)}\n          data-active={active}\n          data-collapsed={isCollapsed}\n          style={styles?.header}\n        >\n          {collapsable && (\n            <IconButton\n              classNames={classNames?.collapseButton}\n              data-collapsed={isCollapsed}\n              styles={styles?.collapseButton}\n              onClick={handleCollapse}\n            >\n              <ChevronDown\n                style={{\n                  transform: isCollapsed ? 'rotate(-90deg)' : '',\n                  ...styles?.collapseButton?.icon\n                }}\n              />\n            </IconButton>\n          )}\n\n          {prefix && (\n            <div\n              className={cn(`${global?.prefixCls}-file-tree-folder-prefix`, classNames?.prefix)}\n              style={styles?.prefix}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <div\n            className={cn(`${global?.prefixCls}-file-tree-folder-label`, classNames?.label)}\n            style={styles?.label}\n          >\n            {label}\n          </div>\n\n          {suffix && (\n            <div\n              className={cn(`${global?.prefixCls}-file-tree-folder-suffix`, classNames?.suffix)}\n              style={styles?.suffix}\n            >\n              {suffix}\n            </div>\n          )}\n        </Flex>\n\n        {!isCollapsed && (\n          <div\n            className={cn(`${global?.prefixCls}-file-tree-folder-children`, classNames?.children)}\n            style={styles?.children}\n          >\n            {children}\n          </div>\n        )}\n      </Flex>\n    )\n  }\n)\n\nFileTreeFolder.displayName = 'FileTreeFolder'\n","import { Flex, type FlexProps } from '@negative-space/flex'\nimport { cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nexport interface FileTreeItemProps extends Omit<\n  FlexProps,\n  'children' | 'className' | 'style' | 'prefix'\n> {\n  classNames?: {\n    root?: string\n    prefix?: string\n    label?: string\n    suffix?: string\n  }\n  styles?: {\n    root?: React.CSSProperties\n    prefix?: React.CSSProperties\n    label?: React.CSSProperties\n    suffix?: React.CSSProperties\n  }\n  prefix?: React.ReactNode\n  label?: React.ReactNode\n  suffix?: React.ReactNode\n  active?: boolean\n}\n\nexport const FileTreeItem = React.forwardRef<HTMLDivElement, FileTreeItemProps>(\n  ({ classNames, styles, prefix, label, suffix, active, ...props }, ref) => {\n    const { global } = useNSUI()\n\n    return (\n      <Flex\n        ref={ref}\n        className={cn(`${global?.prefixCls}-file-tree-item`, classNames?.root)}\n        data-active={active}\n        style={styles?.root}\n        {...props}\n      >\n        {prefix && (\n          <div\n            className={cn(`${global?.prefixCls}-file-tree-item-prefix`, classNames?.prefix)}\n            style={styles?.prefix}\n          >\n            {prefix}\n          </div>\n        )}\n\n        <div\n          className={cn(`${global?.prefixCls}-file-tree-item-label`, classNames?.label)}\n          style={styles?.label}\n        >\n          {label}\n        </div>\n\n        {suffix && (\n          <div\n            className={cn(`${global?.prefixCls}-file-tree-item-suffix`, classNames?.suffix)}\n            style={styles?.suffix}\n          >\n            {suffix}\n          </div>\n        )}\n      </Flex>\n    )\n  }\n)\n\nFileTreeItem.displayName = 'FileTreeItem'\n","import { Flex, type FlexProps } from '@negative-space/flex'\nimport { cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { FileTreeFolder, type FileTreeFolderProps } from './FileTreeFolder'\nimport { FileTreeItem, type FileTreeItemProps } from './FileTreeItem'\n\nexport type FileTreeEntry =\n  | {\n      folder: Omit<FileTreeFolderProps, 'children'>\n      items?: FileTreeEntry[]\n      item?: never\n    }\n  | {\n      item: FileTreeItemProps\n      folder?: never\n      items?: never\n    }\n\nexport interface FileTreeProps extends Omit<FlexProps, 'children'> {\n  classNames?: {\n    root?: string\n    folders?: FileTreeFolderProps['classNames']\n    items?: FileTreeItemProps['classNames']\n  }\n  styles?: {\n    root?: React.CSSProperties\n    folders?: FileTreeFolderProps['styles']\n    items?: FileTreeItemProps['styles']\n  }\n  items?: FileTreeEntry[]\n}\n\nexport const FileTree = React.forwardRef<HTMLDivElement, FileTreeProps>(\n  ({ className, classNames, styles, items = [], ...props }, ref) => {\n    const { global } = useNSUI()\n\n    const renderEntries = (entries: FileTreeEntry[]) =>\n      entries.map((entry, index) => {\n        if (entry.folder) {\n          return (\n            <FileTreeFolder\n              key={index}\n              {...entry.folder}\n              classNames={{\n                ...classNames?.folders,\n                ...entry.folder.classNames\n              }}\n              styles={{\n                ...styles?.folders,\n                ...entry.folder.styles\n              }}\n            >\n              {entry.items && renderEntries(entry.items)}\n            </FileTreeFolder>\n          )\n        }\n\n        return (\n          <FileTreeItem\n            key={index}\n            {...entry.item}\n            classNames={{\n              ...classNames?.items,\n              ...entry.item.classNames\n            }}\n            styles={{\n              ...styles?.items,\n              ...entry.item.styles\n            }}\n          />\n        )\n      })\n\n    return (\n      <Flex\n        ref={ref}\n        direction=\"column\"\n        className={cn(`${global?.prefixCls}-file-tree`, className, classNames?.root)}\n        style={styles?.root}\n        {...props}\n      >\n        {renderEntries(items)}\n      </Flex>\n    )\n  }\n)\n\nFileTree.displayName = 'FileTree'\n"]}

package/dist/index.mjs

@@ -0,0 +1,207 @@
+import { Flex } from '@negative-space/flex';
+import { useNSUI, cn, ChevronDown } from '@negative-space/system';
+import React, { useState, useEffect } from 'react';
+import { IconButton } from '@negative-space/button';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/FileTree.tsx
+var FileTreeFolder = React.forwardRef(
+  ({
+    classNames,
+    styles,
+    collapsable = true,
+    collapsed = true,
+    setCollapsed: setCollapsedProp,
+    prefix,
+    label,
+    suffix,
+    active,
+    children,
+    ...props
+  }, ref) => {
+    const { global } = useNSUI();
+    const [collapsedState, setCollapsedState] = useState(collapsed);
+    useEffect(() => {
+      setCollapsedState(collapsed);
+    }, [collapsed]);
+    const isCollapsed = setCollapsedProp ? collapsed : collapsedState;
+    const handleCollapse = () => {
+      const nextCollapsed = !isCollapsed;
+      setCollapsedState(nextCollapsed);
+      setCollapsedProp?.(nextCollapsed);
+    };
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref,
+        direction: "column",
+        className: cn(`${global?.prefixCls}-file-tree-folder`, classNames?.root),
+        "data-active": active,
+        style: styles?.root,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              className: cn(`${global?.prefixCls}-file-tree-folder-header`, classNames?.header),
+              "data-active": active,
+              "data-collapsed": isCollapsed,
+              style: styles?.header,
+              children: [
+                collapsable && /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    classNames: classNames?.collapseButton,
+                    "data-collapsed": isCollapsed,
+                    styles: styles?.collapseButton,
+                    onClick: handleCollapse,
+                    children: /* @__PURE__ */ jsx(
+                      ChevronDown,
+                      {
+                        style: {
+                          transform: isCollapsed ? "rotate(-90deg)" : "",
+                          ...styles?.collapseButton?.icon
+                        }
+                      }
+                    )
+                  }
+                ),
+                prefix && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(`${global?.prefixCls}-file-tree-folder-prefix`, classNames?.prefix),
+                    style: styles?.prefix,
+                    children: prefix
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(`${global?.prefixCls}-file-tree-folder-label`, classNames?.label),
+                    style: styles?.label,
+                    children: label
+                  }
+                ),
+                suffix && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(`${global?.prefixCls}-file-tree-folder-suffix`, classNames?.suffix),
+                    style: styles?.suffix,
+                    children: suffix
+                  }
+                )
+              ]
+            }
+          ),
+          !isCollapsed && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(`${global?.prefixCls}-file-tree-folder-children`, classNames?.children),
+              style: styles?.children,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FileTreeFolder.displayName = "FileTreeFolder";
+var FileTreeItem = React.forwardRef(
+  ({ classNames, styles, prefix, label, suffix, active, ...props }, ref) => {
+    const { global } = useNSUI();
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        ref,
+        className: cn(`${global?.prefixCls}-file-tree-item`, classNames?.root),
+        "data-active": active,
+        style: styles?.root,
+        ...props,
+        children: [
+          prefix && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(`${global?.prefixCls}-file-tree-item-prefix`, classNames?.prefix),
+              style: styles?.prefix,
+              children: prefix
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(`${global?.prefixCls}-file-tree-item-label`, classNames?.label),
+              style: styles?.label,
+              children: label
+            }
+          ),
+          suffix && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(`${global?.prefixCls}-file-tree-item-suffix`, classNames?.suffix),
+              style: styles?.suffix,
+              children: suffix
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FileTreeItem.displayName = "FileTreeItem";
+var FileTree = React.forwardRef(
+  ({ className, classNames, styles, items = [], ...props }, ref) => {
+    const { global } = useNSUI();
+    const renderEntries = (entries) => entries.map((entry, index) => {
+      if (entry.folder) {
+        return /* @__PURE__ */ jsx(
+          FileTreeFolder,
+          {
+            ...entry.folder,
+            classNames: {
+              ...classNames?.folders,
+              ...entry.folder.classNames
+            },
+            styles: {
+              ...styles?.folders,
+              ...entry.folder.styles
+            },
+            children: entry.items && renderEntries(entry.items)
+          },
+          index
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        FileTreeItem,
+        {
+          ...entry.item,
+          classNames: {
+            ...classNames?.items,
+            ...entry.item.classNames
+          },
+          styles: {
+            ...styles?.items,
+            ...entry.item.styles
+          }
+        },
+        index
+      );
+    });
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        ref,
+        direction: "column",
+        className: cn(`${global?.prefixCls}-file-tree`, className, classNames?.root),
+        style: styles?.root,
+        ...props,
+        children: renderEntries(items)
+      }
+    );
+  }
+);
+FileTree.displayName = "FileTree";
+
+export { FileTree };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FileTreeFolder.tsx","../src/FileTreeItem.tsx","../src/FileTree.tsx"],"names":["React","useNSUI","jsxs","Flex","cn","jsx"],"mappings":";;;;;;;AAqCO,IAAM,iBAAiB,KAAA,CAAM,UAAA;AAAA,EAClC,CACE;AAAA,IACE,UAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA,GAAc,IAAA;AAAA,IACd,SAAA,GAAY,IAAA;AAAA,IACZ,YAAA,EAAc,gBAAA;AAAA,IACd,MAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,EAAE,MAAA,EAAO,GAAI,OAAA,EAAQ;AAC3B,IAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,SAAS,CAAA;AAE9D,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,iBAAA,CAAkB,SAAS,CAAA;AAAA,IAC7B,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,IAAA,MAAM,WAAA,GAAc,mBAAmB,SAAA,GAAY,cAAA;AAEnD,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,MAAM,gBAAgB,CAAC,WAAA;AAEvB,MAAA,iBAAA,CAAkB,aAAa,CAAA;AAC/B,MAAA,gBAAA,GAAmB,aAAa,CAAA;AAAA,IAClC,CAAA;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAU,QAAA;AAAA,QACV,WAAW,EAAA,CAAG,CAAA,EAAG,QAAQ,SAAS,CAAA,iBAAA,CAAA,EAAqB,YAAY,IAAI,CAAA;AAAA,QACvE,aAAA,EAAa,MAAA;AAAA,QACb,OAAO,MAAA,EAAQ,IAAA;AAAA,QACd,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,WAAW,EAAA,CAAG,CAAA,EAAG,QAAQ,SAAS,CAAA,wBAAA,CAAA,EAA4B,YAAY,MAAM,CAAA;AAAA,cAChF,aAAA,EAAa,MAAA;AAAA,cACb,gBAAA,EAAgB,WAAA;AAAA,cAChB,OAAO,MAAA,EAAQ,MAAA;AAAA,cAEd,QAAA,EAAA;AAAA,gBAAA,WAAA,oBACC,GAAA;AAAA,kBAAC,UAAA;AAAA,kBAAA;AAAA,oBACC,YAAY,UAAA,EAAY,cAAA;AAAA,oBACxB,gBAAA,EAAgB,WAAA;AAAA,oBAChB,QAAQ,MAAA,EAAQ,cAAA;AAAA,oBAChB,OAAA,EAAS,cAAA;AAAA,oBAET,QAAA,kBAAA,GAAA;AAAA,sBAAC,WAAA;AAAA,sBAAA;AAAA,wBACC,KAAA,EAAO;AAAA,0BACL,SAAA,EAAW,cAAc,gBAAA,GAAmB,EAAA;AAAA,0BAC5C,GAAG,QAAQ,cAAA,EAAgB;AAAA;AAC7B;AAAA;AACF;AAAA,iBACF;AAAA,gBAGD,MAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,EAAA,CAAG,CAAA,EAAG,QAAQ,SAAS,CAAA,wBAAA,CAAA,EAA4B,YAAY,MAAM,CAAA;AAAA,oBAChF,OAAO,MAAA,EAAQ,MAAA;AAAA,oBAEd,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gCAGF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,EAAA,CAAG,CAAA,EAAG,QAAQ,SAAS,CAAA,uBAAA,CAAA,EAA2B,YAAY,KAAK,CAAA;AAAA,oBAC9E,OAAO,MAAA,EAAQ,KAAA;AAAA,oBAEd,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gBAEC,MAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,EAAA,CAAG,CAAA,EAAG,QAAQ,SAAS,CAAA,wBAAA,CAAA,EAA4B,YAAY,MAAM,CAAA;AAAA,oBAChF,OAAO,MAAA,EAAQ,MAAA;AAAA,oBAEd,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,WAEJ;AAAA,UAEC,CAAC,WAAA,oBACA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,EAAA,CAAG,CAAA,EAAG,QAAQ,SAAS,CAAA,0BAAA,CAAA,EAA8B,YAAY,QAAQ,CAAA;AAAA,cACpF,OAAO,MAAA,EAAQ,QAAA;AAAA,cAEd;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF,CAAA;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA;AClHtB,IAAM,eAAeA,KAAAA,CAAM,UAAA;AAAA,EAChC,CAAC,EAAE,UAAA,EAAY,MAAA,EAAQ,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAQ,MAAA,EAAQ,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACxE,IAAA,MAAM,EAAE,MAAA,EAAO,GAAIC,OAAAA,EAAQ;AAE3B,IAAA,uBACEC,IAAAA;AAAA,MAACC,IAAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAWC,EAAAA,CAAG,CAAA,EAAG,QAAQ,SAAS,CAAA,eAAA,CAAA,EAAmB,YAAY,IAAI,CAAA;AAAA,QACrE,aAAA,EAAa,MAAA;AAAA,QACb,OAAO,MAAA,EAAQ,IAAA;AAAA,QACd,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,MAAA,oBACCC,GAAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAWD,EAAAA,CAAG,CAAA,EAAG,QAAQ,SAAS,CAAA,sBAAA,CAAA,EAA0B,YAAY,MAAM,CAAA;AAAA,cAC9E,OAAO,MAAA,EAAQ,MAAA;AAAA,cAEd,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BAGFC,GAAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAWD,EAAAA,CAAG,CAAA,EAAG,QAAQ,SAAS,CAAA,qBAAA,CAAA,EAAyB,YAAY,KAAK,CAAA;AAAA,cAC5E,OAAO,MAAA,EAAQ,KAAA;AAAA,cAEd,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAEC,0BACCC,GAAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAWD,EAAAA,CAAG,CAAA,EAAG,QAAQ,SAAS,CAAA,sBAAA,CAAA,EAA0B,YAAY,MAAM,CAAA;AAAA,cAC9E,OAAO,MAAA,EAAQ,MAAA;AAAA,cAEd,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF,CAAA;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;AClCpB,IAAM,WAAWJ,KAAAA,CAAM,UAAA;AAAA,EAC5B,CAAC,EAAE,SAAA,EAAW,UAAA,EAAY,MAAA,EAAQ,KAAA,GAAQ,EAAC,EAAG,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAChE,IAAA,MAAM,EAAE,MAAA,EAAO,GAAIC,OAAAA,EAAQ;AAE3B,IAAA,MAAM,gBAAgB,CAAC,OAAA,KACrB,QAAQ,GAAA,CAAI,CAAC,OAAO,KAAA,KAAU;AAC5B,MAAA,IAAI,MAAM,MAAA,EAAQ;AAChB,QAAA,uBACEI,GAAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YAEE,GAAG,KAAA,CAAM,MAAA;AAAA,YACV,UAAA,EAAY;AAAA,cACV,GAAG,UAAA,EAAY,OAAA;AAAA,cACf,GAAG,MAAM,MAAA,CAAO;AAAA,aAClB;AAAA,YACA,MAAA,EAAQ;AAAA,cACN,GAAG,MAAA,EAAQ,OAAA;AAAA,cACX,GAAG,MAAM,MAAA,CAAO;AAAA,aAClB;AAAA,YAEC,QAAA,EAAA,KAAA,CAAM,KAAA,IAAS,aAAA,CAAc,KAAA,CAAM,KAAK;AAAA,WAAA;AAAA,UAXpC;AAAA,SAYP;AAAA,MAEJ;AAEA,MAAA,uBACEA,GAAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UAEE,GAAG,KAAA,CAAM,IAAA;AAAA,UACV,UAAA,EAAY;AAAA,YACV,GAAG,UAAA,EAAY,KAAA;AAAA,YACf,GAAG,MAAM,IAAA,CAAK;AAAA,WAChB;AAAA,UACA,MAAA,EAAQ;AAAA,YACN,GAAG,MAAA,EAAQ,KAAA;AAAA,YACX,GAAG,MAAM,IAAA,CAAK;AAAA;AAChB,SAAA;AAAA,QATK;AAAA,OAUP;AAAA,IAEJ,CAAC,CAAA;AAEH,IAAA,uBACEA,GAAAA;AAAA,MAACF,IAAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAWC,GAAG,CAAA,EAAG,MAAA,EAAQ,SAAS,CAAA,UAAA,CAAA,EAAc,SAAA,EAAW,YAAY,IAAI,CAAA;AAAA,QAC3E,OAAO,MAAA,EAAQ,IAAA;AAAA,QACd,GAAG,KAAA;AAAA,QAEH,wBAAc,KAAK;AAAA;AAAA,KACtB;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"index.mjs","sourcesContent":["import { IconButton, type IconButtonProps } from '@negative-space/button'\nimport { Flex, type FlexProps } from '@negative-space/flex'\nimport { ChevronDown, cn, useNSUI } from '@negative-space/system'\nimport React, { useEffect, useState } from 'react'\n\nexport interface FileTreeFolderProps extends Omit<\n  FlexProps,\n  'children' | 'className' | 'style' | 'prefix'\n> {\n  classNames?: {\n    root?: string\n    header?: string\n    collapseButton?: IconButtonProps['classNames']\n    prefix?: string\n    label?: string\n    suffix?: string\n    children?: string\n  }\n  styles?: {\n    root?: React.CSSProperties\n    header?: React.CSSProperties\n    collapseButton?: IconButtonProps['styles']\n    prefix?: React.CSSProperties\n    label?: React.CSSProperties\n    suffix?: React.CSSProperties\n    children?: React.CSSProperties\n  }\n  prefix?: React.ReactNode\n  label?: React.ReactNode\n  suffix?: React.ReactNode\n  children?: React.ReactNode\n  collapsable?: boolean\n  collapsed?: boolean\n  setCollapsed?: (collapsed: boolean) => void\n  active?: boolean\n}\n\nexport const FileTreeFolder = React.forwardRef<HTMLDivElement, FileTreeFolderProps>(\n  (\n    {\n      classNames,\n      styles,\n      collapsable = true,\n      collapsed = true,\n      setCollapsed: setCollapsedProp,\n      prefix,\n      label,\n      suffix,\n      active,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { global } = useNSUI()\n    const [collapsedState, setCollapsedState] = useState(collapsed)\n\n    useEffect(() => {\n      setCollapsedState(collapsed)\n    }, [collapsed])\n\n    const isCollapsed = setCollapsedProp ? collapsed : collapsedState\n\n    const handleCollapse = () => {\n      const nextCollapsed = !isCollapsed\n\n      setCollapsedState(nextCollapsed)\n      setCollapsedProp?.(nextCollapsed)\n    }\n\n    return (\n      <Flex\n        ref={ref}\n        direction=\"column\"\n        className={cn(`${global?.prefixCls}-file-tree-folder`, classNames?.root)}\n        data-active={active}\n        style={styles?.root}\n        {...props}\n      >\n        <Flex\n          className={cn(`${global?.prefixCls}-file-tree-folder-header`, classNames?.header)}\n          data-active={active}\n          data-collapsed={isCollapsed}\n          style={styles?.header}\n        >\n          {collapsable && (\n            <IconButton\n              classNames={classNames?.collapseButton}\n              data-collapsed={isCollapsed}\n              styles={styles?.collapseButton}\n              onClick={handleCollapse}\n            >\n              <ChevronDown\n                style={{\n                  transform: isCollapsed ? 'rotate(-90deg)' : '',\n                  ...styles?.collapseButton?.icon\n                }}\n              />\n            </IconButton>\n          )}\n\n          {prefix && (\n            <div\n              className={cn(`${global?.prefixCls}-file-tree-folder-prefix`, classNames?.prefix)}\n              style={styles?.prefix}\n            >\n              {prefix}\n            </div>\n          )}\n\n          <div\n            className={cn(`${global?.prefixCls}-file-tree-folder-label`, classNames?.label)}\n            style={styles?.label}\n          >\n            {label}\n          </div>\n\n          {suffix && (\n            <div\n              className={cn(`${global?.prefixCls}-file-tree-folder-suffix`, classNames?.suffix)}\n              style={styles?.suffix}\n            >\n              {suffix}\n            </div>\n          )}\n        </Flex>\n\n        {!isCollapsed && (\n          <div\n            className={cn(`${global?.prefixCls}-file-tree-folder-children`, classNames?.children)}\n            style={styles?.children}\n          >\n            {children}\n          </div>\n        )}\n      </Flex>\n    )\n  }\n)\n\nFileTreeFolder.displayName = 'FileTreeFolder'\n","import { Flex, type FlexProps } from '@negative-space/flex'\nimport { cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nexport interface FileTreeItemProps extends Omit<\n  FlexProps,\n  'children' | 'className' | 'style' | 'prefix'\n> {\n  classNames?: {\n    root?: string\n    prefix?: string\n    label?: string\n    suffix?: string\n  }\n  styles?: {\n    root?: React.CSSProperties\n    prefix?: React.CSSProperties\n    label?: React.CSSProperties\n    suffix?: React.CSSProperties\n  }\n  prefix?: React.ReactNode\n  label?: React.ReactNode\n  suffix?: React.ReactNode\n  active?: boolean\n}\n\nexport const FileTreeItem = React.forwardRef<HTMLDivElement, FileTreeItemProps>(\n  ({ classNames, styles, prefix, label, suffix, active, ...props }, ref) => {\n    const { global } = useNSUI()\n\n    return (\n      <Flex\n        ref={ref}\n        className={cn(`${global?.prefixCls}-file-tree-item`, classNames?.root)}\n        data-active={active}\n        style={styles?.root}\n        {...props}\n      >\n        {prefix && (\n          <div\n            className={cn(`${global?.prefixCls}-file-tree-item-prefix`, classNames?.prefix)}\n            style={styles?.prefix}\n          >\n            {prefix}\n          </div>\n        )}\n\n        <div\n          className={cn(`${global?.prefixCls}-file-tree-item-label`, classNames?.label)}\n          style={styles?.label}\n        >\n          {label}\n        </div>\n\n        {suffix && (\n          <div\n            className={cn(`${global?.prefixCls}-file-tree-item-suffix`, classNames?.suffix)}\n            style={styles?.suffix}\n          >\n            {suffix}\n          </div>\n        )}\n      </Flex>\n    )\n  }\n)\n\nFileTreeItem.displayName = 'FileTreeItem'\n","import { Flex, type FlexProps } from '@negative-space/flex'\nimport { cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { FileTreeFolder, type FileTreeFolderProps } from './FileTreeFolder'\nimport { FileTreeItem, type FileTreeItemProps } from './FileTreeItem'\n\nexport type FileTreeEntry =\n  | {\n      folder: Omit<FileTreeFolderProps, 'children'>\n      items?: FileTreeEntry[]\n      item?: never\n    }\n  | {\n      item: FileTreeItemProps\n      folder?: never\n      items?: never\n    }\n\nexport interface FileTreeProps extends Omit<FlexProps, 'children'> {\n  classNames?: {\n    root?: string\n    folders?: FileTreeFolderProps['classNames']\n    items?: FileTreeItemProps['classNames']\n  }\n  styles?: {\n    root?: React.CSSProperties\n    folders?: FileTreeFolderProps['styles']\n    items?: FileTreeItemProps['styles']\n  }\n  items?: FileTreeEntry[]\n}\n\nexport const FileTree = React.forwardRef<HTMLDivElement, FileTreeProps>(\n  ({ className, classNames, styles, items = [], ...props }, ref) => {\n    const { global } = useNSUI()\n\n    const renderEntries = (entries: FileTreeEntry[]) =>\n      entries.map((entry, index) => {\n        if (entry.folder) {\n          return (\n            <FileTreeFolder\n              key={index}\n              {...entry.folder}\n              classNames={{\n                ...classNames?.folders,\n                ...entry.folder.classNames\n              }}\n              styles={{\n                ...styles?.folders,\n                ...entry.folder.styles\n              }}\n            >\n              {entry.items && renderEntries(entry.items)}\n            </FileTreeFolder>\n          )\n        }\n\n        return (\n          <FileTreeItem\n            key={index}\n            {...entry.item}\n            classNames={{\n              ...classNames?.items,\n              ...entry.item.classNames\n            }}\n            styles={{\n              ...styles?.items,\n              ...entry.item.styles\n            }}\n          />\n        )\n      })\n\n    return (\n      <Flex\n        ref={ref}\n        direction=\"column\"\n        className={cn(`${global?.prefixCls}-file-tree`, className, classNames?.root)}\n        style={styles?.root}\n        {...props}\n      >\n        {renderEntries(items)}\n      </Flex>\n    )\n  }\n)\n\nFileTree.displayName = 'FileTree'\n"]}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@negative-space/file-tree",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "A lightweight and flexible file tree component for React",
+  "keywords": [
+    "components",
+    "file-tree",
+    "navigation",
+    "negative-space",
+    "nsui",
+    "react",
+    "ui"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/negative-space-ui/nsui",
+    "directory": "packages/ui/file-tree"
+  },
+  "bugs": {
+    "url": "https://github.com/negative-space-ui/nsui/issues"
+  },
+  "dependencies": {
+    "@negative-space/button": "2.9.3",
+    "@negative-space/flex": "1.3.2",
+    "@negative-space/system": "1.5.2"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3"
+  },
+  "clean-package": "../../../../clean-package.config.json",
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf dist .turbo dist"
+  }
+}