@forthtilliath/forth-ui 0.2.0

package/dist/components/spinner/variants.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+export const spinnerSizeVariants = cva("shrink-0", {
+    variants: {
+        size: {
+            sm: "size-4",
+            default: "size-5",
+            lg: "size-6",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});

package/dist/components/stepper/index.d.ts

@@ -0,0 +1,3 @@
+export type { StepperProps, StepperStep } from "./stepper";
+export { Stepper } from "./stepper";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/stepper/index.js

@@ -0,0 +1 @@
+export { Stepper } from "./stepper";

package/dist/components/stepper/stepper.d.ts

@@ -0,0 +1,26 @@
+import type React from "react";
+export interface StepperStep {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+}
+export interface StepperProps {
+    steps: StepperStep[];
+    /** The current step, 0-indexed. Steps before it are complete. */
+    value: number;
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+/**
+ * A numbered sequence of steps for a multi-stage flow (checkout, onboarding,
+ * setup wizards), showing completed/current/upcoming state.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://originui.com/stepper
+ * @see https://ktui.io/docs/stepper
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Stepper({ steps, value, orientation, className, }: StepperProps): React.JSX.Element;
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/stepper/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,WAA0B,EAC1B,SAAS,GACV,EAAE,YAAY,qBAkFd"}

package/dist/components/stepper/stepper.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A numbered sequence of steps for a multi-stage flow (checkout, onboarding,
+ * setup wizards), showing completed/current/upcoming state.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://originui.com/stepper
+ * @see https://ktui.io/docs/stepper
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Stepper({ steps, value, orientation = "horizontal", className, }) {
+    return (_jsx("ol", { "data-slot": "stepper", className: cn("flex", orientation === "horizontal" ? "w-full flex-row" : "flex-col", className), children: steps.map((step, index) => {
+            const isComplete = index < value;
+            const isCurrent = index === value;
+            const isLast = index === steps.length - 1;
+            return (_jsxs("li", { className: cn("flex", orientation === "horizontal"
+                    ? "flex-1 flex-col items-center"
+                    : "flex-row gap-3", !isLast && orientation === "horizontal" && "relative"), children: [_jsxs("div", { className: cn("flex items-center", orientation === "horizontal" ? "w-full" : "flex-col"), children: [_jsx("span", { "data-state": isComplete ? "complete" : isCurrent ? "current" : "upcoming", className: cn("border-input text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium", "data-[state=complete]:bg-primary data-[state=complete]:border-primary data-[state=complete]:text-primary-foreground", "data-[state=current]:border-primary data-[state=current]:text-primary"), children: isComplete ? _jsx(CheckIcon, { className: "size-4" }) : index + 1 }), !isLast && (_jsx("span", { "aria-hidden": "true", "data-state": isComplete ? "complete" : "upcoming", className: cn("bg-border data-[state=complete]:bg-primary shrink-0", orientation === "horizontal"
+                                    ? "mx-2 h-px flex-1"
+                                    : "my-1 ml-4 h-6 w-px") }))] }), _jsxs("div", { className: cn(orientation === "horizontal" ? "mt-2 text-center" : "pb-6"), children: [_jsx("p", { className: cn("text-sm font-medium", isCurrent ? "text-foreground" : "text-muted-foreground"), children: step.label }), step.description !== undefined && (_jsx("p", { className: "text-muted-foreground text-xs", children: step.description }))] })] }, index));
+        }) }));
+}

package/dist/components/submit-button/index.d.ts

@@ -0,0 +1,3 @@
+export type { SubmitButtonProps } from "./submit-button";
+export { SubmitButton } from "./submit-button";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/submit-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/submit-button/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/submit-button/index.js

@@ -0,0 +1 @@
+export { SubmitButton } from "./submit-button";

package/dist/components/submit-button/submit-button.d.ts

@@ -0,0 +1,19 @@
+import type { ButtonProps } from "../button";
+export type SubmitButtonProps = Omit<ButtonProps, "type" | "loading">;
+/**
+ * A submit `Button` that shows its own loading state automatically while
+ * its parent `<form>` is submitting — via React's `useFormStatus`, so no
+ * manual pending-state prop drilling is needed (unlike `Button`'s own
+ * `loading`, which the caller controls explicitly).
+ *
+ * Must be rendered as a descendant of a `<form>` — `useFormStatus` reads
+ * that nearest parent form's pending state.
+ *
+ * @see https://shuip.xyz/components/submit-button
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function SubmitButton(props: SubmitButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=submit-button.d.ts.map

package/dist/components/submit-button/submit-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"submit-button.d.ts","sourceRoot":"","sources":["../../../src/components/submit-button/submit-button.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAGpD"}

package/dist/components/submit-button/submit-button.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormStatus } from "react-dom";
+import { Button } from "../button";
+/**
+ * A submit `Button` that shows its own loading state automatically while
+ * its parent `<form>` is submitting — via React's `useFormStatus`, so no
+ * manual pending-state prop drilling is needed (unlike `Button`'s own
+ * `loading`, which the caller controls explicitly).
+ *
+ * Must be rendered as a descendant of a `<form>` — `useFormStatus` reads
+ * that nearest parent form's pending state.
+ *
+ * @see https://shuip.xyz/components/submit-button
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function SubmitButton(props) {
+    const { pending } = useFormStatus();
+    return _jsx(Button, { type: "submit", loading: pending, ...props });
+}

package/dist/components/tags-input/index.d.ts

@@ -0,0 +1,3 @@
+export type { TagsInputProps } from "./tags-input";
+export { TagsInput } from "./tags-input";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tags-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tags-input/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/tags-input/index.js

@@ -0,0 +1 @@
+export { TagsInput } from "./tags-input";

package/dist/components/tags-input/tags-input.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface TagsInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Maximum number of tags allowed. */
+    max?: number;
+    className?: string;
+}
+/**
+ * A flexible input for adding/removing multiple tags — `Enter`/`,` commits
+ * the current text as a tag, `Backspace` on an empty input removes the
+ * last one. Renders tags as forth-ui's own dismissible `Badge`.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.hextaui.com/docs/ui/components/tag-input
+ * @see https://www.kibo-ui.com/components/tags
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function TagsInput({ value, defaultValue, onValueChange, placeholder, disabled, max, className, }: TagsInputProps): React.JSX.Element;
+//# sourceMappingURL=tags-input.d.ts.map

package/dist/components/tags-input/tags-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../../../src/components/tags-input/tags-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAwB,EACxB,QAAgB,EAChB,GAAG,EACH,SAAS,GACV,EAAE,cAAc,qBA+EhB"}

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Badge } from "../badge";
+/**
+ * A flexible input for adding/removing multiple tags — `Enter`/`,` commits
+ * the current text as a tag, `Backspace` on an empty input removes the
+ * last one. Renders tags as forth-ui's own dismissible `Badge`.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.hextaui.com/docs/ui/components/tag-input
+ * @see https://www.kibo-ui.com/components/tags
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function TagsInput({ value, defaultValue, onValueChange, placeholder = "Add tag…", disabled = false, max, className, }) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? []);
+    const [inputValue, setInputValue] = React.useState("");
+    const tags = value ?? uncontrolledValue;
+    function update(next) {
+        setUncontrolledValue(next);
+        onValueChange?.(next);
+    }
+    function addTag(tag) {
+        const trimmed = tag.trim();
+        if (trimmed.length === 0 || tags.includes(trimmed)) {
+            return;
+        }
+        if (max !== undefined && tags.length >= max) {
+            return;
+        }
+        update([...tags, trimmed]);
+        setInputValue("");
+    }
+    function removeTag(tag) {
+        update(tags.filter((t) => t !== tag));
+    }
+    function handleKeyDown(e) {
+        if (e.key === "Enter" || e.key === ",") {
+            e.preventDefault();
+            addTag(inputValue);
+            return;
+        }
+        if (e.key === "Backspace" && inputValue.length === 0) {
+            const lastTag = tags.at(-1);
+            if (lastTag !== undefined) {
+                removeTag(lastTag);
+            }
+        }
+    }
+    return (_jsxs("div", { "data-slot": "tags-input", className: cn("border-input focus-within:border-ring focus-within:ring-ring/50 flex min-h-9 w-full flex-wrap items-center gap-1.5 rounded-md border bg-transparent px-3 py-1.5 shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]", disabled && "pointer-events-none cursor-not-allowed opacity-50", className), children: [tags.map((tag) => (_jsx(Badge, { variant: "secondary", dismissible: true, open: true, onOpenChange: () => {
+                    removeTag(tag);
+                }, children: tag }, tag))), _jsx("input", { value: inputValue, onChange: (e) => {
+                    setInputValue(e.target.value);
+                }, onKeyDown: handleKeyDown, onBlur: () => {
+                    addTag(inputValue);
+                }, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, className: "placeholder:text-muted-foreground min-w-24 flex-1 bg-transparent text-sm outline-none disabled:cursor-not-allowed" })] }));
+}

package/dist/components/timeline/index.d.ts

@@ -0,0 +1,3 @@
+export type { TimelineItemData, TimelineProps } from "./timeline";
+export { Timeline } from "./timeline";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/timeline/index.js

@@ -0,0 +1 @@
+export { Timeline } from "./timeline";

package/dist/components/timeline/timeline.d.ts

@@ -0,0 +1,24 @@
+import type React from "react";
+export interface TimelineItemData {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    date?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export interface TimelineProps {
+    items: TimelineItemData[];
+    className?: string;
+}
+/**
+ * A vertical sequence of dated events, connected by a line.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://originui.com/timeline
+ * @see https://ui.aceternity.com/components/timeline
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Timeline({ items, className }: TimelineProps): React.JSX.Element;
+//# sourceMappingURL=timeline.d.ts.map

package/dist/components/timeline/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,aAAa,qBAiC3D"}

package/dist/components/timeline/timeline.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A vertical sequence of dated events, connected by a line.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://originui.com/timeline
+ * @see https://ui.aceternity.com/components/timeline
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Timeline({ items, className }) {
+    return (_jsx("ol", { "data-slot": "timeline", className: cn("grid", className), children: items.map((item, index) => {
+            const isLast = index === items.length - 1;
+            return (
+            // eslint-disable-next-line @eslint-react/no-array-index-key -- `title` is an arbitrary ReactNode with no guaranteed unique field
+            _jsxs("li", { className: "grid grid-cols-[2rem_1fr] gap-x-3", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("span", { className: "border-primary bg-background text-primary flex size-8 shrink-0 items-center justify-center rounded-full border [&>svg]:size-4", children: item.icon }), !isLast && (_jsx("span", { "aria-hidden": "true", className: "bg-border w-px flex-1" }))] }), _jsxs("div", { className: cn("grid gap-1", !isLast && "pb-6"), children: [item.date !== undefined && (_jsx("p", { className: "text-muted-foreground text-xs", children: item.date })), _jsx("p", { className: "text-sm font-medium", children: item.title }), item.description !== undefined && (_jsx("p", { className: "text-muted-foreground text-sm", children: item.description }))] })] }, index));
+        }) }));
+}

package/dist/components/tree/index.d.ts

@@ -0,0 +1,3 @@
+export type { TreeNode, TreeProps } from "./tree";
+export { Tree } from "./tree";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tree/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/tree/index.js

@@ -0,0 +1 @@
+export { Tree } from "./tree";

package/dist/components/tree/tree.d.ts

@@ -0,0 +1,26 @@
+import type React from "react";
+export interface TreeNode {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    children?: TreeNode[];
+}
+export interface TreeProps {
+    data: TreeNode[];
+    defaultExpanded?: boolean;
+    className?: string;
+}
+/**
+ * A hierarchical, expandable/collapsible list of nodes (file explorer,
+ * nested categories) — built on forth-ui's own `Collapsible` for each
+ * branch's expand animation rather than reimplementing it.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://originui.com/tree
+ * @see https://www.hextaui.com/docs/ui/components/tree
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Tree({ data, defaultExpanded, className }: TreeProps): React.JSX.Element;
+//# sourceMappingURL=tree.d.ts.map

package/dist/components/tree/tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/components/tree/tree.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,eAAuB,EAAE,SAAS,EAAE,EAAE,SAAS,qBAS3E"}

package/dist/components/tree/tree.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../collapsible";
+/**
+ * A hierarchical, expandable/collapsible list of nodes (file explorer,
+ * nested categories) — built on forth-ui's own `Collapsible` for each
+ * branch's expand animation rather than reimplementing it.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://originui.com/tree
+ * @see https://www.hextaui.com/docs/ui/components/tree
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Tree({ data, defaultExpanded = false, className }) {
+    return (_jsx("ul", { "data-slot": "tree", className: cn("grid gap-0.5 text-sm", className), children: data.map((node, index) => (
+        // eslint-disable-next-line @eslint-react/no-array-index-key -- `label` is an arbitrary ReactNode with no guaranteed unique field
+        _jsx(TreeItem, { node: node, defaultExpanded: defaultExpanded }, index))) }));
+}
+function TreeItem({ node, defaultExpanded, }) {
+    const hasChildren = node.children !== undefined && node.children.length > 0;
+    if (!hasChildren) {
+        return (_jsxs("li", { className: "hover:bg-accent flex items-center gap-1.5 rounded-md px-2 py-1 pl-7", children: [node.icon ?? _jsx(FileIcon, { className: "text-muted-foreground size-4" }), node.label] }));
+    }
+    return (_jsx("li", { children: _jsxs(Collapsible, { defaultOpen: defaultExpanded, children: [_jsxs(CollapsibleTrigger, { hideChevron: true, className: "hover:bg-accent flex w-full items-center gap-1.5 rounded-md px-2 py-1 [&>svg:first-child]:transition-transform [&[data-state=open]>svg:first-child]:rotate-90", children: [_jsx(ChevronRightIcon, { className: "size-4 shrink-0" }), node.icon ?? _jsx(FolderIcon, { className: "text-muted-foreground size-4" }), node.label] }), _jsx(CollapsibleContent, { className: "pl-4", children: _jsx("ul", { className: "grid gap-0.5", children: node.children?.map((child, index) => (_jsx(TreeItem
+                        // eslint-disable-next-line @eslint-react/no-array-index-key -- see above
+                        , { node: child, defaultExpanded: defaultExpanded }, index))) }) })] }) }));
+}