@wallarm-org/design-system 0.67.2 → 0.68.0

package/dist/components/InputGroup/InputGroupAddon.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps, FC } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-end" | "inline-start" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-end" | null | undefined;
     variant?: "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const InputGroupAddon: FC<ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>>;

package/dist/components/InputGroup/InputGroupAddon.js

@@ -17,7 +17,8 @@ const inputGroupAddonVariants = cva(cn([
     variants: {
         align: {
             'inline-start': 'order-first pl-12 has-[>kbd]:pl-8',
-            'inline-end': 'order-last pr-12 has-[>kbd]:pr-8'
+            'inline-end': 'order-last pr-12 has-[>kbd]:pr-8',
+            'block-end': 'order-last w-full px-8 pb-8 h-auto justify-start'
         },
         variant: {
             outline: 'px-12 bg-states-primary-default-alt border-border-primary',
@@ -54,7 +55,7 @@ const InputGroupAddon = ({ align = 'inline-start', variant = 'ghost', ...props }
     const testId = useTestId('addon');
     const handleClick = (event)=>{
         if (event.target.closest('button')) return;
-        event.currentTarget.parentElement?.querySelector('input')?.focus();
+        event.currentTarget.parentElement?.querySelector('input, textarea')?.focus();
     };
     return /*#__PURE__*/ jsx("div", {
         ...props,

package/dist/components/NavPanel/NavPanelContext.d.ts

@@ -9,4 +9,12 @@ interface NavPanelInternalContextValue {
 }
 export declare const NavPanelInternalProvider: import("react").Provider<NavPanelInternalContextValue | null>;
 export declare function useNavPanelInternalContext(): NavPanelInternalContextValue;
-export {};
+declare const NAV_PANEL_BASE_PADDING = 8;
+interface NavPanelDepthContextValue {
+    depth: number;
+    indent: number;
+}
+export declare const NavPanelDepthProvider: import("react").Provider<NavPanelDepthContextValue>;
+export declare function useNavPanelDepth(): number;
+export declare function useNavPanelIndent(): number;
+export { NAV_PANEL_BASE_PADDING };

package/dist/components/NavPanel/NavPanelContext.js

@@ -6,4 +6,17 @@ function useNavPanelInternalContext() {
     if (!ctx) throw new Error('useNavPanelInternalContext must be used within NavPanelInternalProvider');
     return ctx;
 }
-export { NavPanelInternalProvider, useNavPanelInternalContext };
+const NAV_PANEL_BASE_PADDING = 8;
+const NAV_PANEL_DEFAULT_INDENT = 24;
+const NavPanelDepthContext = /*#__PURE__*/ createContext({
+    depth: 0,
+    indent: NAV_PANEL_DEFAULT_INDENT
+});
+const NavPanelDepthProvider = NavPanelDepthContext.Provider;
+function useNavPanelDepth() {
+    return useContext(NavPanelDepthContext).depth;
+}
+function useNavPanelIndent() {
+    return useContext(NavPanelDepthContext).indent;
+}
+export { NAV_PANEL_BASE_PADDING, NavPanelDepthProvider, NavPanelInternalProvider, useNavPanelDepth, useNavPanelIndent, useNavPanelInternalContext };

package/dist/components/NavPanel/NavPanelGroup.d.ts

@@ -5,9 +5,6 @@ interface NavPanelGroupContextValue {
     contentId: string;
 }
 export declare function useNavPanelGroupContext(): NavPanelGroupContextValue;
-declare const NavPanelDepthContext: import("react").Context<number>;
-export declare function useNavPanelDepth(): number;
-export { NavPanelDepthContext };
 export interface NavPanelGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     ref?: Ref<HTMLDivElement>;
     expanded?: boolean;
@@ -16,3 +13,4 @@ export interface NavPanelGroupProps extends Omit<HTMLAttributes<HTMLDivElement>,
     children: ReactNode;
 }
 export declare const NavPanelGroup: FC<NavPanelGroupProps>;
+export {};

package/dist/components/NavPanel/NavPanelGroup.js

@@ -10,10 +10,6 @@ const NavPanelGroupContext = /*#__PURE__*/ createContext({
 function useNavPanelGroupContext() {
     return useContext(NavPanelGroupContext);
 }
-const NavPanelDepthContext = /*#__PURE__*/ createContext(0);
-function useNavPanelDepth() {
-    return useContext(NavPanelDepthContext);
-}
 const NavPanelGroup = ({ ref, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, className, children, ...props })=>{
     const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
     const isControlled = void 0 !== controlledExpanded;
@@ -46,4 +42,4 @@ const NavPanelGroup = ({ ref, expanded: controlledExpanded, defaultExpanded = fa
     });
 };
 NavPanelGroup.displayName = 'NavPanelGroup';
-export { NavPanelDepthContext, NavPanelGroup, useNavPanelDepth, useNavPanelGroupContext };
+export { NavPanelGroup, useNavPanelGroupContext };

package/dist/components/NavPanel/NavPanelGroupContent.d.ts

@@ -1,4 +1,4 @@
-import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
 export interface NavPanelGroupContentProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
     children?: ReactNode;

package/dist/components/NavPanel/NavPanelGroupContent.js

@@ -1,35 +1,37 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
 import { cn } from "../../utils/cn.js";
-import { NavPanelDepthContext, useNavPanelDepth, useNavPanelGroupContext } from "./NavPanelGroup.js";
+import { NAV_PANEL_BASE_PADDING, NavPanelDepthProvider, useNavPanelDepth, useNavPanelIndent } from "./NavPanelContext.js";
+import { useNavPanelGroupContext } from "./NavPanelGroup.js";
 const NavPanelGroupContent = ({ ref, className, children, ...props })=>{
     const { expanded, contentId } = useNavPanelGroupContext();
     const parentDepth = useNavPanelDepth();
+    const indent = useNavPanelIndent();
     const depth = parentDepth + 1;
-    const innerRef = useRef(null);
-    return /*#__PURE__*/ jsxs("div", {
+    return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         id: contentId,
         role: "group",
         "data-slot": "nav-panel-group-content",
-        className: cn('relative grid transition-[grid-template-rows] duration-150 ease-out', expanded ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr]', className),
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: "absolute top-0 bottom-0 w-px bg-border-primary-light",
-                style: {
-                    left: 16 * depth + 8 * parentDepth
-                }
-            }),
-            /*#__PURE__*/ jsx(NavPanelDepthContext.Provider, {
-                value: depth,
-                children: /*#__PURE__*/ jsx("div", {
-                    ref: innerRef,
-                    className: "flex flex-col gap-2 overflow-hidden",
+        className: cn('grid transition-[grid-template-rows] duration-150 ease-out', expanded ? 'grid-rows-[1fr] mt-2' : 'grid-rows-[0fr]', className),
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "relative flex flex-col gap-2 overflow-hidden",
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: "absolute top-0 bottom-0 w-px bg-border-primary-light",
+                    style: {
+                        left: indent * parentDepth + (indent - NAV_PANEL_BASE_PADDING)
+                    }
+                }),
+                /*#__PURE__*/ jsx(NavPanelDepthProvider, {
+                    value: {
+                        depth,
+                        indent
+                    },
                     children: children
                 })
-            })
-        ]
+            ]
+        })
     });
 };
 NavPanelGroupContent.displayName = 'NavPanelGroupContent';

package/dist/components/NavPanel/NavPanelGroupItem.js

@@ -4,10 +4,11 @@ import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { Text } from "../Text/index.js";
 import { navPanelGroupItemVariants } from "./classes.js";
-import { useNavPanelDepth } from "./NavPanelGroup.js";
+import { useNavPanelDepth, useNavPanelIndent } from "./NavPanelContext.js";
 const NavPanelGroupItem = ({ ref, asChild = false, icon: Icon, active = false, className, children, ...props })=>{
     const testId = useTestId('group-item');
     const depth = useNavPanelDepth();
+    const indent = useNavPanelIndent();
     const Comp = asChild ? Slot : 'a';
     return /*#__PURE__*/ jsxs(Comp, {
         ...props,
@@ -19,7 +20,7 @@ const NavPanelGroupItem = ({ ref, asChild = false, icon: Icon, active = false, c
             active
         }), className),
         style: {
-            paddingLeft: 8 + 24 * depth
+            paddingLeft: 8 + depth * indent
         },
         children: [
             Icon && /*#__PURE__*/ jsx("span", {

package/dist/components/NavPanel/NavPanelGroupLabel.js

@@ -3,10 +3,12 @@ import { ChevronRight } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { Text } from "../Text/index.js";
-import { useNavPanelDepth, useNavPanelGroupContext } from "./NavPanelGroup.js";
+import { useNavPanelDepth, useNavPanelIndent } from "./NavPanelContext.js";
+import { useNavPanelGroupContext } from "./NavPanelGroup.js";
 const NavPanelGroupLabel = ({ ref, icon: Icon, className, children, ...props })=>{
     const { expanded, toggle, contentId } = useNavPanelGroupContext();
     const depth = useNavPanelDepth();
+    const indent = useNavPanelIndent();
     const testId = useTestId('group-label');
     return /*#__PURE__*/ jsxs("button", {
         ...props,
@@ -18,7 +20,7 @@ const NavPanelGroupLabel = ({ ref, icon: Icon, className, children, ...props })=
         "data-testid": testId,
         onClick: toggle,
         style: {
-            paddingLeft: 8 + 24 * depth
+            paddingLeft: 8 + depth * indent
         },
         className: cn('overlay flex h-32 shrink-0 w-full cursor-pointer items-center gap-8 rounded-6 py-8 pr-8 text-sm text-text-primary opacity-64 transition-colors outline-none hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed', className),
         children: [

package/dist/components/Textarea/Textarea.d.ts

@@ -1,15 +1,15 @@
 import type { FC, Ref, TextareaHTMLAttributes } from 'react';
-import { type VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 import { inputVariants } from '../Input';
-declare const textareaVariants: (props?: ({
-    size?: "small" | "medium" | "default" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type TextareaNativeProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'>;
-type TextareaVariantsProps = VariantProps<typeof textareaVariants>;
+import { textareaPaddingVariants } from './classes';
+type TextareaNativeProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'children'>;
+type TextareaVariantsProps = VariantProps<typeof textareaPaddingVariants>;
 type InputVariantsProps = VariantProps<typeof inputVariants>;
-export type TextareaProps = TextareaNativeProps & TextareaVariantsProps & InputVariantsProps & TestableProps & {
+export interface TextareaProps extends TextareaNativeProps, TextareaVariantsProps, InputVariantsProps, TestableProps {
     ref?: Ref<HTMLTextAreaElement>;
-};
+    minRows?: number;
+    maxRows?: number;
+}
 export declare const Textarea: FC<TextareaProps>;
 export {};

package/dist/components/Textarea/Textarea.js

@@ -1,38 +1,45 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFieldContext } from "@ark-ui/react/field";
 import { mergeProps } from "@ark-ui/react/utils";
-import { cva } from "class-variance-authority";
+import { composeRefs } from "@radix-ui/react-compose-refs";
 import { SvgIcon } from "../../icons/SvgIcon.js";
 import { cn } from "../../utils/cn.js";
 import { inputVariants } from "../Input/index.js";
-const textareaVariants = cva('min-h-[60px]', {
-    variants: {
-        size: {
-            small: 'py-0 min-h-[60px]',
-            medium: 'py-6 min-h-[72px]',
-            default: 'py-8 min-h-[76px]'
-        }
-    }
-});
-const Textarea = ({ error = false, disabled = false, size = 'default', ...props })=>{
+import { textareaHeightVariants, textareaPaddingVariants } from "./classes.js";
+import { useAutoResize } from "./useAutoResize.js";
+const Textarea = ({ error = false, disabled = false, size = 'default', minRows, maxRows, ref, ...props })=>{
     const field = useFieldContext();
     const mergedProps = mergeProps(field?.getTextareaProps());
+    const autoResize = null != maxRows;
+    const effectiveMinRows = minRows ?? (autoResize ? 1 : void 0);
+    const { ref: autoResizeRef, adjustHeight } = useAutoResize(autoResize, effectiveMinRows ?? 1, maxRows ?? 1, props.value);
     return /*#__PURE__*/ jsxs("div", {
         className: "relative",
+        "data-slot": "textarea",
         children: [
             /*#__PURE__*/ jsx("textarea", {
                 ...mergedProps,
                 ...props,
+                ref: composeRefs(autoResizeRef, ref),
+                disabled: disabled,
+                "aria-invalid": Boolean(error),
+                "aria-disabled": disabled,
+                rows: effectiveMinRows,
+                ...autoResize && {
+                    onInput: (e)=>{
+                        adjustHeight();
+                        props.onInput?.(e);
+                    }
+                },
                 className: cn(inputVariants({
                     error
-                }), textareaVariants({
+                }), textareaPaddingVariants({
                     size
-                })),
-                disabled: disabled,
-                "aria-invalid": Boolean(error),
-                "aria-disabled": disabled
+                }), '[scrollbar-width:thin]', !autoResize && textareaHeightVariants({
+                    size
+                }), autoResize && 'resize-none')
             }),
-            /*#__PURE__*/ jsx(SvgIcon, {
+            !autoResize && /*#__PURE__*/ jsx(SvgIcon, {
                 className: "w-12 h-12 absolute bottom-0 right-0 text-icon-secondary pointer-events-none",
                 viewBox: "0 0 12 12",
                 children: /*#__PURE__*/ jsx("path", {

package/dist/components/Textarea/classes.d.ts

@@ -0,0 +1,6 @@
+export declare const textareaPaddingVariants: (props?: ({
+    size?: "small" | "medium" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const textareaHeightVariants: (props?: ({
+    size?: "small" | "medium" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Textarea/classes.js

@@ -0,0 +1,20 @@
+import { cva } from "class-variance-authority";
+const textareaPaddingVariants = cva('', {
+    variants: {
+        size: {
+            small: 'py-0',
+            medium: 'py-6',
+            default: 'py-8'
+        }
+    }
+});
+const textareaHeightVariants = cva('min-h-[60px]', {
+    variants: {
+        size: {
+            small: 'min-h-[60px]',
+            medium: 'min-h-[72px]',
+            default: 'min-h-[76px]'
+        }
+    }
+});
+export { textareaHeightVariants, textareaPaddingVariants };

package/dist/components/Textarea/useAutoResize.d.ts

@@ -0,0 +1,4 @@
+export declare function useAutoResize(enabled: boolean, minRows: number, maxRows: number, value?: string | number | readonly string[]): {
+    ref: import("react").RefObject<HTMLTextAreaElement | null>;
+    adjustHeight: () => void;
+};

package/dist/components/Textarea/useAutoResize.js

@@ -0,0 +1,34 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+function adjustTextareaHeight(textarea, minRows, maxRows) {
+    const style = window.getComputedStyle(textarea);
+    const lineHeight = Number.parseInt(style.lineHeight, 10) || 20;
+    const paddingY = (Number.parseInt(style.paddingTop, 10) || 0) + (Number.parseInt(style.paddingBottom, 10) || 0);
+    const minHeight = lineHeight * minRows + paddingY;
+    const maxHeight = lineHeight * maxRows + paddingY;
+    textarea.style.height = '0';
+    const scrollHeight = textarea.scrollHeight;
+    textarea.style.height = `${Math.min(Math.max(scrollHeight, minHeight), maxHeight)}px`;
+    textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
+}
+function useAutoResize(enabled, minRows, maxRows, value) {
+    const ref = useRef(null);
+    const adjustHeight = useCallback(()=>{
+        if (!enabled || !ref.current) return;
+        adjustTextareaHeight(ref.current, minRows, maxRows);
+    }, [
+        enabled,
+        minRows,
+        maxRows
+    ]);
+    useLayoutEffect(()=>{
+        adjustHeight();
+    }, [
+        adjustHeight,
+        value
+    ]);
+    return {
+        ref,
+        adjustHeight
+    };
+}
+export { useAutoResize };

package/dist/components/Tree/Tree.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface TreeProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    indent?: number;
+    gap?: number;
+}
+export declare const Tree: FC<TreeProps>;

package/dist/components/Tree/Tree.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { TREE_BASE_PADDING, TreeDepthProvider, useTreeDepth, useTreeGap, useTreeIndent } from "./TreeContext.js";
+const Tree = ({ ref, children, indent, gap, 'data-testid': testId, className, style, ...props })=>{
+    const parentDepth = useTreeDepth();
+    const parentIndent = useTreeIndent();
+    const parentGap = useTreeGap();
+    const isRoot = 0 === parentDepth;
+    const resolvedIndent = indent ?? parentIndent;
+    const resolvedGap = gap ?? parentGap;
+    const depth = isRoot ? 0 : parentDepth;
+    const lineLeft = isRoot ? resolvedIndent - TREE_BASE_PADDING : resolvedIndent - 2 * TREE_BASE_PADDING;
+    const content = /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-slot": "tree",
+        "data-testid": testId,
+        className: cn('relative flex flex-col', className),
+        style: {
+            gap: resolvedGap,
+            ...style
+        },
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "absolute top-0 bottom-0 w-px bg-border-primary-light",
+                style: {
+                    left: lineLeft
+                }
+            }),
+            /*#__PURE__*/ jsx(TreeDepthProvider, {
+                value: {
+                    depth: depth + 1,
+                    indent: resolvedIndent,
+                    gap: resolvedGap
+                },
+                children: children
+            })
+        ]
+    });
+    if (void 0 !== testId) return /*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: content
+    });
+    return content;
+};
+Tree.displayName = 'Tree';
+export { Tree };

package/dist/components/Tree/TreeContext.d.ts

@@ -0,0 +1,11 @@
+declare const TREE_BASE_PADDING = 8;
+interface TreeDepthContextValue {
+    depth: number;
+    indent: number;
+    gap: number | undefined;
+}
+export declare const TreeDepthProvider: import("react").Provider<TreeDepthContextValue>;
+export declare function useTreeDepth(): number;
+export declare function useTreeIndent(): number;
+export declare function useTreeGap(): number | undefined;
+export { TREE_BASE_PADDING };

package/dist/components/Tree/TreeContext.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+const TREE_BASE_PADDING = 8;
+const TREE_DEFAULT_INDENT = 24;
+const TreeDepthContext = createContext({
+    depth: 0,
+    indent: TREE_DEFAULT_INDENT,
+    gap: void 0
+});
+const TreeDepthProvider = TreeDepthContext.Provider;
+function useTreeDepth() {
+    return useContext(TreeDepthContext).depth;
+}
+function useTreeIndent() {
+    return useContext(TreeDepthContext).indent;
+}
+function useTreeGap() {
+    return useContext(TreeDepthContext).gap;
+}
+export { TREE_BASE_PADDING, TreeDepthProvider, useTreeDepth, useTreeGap, useTreeIndent };

package/dist/components/Tree/TreeItem.d.ts

@@ -0,0 +1,10 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+export interface TreeItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    collapsible?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const TreeItem: FC<TreeItemProps>;

package/dist/components/Tree/TreeItem.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useTestId } from "../../utils/testId.js";
+import { TREE_BASE_PADDING, useTreeDepth, useTreeGap, useTreeIndent } from "./TreeContext.js";
+import { TreeItemProvider } from "./TreeItemContext.js";
+const TreeItem = ({ ref, children, collapsible = false, open: controlledOpen, defaultOpen = true, onOpenChange, style, ...props })=>{
+    const depth = useTreeDepth();
+    const indent = useTreeIndent();
+    const gap = useTreeGap();
+    const testId = useTestId('item');
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = void 0 !== controlledOpen;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const toggle = useCallback(()=>{
+        const next = !isOpen;
+        if (!isControlled) setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [
+        isOpen,
+        isControlled,
+        onOpenChange
+    ]);
+    const paddingLeft = 1 === depth ? TREE_BASE_PADDING + indent : indent;
+    const itemGap = collapsible && gap ? gap / 2 : void 0;
+    return /*#__PURE__*/ jsx(TreeItemProvider, {
+        value: {
+            collapsible,
+            open: isOpen,
+            toggle
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            "data-slot": "tree-item",
+            "data-testid": testId,
+            style: {
+                paddingLeft,
+                gap: itemGap,
+                ...style
+            },
+            ...props,
+            children: children
+        })
+    });
+};
+TreeItem.displayName = 'TreeItem';
+export { TreeItem };

package/dist/components/Tree/TreeItemContent.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface TreeItemContentProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+export declare const TreeItemContent: FC<TreeItemContentProps>;

package/dist/components/Tree/TreeItemContent.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTreeItemContext } from "./TreeItemContext.js";
+const TreeItemContent = ({ ref, children, className, ...props })=>{
+    const { collapsible, open } = useTreeItemContext();
+    if (!collapsible) return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "tree-item-content",
+        className: className,
+        ...props,
+        children: children
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "tree-item-content",
+        "data-state": open ? 'open' : 'closed',
+        className: cn('grid transition-[grid-template-rows] duration-[220ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none', open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]', className),
+        ...props,
+        children: /*#__PURE__*/ jsx("div", {
+            className: "overflow-hidden",
+            children: children
+        })
+    });
+};
+TreeItemContent.displayName = 'TreeItemContent';
+export { TreeItemContent };

package/dist/components/Tree/TreeItemContext.d.ts

@@ -0,0 +1,8 @@
+interface TreeItemContextValue {
+    collapsible: boolean;
+    open: boolean;
+    toggle: () => void;
+}
+export declare const TreeItemProvider: import("react").Provider<TreeItemContextValue>;
+export declare function useTreeItemContext(): TreeItemContextValue;
+export {};

package/dist/components/Tree/TreeItemContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+const TreeItemContext = createContext({
+    collapsible: false,
+    open: false,
+    toggle: ()=>{}
+});
+const TreeItemProvider = TreeItemContext.Provider;
+function useTreeItemContext() {
+    return useContext(TreeItemContext);
+}
+export { TreeItemProvider, useTreeItemContext };

package/dist/components/Tree/TreeItemHeader.d.ts

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface TreeItemHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    icon?: ReactNode;
+    action?: ReactNode;
+}
+export declare const TreeItemHeader: FC<TreeItemHeaderProps>;

package/dist/components/Tree/TreeItemHeader.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTreeItemContext } from "./TreeItemContext.js";
+import { TreeItemIcon } from "./TreeItemIcon.js";
+const TreeItemHeader = ({ ref, children, icon, action, className, ...props })=>{
+    const { collapsible, open, toggle } = useTreeItemContext();
+    if (collapsible) return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-slot": "tree-item-header",
+        "data-state": open ? 'open' : 'closed',
+        className: cn('group/trigger relative pt-2 pb-4 flex min-w-0 w-full items-center', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs("button", {
+                type: "button",
+                className: cn('flex min-w-0 flex-1 items-center text-left cursor-pointer', 'before:absolute before:inset-y-0 before:left-0 before:right-0'),
+                onClick: toggle,
+                children: [
+                    /*#__PURE__*/ jsx(TreeItemIcon, {
+                        icon: icon
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "min-w-0 flex-1",
+                        children: children
+                    })
+                ]
+            }),
+            action && /*#__PURE__*/ jsx("div", {
+                className: "relative ml-2 shrink-0",
+                "data-slot": "tree-item-action",
+                children: action
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-slot": "tree-item-header",
+        className: cn('group relative pt-2 pb-4 flex w-full items-start justify-between', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(TreeItemIcon, {
+                icon: icon
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "min-w-0 flex-1",
+                children: children
+            }),
+            action && /*#__PURE__*/ jsx("div", {
+                className: "ml-2 shrink-0",
+                "data-slot": "tree-item-action",
+                children: action
+            })
+        ]
+    });
+};
+TreeItemHeader.displayName = 'TreeItemHeader';
+export { TreeItemHeader };