@cognite/aura 0.3.5 → 1.46105.0

package/dist/components/ui/core/tooltip/tooltip.d.ts

@@ -1,11 +1,12 @@
-import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
-import { TooltipPopupProps, TooltipPositionerProps, Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
-declare function TooltipProvider({ delayDuration, ...props }: Omit<TooltipPrimitive.Provider.Props, 'delay'> & {
-    delayDuration?: number;
+import { type ForwardRefExoticComponent, type RefAttributes, type ReactNode } from "react";
+import type { TooltipPopupProps, TooltipPositionerProps } from "@base-ui/react/tooltip";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+declare function TooltipProvider({ delayDuration, ...props }: Omit<TooltipPrimitive.Provider.Props, "delay"> & {
+	delayDuration?: number;
 }): ReactNode;
 declare function Tooltip({ disableHoverableContent, ...props }: TooltipPrimitive.Root.Props & {
-    disableHoverableContent?: boolean;
+	disableHoverableContent?: boolean;
 }): ReactNode;
-declare const TooltipTrigger: ForwardRefExoticComponent<Omit<TooltipPrimitive.Trigger.Props<unknown>, 'ref'> & RefAttributes<HTMLButtonElement>>;
-declare const TooltipContent: ForwardRefExoticComponent<Omit<TooltipPopupProps & Pick<TooltipPositionerProps, 'align' | 'alignOffset' | 'side' | 'sideOffset'>, 'ref'> & RefAttributes<HTMLDivElement>>;
+declare const TooltipTrigger: ForwardRefExoticComponent<Omit<TooltipPrimitive.Trigger.Props<unknown>, "ref"> & RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: ForwardRefExoticComponent<Omit<TooltipPopupProps & Pick<TooltipPositionerProps, "align" | "alignOffset" | "side" | "sideOffset">, "ref"> & RefAttributes<HTMLDivElement>>;
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/components/ui/core/tooltip/tooltip.js

@@ -1,49 +1,56 @@
-import { cn as e } from "../../../../lib/utils.js";
-import { usePortalContainer as t } from "../../../../lib/portal-container-context.js";
-import { forwardRef as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Tooltip as a } from "@base-ui/react/tooltip";
-//#region libs/aura/src/components/ui/core/tooltip/tooltip.tsx
-function o({ delayDuration: e = 300, ...t }) {
-	return /* @__PURE__ */ r(a.Provider, {
-		"data-slot": "tooltip-provider",
-		delay: e,
-		...t
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { usePortalContainer } from "../../../../lib/portal-container-context.js";
+import { cn } from "../../../../lib/utils.js";
+function TooltipProvider({ delayDuration = 300, ...props }) {
+    return /*#__PURE__*/ _jsx(TooltipPrimitive.Provider, {
+        "data-slot": "tooltip-provider",
+        delay: delayDuration,
+        ...props
+    });
 }
-function s({ disableHoverableContent: e, ...t }) {
-	return /* @__PURE__ */ r(a.Root, {
-		"data-slot": "tooltip",
-		disableHoverablePopup: e,
-		...t
-	});
+function Tooltip({ disableHoverableContent, ...props }) {
+    return /*#__PURE__*/ _jsx(TooltipPrimitive.Root, {
+        "data-slot": "tooltip",
+        disableHoverablePopup: disableHoverableContent,
+        ...props
+    });
 }
-var c = n((e, t) => /* @__PURE__ */ r(a.Trigger, {
-	ref: t,
-	"data-slot": "tooltip-trigger",
-	...e
-}));
-c.displayName = "TooltipTrigger";
-var l = n(({ className: n, side: o = "top", sideOffset: s = 9, align: c = "center", alignOffset: l = 0, children: u, ...d }, f) => {
-	let p = t();
-	return /* @__PURE__ */ r(a.Portal, {
-		container: p,
-		children: /* @__PURE__ */ r(a.Positioner, {
-			align: c,
-			alignOffset: l,
-			side: o,
-			sideOffset: s,
-			className: "isolate z-50 min-w-max",
-			children: /* @__PURE__ */ i(a.Popup, {
-				ref: f,
-				"data-slot": "tooltip-content",
-				className: e("data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-raised-background text-foreground-fixed-light z-50 inline-flex min-h-9 w-fit max-w-80 items-center origin-(--transform-origin) rounded-lg px-3 py-2 text-sm font-medium leading-4.5 shadow-sm", n),
-				...d,
-				children: [u, /* @__PURE__ */ r(a.Arrow, { className: "size-2.5 -translate-y-1/2 rotate-45 rounded-xs data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-raised-background fill-raised-background z-50 data-[side=bottom]:top-1 data-[side=bottom]:-mt-0.5 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5 data-[side=top]:-mt-0.5" })]
-			})
-		})
-	});
+const TooltipTrigger = /*#__PURE__*/ forwardRef((props, ref)=>{
+    return /*#__PURE__*/ _jsx(TooltipPrimitive.Trigger, {
+        ref: ref,
+        "data-slot": "tooltip-trigger",
+        ...props
+    });
 });
-l.displayName = "TooltipContent";
-//#endregion
-export { s as Tooltip, l as TooltipContent, o as TooltipProvider, c as TooltipTrigger };
+TooltipTrigger.displayName = 'TooltipTrigger';
+const TooltipContent = /*#__PURE__*/ forwardRef(({ className, side = 'top', sideOffset = 9, align = 'center', alignOffset = 0, children, ...props }, ref)=>{
+    const container = usePortalContainer();
+    return /*#__PURE__*/ _jsx(TooltipPrimitive.Portal, {
+        container: container,
+        children: /*#__PURE__*/ _jsx(TooltipPrimitive.Positioner, {
+            align: align,
+            alignOffset: alignOffset,
+            side: side,
+            sideOffset: sideOffset,
+            className: "isolate z-50 min-w-max",
+            children: /*#__PURE__*/ _jsxs(TooltipPrimitive.Popup, {
+                ref: ref,
+                "data-slot": "tooltip-content",
+                className: cn('data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-popover-background-fixed-dark text-popover-foreground-fixed-dark z-50 inline-flex min-h-9 w-fit max-w-80 items-center origin-(--transform-origin) rounded-lg px-3 py-2 text-sm font-medium leading-4.5 shadow-sm', className),
+                ...props,
+                children: [
+                    children,
+                    /*#__PURE__*/ _jsx(TooltipPrimitive.Arrow, {
+                        className: "size-2.5 -translate-y-1/2 rotate-45 rounded-xs data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-popover-background-fixed-dark fill-popover-background-fixed-dark z-50 data-[side=bottom]:top-1 data-[side=bottom]:-mt-0.5 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5 data-[side=top]:-mt-0.5"
+                    })
+                ]
+            })
+        })
+    });
+});
+TooltipContent.displayName = 'TooltipContent';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/components/ui/core/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/tooltip/tooltip.tsx"],"sourcesContent":["import {\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type ReactNode,\n  forwardRef,\n  type ComponentRef,\n} from 'react';\n\nimport type {\n  TooltipPopupProps,\n  TooltipPositionerProps,\n} from '@base-ui/react/tooltip';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { usePortalContainer } from '../../../../lib/portal-container-context';\nimport { cn } from '../../../../lib/utils';\n\nfunction TooltipProvider({\n  delayDuration = 300,\n  ...props\n}: Omit<TooltipPrimitive.Provider.Props, 'delay'> & {\n  delayDuration?: number;\n}): ReactNode {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  disableHoverableContent,\n  ...props\n}: TooltipPrimitive.Root.Props & {\n  disableHoverableContent?: boolean;\n}): ReactNode {\n  return (\n    <TooltipPrimitive.Root\n      data-slot=\"tooltip\"\n      disableHoverablePopup={disableHoverableContent}\n      {...props}\n    />\n  );\n}\n\nconst TooltipTrigger: ForwardRefExoticComponent<\n  Omit<TooltipPrimitive.Trigger.Props<unknown>, 'ref'> &\n    RefAttributes<HTMLButtonElement>\n> = forwardRef<HTMLButtonElement, TooltipPrimitive.Trigger.Props>(\n  (props, ref) => {\n    return (\n      <TooltipPrimitive.Trigger\n        ref={ref}\n        data-slot=\"tooltip-trigger\"\n        {...props}\n      />\n    );\n  }\n);\nTooltipTrigger.displayName = 'TooltipTrigger';\n\nconst TooltipContent: ForwardRefExoticComponent<\n  Omit<\n    TooltipPopupProps &\n      Pick<\n        TooltipPositionerProps,\n        'align' | 'alignOffset' | 'side' | 'sideOffset'\n      >,\n    'ref'\n  > &\n    RefAttributes<HTMLDivElement>\n> = forwardRef<\n  ComponentRef<typeof TooltipPrimitive.Popup>,\n  TooltipPrimitive.Popup.Props &\n    Pick<\n      TooltipPrimitive.Positioner.Props,\n      'align' | 'alignOffset' | 'side' | 'sideOffset'\n    >\n>(\n  (\n    {\n      className,\n      side = 'top',\n      sideOffset = 9,\n      align = 'center',\n      alignOffset = 0,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const container = usePortalContainer();\n    return (\n      <TooltipPrimitive.Portal container={container}>\n        <TooltipPrimitive.Positioner\n          align={align}\n          alignOffset={alignOffset}\n          side={side}\n          sideOffset={sideOffset}\n          className=\"isolate z-50 min-w-max\"\n        >\n          <TooltipPrimitive.Popup\n            ref={ref}\n            data-slot=\"tooltip-content\"\n            className={cn(\n              'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-popover-background-fixed-dark text-popover-foreground-fixed-dark z-50 inline-flex min-h-9 w-fit max-w-80 items-center origin-(--transform-origin) rounded-lg px-3 py-2 text-sm font-medium leading-4.5 shadow-sm',\n              className\n            )}\n            {...props}\n          >\n            {children}\n            <TooltipPrimitive.Arrow className=\"size-2.5 -translate-y-1/2 rotate-45 rounded-xs data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-popover-background-fixed-dark fill-popover-background-fixed-dark z-50 data-[side=bottom]:top-1 data-[side=bottom]:-mt-0.5 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5 data-[side=top]:-mt-0.5\" />\n          </TooltipPrimitive.Popup>\n        </TooltipPrimitive.Positioner>\n      </TooltipPrimitive.Portal>\n    );\n  }\n);\nTooltipContent.displayName = 'TooltipContent';\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"names":["forwardRef","Tooltip","TooltipPrimitive","usePortalContainer","cn","TooltipProvider","delayDuration","props","Provider","data-slot","delay","disableHoverableContent","Root","disableHoverablePopup","TooltipTrigger","ref","Trigger","displayName","TooltipContent","className","side","sideOffset","align","alignOffset","children","container","Portal","Positioner","Popup","Arrow"],"mappings":";AAAA,SAIEA,UAAU,QAEL,QAAQ;AAMf,SAASC,WAAWC,gBAAgB,QAAQ,yBAAyB;AAErE,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,EAAE,QAAQ,2BAAwB;AAE3C,SAASC,gBAAgB,EACvBC,gBAAgB,GAAG,EACnB,GAAGC,OAGJ;IACC,qBACE,KAACL,iBAAiBM,QAAQ;QACxBC,aAAU;QACVC,OAAOJ;QACN,GAAGC,KAAK;;AAGf;AAEA,SAASN,QAAQ,EACfU,uBAAuB,EACvB,GAAGJ,OAGJ;IACC,qBACE,KAACL,iBAAiBU,IAAI;QACpBH,aAAU;QACVI,uBAAuBF;QACtB,GAAGJ,KAAK;;AAGf;AAEA,MAAMO,+BAGFd,WACF,CAACO,OAAOQ;IACN,qBACE,KAACb,iBAAiBc,OAAO;QACvBD,KAAKA;QACLN,aAAU;QACT,GAAGF,KAAK;;AAGf;AAEFO,eAAeG,WAAW,GAAG;AAE7B,MAAMC,+BAUFlB,WAQF,CACE,EACEmB,SAAS,EACTC,OAAO,KAAK,EACZC,aAAa,CAAC,EACdC,QAAQ,QAAQ,EAChBC,cAAc,CAAC,EACfC,QAAQ,EACR,GAAGjB,OACJ,EACDQ;IAEA,MAAMU,YAAYtB;IAClB,qBACE,KAACD,iBAAiBwB,MAAM;QAACD,WAAWA;kBAClC,cAAA,KAACvB,iBAAiByB,UAAU;YAC1BL,OAAOA;YACPC,aAAaA;YACbH,MAAMA;YACNC,YAAYA;YACZF,WAAU;sBAEV,cAAA,MAACjB,iBAAiB0B,KAAK;gBACrBb,KAAKA;gBACLN,aAAU;gBACVU,WAAWf,GACT,isBACAe;gBAED,GAAGZ,KAAK;;oBAERiB;kCACD,KAACtB,iBAAiB2B,KAAK;wBAACV,WAAU;;;;;;AAK5C;AAEFD,eAAeD,WAAW,GAAG;AAE7B,SAAShB,OAAO,EAAEa,cAAc,EAAEI,cAAc,EAAEb,eAAe,GAAG"}

package/dist/components/ui/core/topbar/topbar.d.ts

@@ -1,28 +1,28 @@
-import { ForwardRefExoticComponent, RefAttributes, ComponentProps, ReactNode } from 'react';
-import { Avatar } from '../avatar/avatar';
-import { Button } from '../button/button';
-declare const Topbar: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
-declare const TopbarLeft: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
-type TopbarIconProps = Omit<ComponentProps<typeof Avatar>, 'sizes' | 'variant' | 'children'> & {
-    children: ReactNode;
+import { type ForwardRefExoticComponent, type RefAttributes, type ComponentProps, type ReactNode } from "react";
+import { Avatar } from "../avatar/avatar";
+import { Button } from "../button/button";
+declare const Topbar: ForwardRefExoticComponent<ComponentProps<"div"> & RefAttributes<HTMLDivElement>>;
+declare const TopbarLeft: ForwardRefExoticComponent<ComponentProps<"div"> & RefAttributes<HTMLDivElement>>;
+type TopbarIconProps = Omit<ComponentProps<typeof Avatar>, "sizes" | "variant" | "children"> & {
+	children: ReactNode;
 };
-declare const TopbarIcon: ForwardRefExoticComponent<Omit<TopbarIconProps, 'ref'> & RefAttributes<HTMLSpanElement>>;
-declare const TopbarBreadcrumbs: ForwardRefExoticComponent<ComponentProps<'nav'> & RefAttributes<HTMLElement>>;
-declare const TopbarMetadata: ForwardRefExoticComponent<ComponentProps<'span'> & RefAttributes<HTMLSpanElement>>;
-declare const TopbarCenter: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
-declare const TopbarRight: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
-type TopbarTheme = 'light' | 'dark';
-type TopbarThemeSwitcherProps = ComponentProps<'div'> & {
-    theme?: TopbarTheme;
-    onThemeChange?: (theme: TopbarTheme) => void;
-    availableThemes?: readonly TopbarTheme[];
-    toggleThemeLabel?: string;
-    lightModeTitle?: string;
-    darkModeTitle?: string;
-    switchThemeLabel?: string;
-    lightModeLabel?: string;
-    darkModeLabel?: string;
+declare const TopbarIcon: ForwardRefExoticComponent<Omit<TopbarIconProps, "ref"> & RefAttributes<HTMLSpanElement>>;
+declare const TopbarBreadcrumbs: ForwardRefExoticComponent<ComponentProps<"nav"> & RefAttributes<HTMLElement>>;
+declare const TopbarMetadata: ForwardRefExoticComponent<ComponentProps<"span"> & RefAttributes<HTMLSpanElement>>;
+declare const TopbarCenter: ForwardRefExoticComponent<ComponentProps<"div"> & RefAttributes<HTMLDivElement>>;
+declare const TopbarRight: ForwardRefExoticComponent<ComponentProps<"div"> & RefAttributes<HTMLDivElement>>;
+type TopbarTheme = "light" | "dark";
+type TopbarThemeSwitcherProps = ComponentProps<"div"> & {
+	theme?: TopbarTheme;
+	onThemeChange?: (theme: TopbarTheme) => void;
+	availableThemes?: readonly TopbarTheme[];
+	toggleThemeLabel?: string;
+	lightModeTitle?: string;
+	darkModeTitle?: string;
+	switchThemeLabel?: string;
+	lightModeLabel?: string;
+	darkModeLabel?: string;
 };
-declare const TopbarThemeSwitcher: ForwardRefExoticComponent<Omit<TopbarThemeSwitcherProps, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare const TopbarAction: ForwardRefExoticComponent<Omit<ComponentProps<typeof Button>, 'ref'> & RefAttributes<HTMLElement>>;
-export { Topbar, TopbarAction, TopbarBreadcrumbs, TopbarCenter, TopbarIcon, TopbarLeft, TopbarMetadata, TopbarRight, TopbarThemeSwitcher, type TopbarTheme, };
+declare const TopbarThemeSwitcher: ForwardRefExoticComponent<Omit<TopbarThemeSwitcherProps, "ref"> & RefAttributes<HTMLDivElement>>;
+declare const TopbarAction: ForwardRefExoticComponent<Omit<ComponentProps<typeof Button>, "ref"> & RefAttributes<HTMLElement>>;
+export { Topbar, TopbarAction, TopbarBreadcrumbs, TopbarCenter, TopbarIcon, TopbarLeft, TopbarMetadata, TopbarRight, TopbarThemeSwitcher, type TopbarTheme };

package/dist/components/ui/core/topbar/topbar.js

@@ -1,106 +1,161 @@
-import { cn as e } from "../../../../lib/utils.js";
-import { Button as t } from "../button/button.js";
-import { DropdownMenu as n, DropdownMenuContent as r, DropdownMenuGroup as i, DropdownMenuLabel as a, DropdownMenuRadioGroup as o, DropdownMenuRadioItem as s, DropdownMenuTrigger as c } from "../dropdown-menu/dropdown-menu.js";
-import { Avatar as l, AvatarIcon as u } from "../avatar/avatar.js";
-import { Breadcrumb as d } from "../breadcrumb/breadcrumb.js";
-import { forwardRef as f } from "react";
-import { IconMoon as p, IconSun as m } from "@tabler/icons-react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-//#region libs/aura/src/components/ui/core/topbar/topbar.tsx
-var _ = e("flex h-11 w-full items-center gap-2 rounded-t-lg border-b border-border bg-background px-3 py-2", "[&:has(>[data-slot=topbar-center])>[data-slot=topbar-right]]:flex-none"), v = f(({ className: t, role: n = "banner", ...r }, i) => /* @__PURE__ */ h("div", {
-	ref: i,
-	"data-slot": "topbar",
-	role: n,
-	className: e(_, t),
-	...r
-}));
-v.displayName = "Topbar";
-var y = f(({ className: t, ...n }, r) => /* @__PURE__ */ h("div", {
-	ref: r,
-	"data-slot": "topbar-left",
-	className: e("flex min-w-0 items-center gap-0.5", t),
-	...n
-}));
-y.displayName = "TopbarLeft";
-var b = f(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ h(l, {
-	ref: r,
-	"data-slot": "topbar-icon",
-	sizes: "xxsm",
-	variant: "fjord",
-	className: e,
-	...n,
-	children: /* @__PURE__ */ h(u, { children: t })
-}));
-b.displayName = "TopbarIcon";
-var x = f(({ className: e, ...t }, n) => /* @__PURE__ */ h(d, {
-	ref: n,
-	"data-slot": "topbar-breadcrumbs",
-	className: e,
-	...t
-}));
-x.displayName = "TopbarBreadcrumbs";
-var S = f(({ className: t, ...n }, r) => /* @__PURE__ */ h("span", {
-	ref: r,
-	"data-slot": "topbar-metadata",
-	className: e("px-2 pt-0.5 text-xs leading-3.5 tracking-tightest text-muted-foreground", t),
-	...n
-}));
-S.displayName = "TopbarMetadata";
-var C = f(({ className: t, ...n }, r) => /* @__PURE__ */ h("div", {
-	ref: r,
-	"data-slot": "topbar-center",
-	className: e("flex min-w-0 flex-1 items-center justify-center", t),
-	...n
-}));
-C.displayName = "TopbarCenter";
-var w = f(({ className: t, ...n }, r) => /* @__PURE__ */ h("div", {
-	ref: r,
-	"data-slot": "topbar-right",
-	className: e("flex min-w-0 flex-1 items-center justify-end gap-2", t),
-	...n
-}));
-w.displayName = "TopbarRight";
-var T = ["light", "dark"], E = (e) => e === "light" || e === "dark", D = f(({ className: l, theme: u = "light", onThemeChange: d, availableThemes: f = T, toggleThemeLabel: _ = "Toggle theme", lightModeTitle: v = "Light mode", darkModeTitle: y = "Dark mode", switchThemeLabel: b = "Switch Theme", lightModeLabel: x = "Light mode", darkModeLabel: S = "Dark mode", ...C }, w) => {
-	let D = f.includes("light"), O = f.includes("dark");
-	return f.length < 2 ? null : /* @__PURE__ */ h("div", {
-		ref: w,
-		"data-slot": "topbar-theme-switcher",
-		className: e("flex items-center gap-1", l),
-		...C,
-		children: /* @__PURE__ */ g(n, {
-			modal: !1,
-			children: [/* @__PURE__ */ h(c, { render: /* @__PURE__ */ h(t, {
-				variant: "ghost",
-				size: "icon-sm",
-				"aria-label": _,
-				children: u === "light" ? /* @__PURE__ */ h(m, { children: /* @__PURE__ */ h("title", { children: v }) }) : /* @__PURE__ */ h(p, { children: /* @__PURE__ */ h("title", { children: y }) })
-			}) }), /* @__PURE__ */ h(r, {
-				align: "end",
-				className: "w-40",
-				children: /* @__PURE__ */ g(i, { children: [/* @__PURE__ */ h(a, { children: b }), /* @__PURE__ */ g(o, {
-					value: u,
-					onValueChange: (e) => {
-						E(e) && d?.(e);
-					},
-					children: [D ? /* @__PURE__ */ h(s, {
-						value: "light",
-						children: x
-					}) : null, O ? /* @__PURE__ */ h(s, {
-						value: "dark",
-						children: S
-					}) : null]
-				})] })
-			})]
-		})
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import { cn } from "../../../../lib/utils.js";
+import { Avatar, AvatarIcon } from "../avatar/avatar.js";
+import { Breadcrumb } from "../breadcrumb/breadcrumb.js";
+import { Button } from "../button/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
+const TOPBAR_ROOT_CLASSES = cn('flex h-11 w-full items-center gap-2 rounded-t-lg border-b border-default bg-muted-background px-3 py-2', '[&:has(>[data-slot=topbar-center])>[data-slot=topbar-right]]:flex-none');
+const Topbar = /*#__PURE__*/ forwardRef(({ className, role = 'banner', ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        "data-slot": "topbar",
+        role: role,
+        className: cn(TOPBAR_ROOT_CLASSES, className),
+        ...props
+    });
 });
-D.displayName = "TopbarThemeSwitcher";
-var O = f(({ className: e, ...n }, r) => /* @__PURE__ */ h(t, {
-	ref: r,
-	"data-slot": "topbar-action",
-	className: e,
-	...n
-}));
-O.displayName = "TopbarAction";
-//#endregion
-export { v as Topbar, O as TopbarAction, x as TopbarBreadcrumbs, C as TopbarCenter, b as TopbarIcon, y as TopbarLeft, S as TopbarMetadata, w as TopbarRight, D as TopbarThemeSwitcher };
+Topbar.displayName = 'Topbar';
+const TopbarLeft = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        "data-slot": "topbar-left",
+        className: cn('flex min-w-0 items-center gap-0.5', className),
+        ...props
+    });
+});
+TopbarLeft.displayName = 'TopbarLeft';
+const TopbarIcon = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(Avatar, {
+        ref: ref,
+        "data-slot": "topbar-icon",
+        sizes: "xxsm",
+        variant: "decorative-2",
+        className: className,
+        ...props,
+        children: /*#__PURE__*/ _jsx(AvatarIcon, {
+            children: children
+        })
+    });
+});
+TopbarIcon.displayName = 'TopbarIcon';
+const TopbarBreadcrumbs = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(Breadcrumb, {
+        ref: ref,
+        "data-slot": "topbar-breadcrumbs",
+        className: className,
+        ...props
+    });
+});
+TopbarBreadcrumbs.displayName = 'TopbarBreadcrumbs';
+const TopbarMetadata = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx("span", {
+        ref: ref,
+        "data-slot": "topbar-metadata",
+        className: cn('px-2 pt-0.5 text-xs leading-3.5 tracking-tightest text-muted-foreground', className),
+        ...props
+    });
+});
+TopbarMetadata.displayName = 'TopbarMetadata';
+const TopbarCenter = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        "data-slot": "topbar-center",
+        className: cn('flex min-w-0 flex-1 items-center justify-center', className),
+        ...props
+    });
+});
+TopbarCenter.displayName = 'TopbarCenter';
+const TopbarRight = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        "data-slot": "topbar-right",
+        className: cn('flex min-w-0 flex-1 items-center justify-end gap-2', className),
+        ...props
+    });
+});
+TopbarRight.displayName = 'TopbarRight';
+const DEFAULT_TOPBAR_THEME_SWITCHER_THEMES = [
+    'light',
+    'dark'
+];
+const isTopbarTheme = (theme)=>{
+    return theme === 'light' || theme === 'dark';
+};
+const TopbarThemeSwitcher = /*#__PURE__*/ forwardRef(({ className, theme = 'light', onThemeChange, availableThemes = DEFAULT_TOPBAR_THEME_SWITCHER_THEMES, toggleThemeLabel = 'Toggle theme', lightModeTitle = 'Light mode', darkModeTitle = 'Dark mode', switchThemeLabel = 'Switch Theme', lightModeLabel = 'Light mode', darkModeLabel = 'Dark mode', ...props }, ref)=>{
+    const hasLightTheme = availableThemes.includes('light');
+    const hasDarkTheme = availableThemes.includes('dark');
+    if (availableThemes.length < 2) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        "data-slot": "topbar-theme-switcher",
+        className: cn('flex items-center gap-1', className),
+        ...props,
+        children: /*#__PURE__*/ _jsxs(DropdownMenu, {
+            modal: false,
+            children: [
+                /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                    render: /*#__PURE__*/ _jsx(Button, {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        "aria-label": toggleThemeLabel,
+                        children: theme === 'light' ? /*#__PURE__*/ _jsx(IconSun, {
+                            children: /*#__PURE__*/ _jsx("title", {
+                                children: lightModeTitle
+                            })
+                        }) : /*#__PURE__*/ _jsx(IconMoon, {
+                            children: /*#__PURE__*/ _jsx("title", {
+                                children: darkModeTitle
+                            })
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx(DropdownMenuContent, {
+                    align: "end",
+                    className: "w-40",
+                    children: /*#__PURE__*/ _jsxs(DropdownMenuGroup, {
+                        children: [
+                            /*#__PURE__*/ _jsx(DropdownMenuLabel, {
+                                children: switchThemeLabel
+                            }),
+                            /*#__PURE__*/ _jsxs(DropdownMenuRadioGroup, {
+                                value: theme,
+                                onValueChange: (value)=>{
+                                    if (isTopbarTheme(value)) {
+                                        onThemeChange?.(value);
+                                    }
+                                },
+                                children: [
+                                    hasLightTheme ? /*#__PURE__*/ _jsx(DropdownMenuRadioItem, {
+                                        value: "light",
+                                        children: lightModeLabel
+                                    }) : null,
+                                    hasDarkTheme ? /*#__PURE__*/ _jsx(DropdownMenuRadioItem, {
+                                        value: "dark",
+                                        children: darkModeLabel
+                                    }) : null
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+});
+TopbarThemeSwitcher.displayName = 'TopbarThemeSwitcher';
+const TopbarAction = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(Button, {
+        ref: ref,
+        "data-slot": "topbar-action",
+        className: className,
+        ...props
+    });
+});
+TopbarAction.displayName = 'TopbarAction';
+export { Topbar, TopbarAction, TopbarBreadcrumbs, TopbarCenter, TopbarIcon, TopbarLeft, TopbarMetadata, TopbarRight, TopbarThemeSwitcher };
+
+//# sourceMappingURL=topbar.js.map

package/dist/components/ui/core/topbar/topbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/topbar/topbar.tsx"],"sourcesContent":["import {\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type ComponentProps,\n  type ComponentRef,\n  type ForwardedRef,\n  type ReactNode,\n  forwardRef,\n} from 'react';\n\nimport { IconMoon, IconSun } from '@tabler/icons-react';\n\nimport { cn } from '../../../../lib/utils';\nimport { Avatar, AvatarIcon } from '../avatar/avatar';\nimport { Breadcrumb } from '../breadcrumb/breadcrumb';\nimport { Button } from '../button/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu/dropdown-menu';\n\nconst TOPBAR_ROOT_CLASSES = cn(\n  'flex h-11 w-full items-center gap-2 rounded-t-lg border-b border-default bg-muted-background px-3 py-2',\n  '[&:has(>[data-slot=topbar-center])>[data-slot=topbar-right]]:flex-none'\n);\n\ntype TopbarProps = ComponentProps<'div'>;\n\nconst Topbar: ForwardRefExoticComponent<\n  ComponentProps<'div'> & RefAttributes<HTMLDivElement>\n> = forwardRef<HTMLDivElement, TopbarProps>(\n  (\n    { className, role = 'banner', ...props }: TopbarProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"topbar\"\n        role={role}\n        className={cn(TOPBAR_ROOT_CLASSES, className)}\n        {...props}\n      />\n    );\n  }\n);\nTopbar.displayName = 'Topbar';\n\ntype TopbarLeftProps = ComponentProps<'div'>;\n\nconst TopbarLeft: ForwardRefExoticComponent<\n  ComponentProps<'div'> & RefAttributes<HTMLDivElement>\n> = forwardRef<HTMLDivElement, TopbarLeftProps>(\n  (\n    { className, ...props }: TopbarLeftProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"topbar-left\"\n        className={cn('flex min-w-0 items-center gap-0.5', className)}\n        {...props}\n      />\n    );\n  }\n);\nTopbarLeft.displayName = 'TopbarLeft';\n\ntype TopbarIconProps = Omit<\n  ComponentProps<typeof Avatar>,\n  'sizes' | 'variant' | 'children'\n> & { children: ReactNode };\n\nconst TopbarIcon: ForwardRefExoticComponent<\n  Omit<TopbarIconProps, 'ref'> & RefAttributes<HTMLSpanElement>\n> = forwardRef<ComponentRef<typeof Avatar>, TopbarIconProps>(\n  (\n    { className, children, ...props }: TopbarIconProps,\n    ref: ForwardedRef<ComponentRef<typeof Avatar>>\n  ) => {\n    return (\n      <Avatar\n        ref={ref}\n        data-slot=\"topbar-icon\"\n        sizes=\"xxsm\"\n        variant=\"decorative-2\"\n        className={className}\n        {...props}\n      >\n        <AvatarIcon>{children}</AvatarIcon>\n      </Avatar>\n    );\n  }\n);\nTopbarIcon.displayName = 'TopbarIcon';\n\ntype TopbarBreadcrumbsProps = ComponentProps<typeof Breadcrumb>;\n\nconst TopbarBreadcrumbs: ForwardRefExoticComponent<\n  ComponentProps<'nav'> & RefAttributes<HTMLElement>\n> = forwardRef<ComponentRef<typeof Breadcrumb>, TopbarBreadcrumbsProps>(\n  (\n    { className, ...props }: TopbarBreadcrumbsProps,\n    ref: ForwardedRef<ComponentRef<typeof Breadcrumb>>\n  ) => {\n    return (\n      <Breadcrumb\n        ref={ref}\n        data-slot=\"topbar-breadcrumbs\"\n        className={className}\n        {...props}\n      />\n    );\n  }\n);\nTopbarBreadcrumbs.displayName = 'TopbarBreadcrumbs';\n\ntype TopbarMetadataProps = ComponentProps<'span'>;\n\nconst TopbarMetadata: ForwardRefExoticComponent<\n  ComponentProps<'span'> & RefAttributes<HTMLSpanElement>\n> = forwardRef<HTMLSpanElement, TopbarMetadataProps>(\n  (\n    { className, ...props }: TopbarMetadataProps,\n    ref: ForwardedRef<HTMLSpanElement>\n  ) => {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"topbar-metadata\"\n        className={cn(\n          'px-2 pt-0.5 text-xs leading-3.5 tracking-tightest text-muted-foreground',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\nTopbarMetadata.displayName = 'TopbarMetadata';\n\ntype TopbarCenterProps = ComponentProps<'div'>;\n\nconst TopbarCenter: ForwardRefExoticComponent<\n  ComponentProps<'div'> & RefAttributes<HTMLDivElement>\n> = forwardRef<HTMLDivElement, TopbarCenterProps>(\n  (\n    { className, ...props }: TopbarCenterProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"topbar-center\"\n        className={cn(\n          'flex min-w-0 flex-1 items-center justify-center',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\nTopbarCenter.displayName = 'TopbarCenter';\n\ntype TopbarRightProps = ComponentProps<'div'>;\n\nconst TopbarRight: ForwardRefExoticComponent<\n  ComponentProps<'div'> & RefAttributes<HTMLDivElement>\n> = forwardRef<HTMLDivElement, TopbarRightProps>(\n  (\n    { className, ...props }: TopbarRightProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"topbar-right\"\n        className={cn(\n          'flex min-w-0 flex-1 items-center justify-end gap-2',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\nTopbarRight.displayName = 'TopbarRight';\n\ntype TopbarTheme = 'light' | 'dark';\n\nconst DEFAULT_TOPBAR_THEME_SWITCHER_THEMES: TopbarTheme[] = ['light', 'dark'];\n\nconst isTopbarTheme = (theme: string): theme is TopbarTheme => {\n  return theme === 'light' || theme === 'dark';\n};\n\ntype TopbarThemeSwitcherProps = ComponentProps<'div'> & {\n  theme?: TopbarTheme;\n  onThemeChange?: (theme: TopbarTheme) => void;\n  availableThemes?: readonly TopbarTheme[];\n  toggleThemeLabel?: string;\n  lightModeTitle?: string;\n  darkModeTitle?: string;\n  switchThemeLabel?: string;\n  lightModeLabel?: string;\n  darkModeLabel?: string;\n};\n\nconst TopbarThemeSwitcher: ForwardRefExoticComponent<\n  Omit<TopbarThemeSwitcherProps, 'ref'> & RefAttributes<HTMLDivElement>\n> = forwardRef<HTMLDivElement, TopbarThemeSwitcherProps>(\n  (\n    {\n      className,\n      theme = 'light',\n      onThemeChange,\n      availableThemes = DEFAULT_TOPBAR_THEME_SWITCHER_THEMES,\n      toggleThemeLabel = 'Toggle theme',\n      lightModeTitle = 'Light mode',\n      darkModeTitle = 'Dark mode',\n      switchThemeLabel = 'Switch Theme',\n      lightModeLabel = 'Light mode',\n      darkModeLabel = 'Dark mode',\n      ...props\n    }: TopbarThemeSwitcherProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const hasLightTheme = availableThemes.includes('light');\n    const hasDarkTheme = availableThemes.includes('dark');\n\n    if (availableThemes.length < 2) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"topbar-theme-switcher\"\n        className={cn('flex items-center gap-1', className)}\n        {...props}\n      >\n        <DropdownMenu modal={false}>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                aria-label={toggleThemeLabel}\n              >\n                {theme === 'light' ? (\n                  <IconSun>\n                    <title>{lightModeTitle}</title>\n                  </IconSun>\n                ) : (\n                  <IconMoon>\n                    <title>{darkModeTitle}</title>\n                  </IconMoon>\n                )}\n              </Button>\n            }\n          />\n          <DropdownMenuContent align=\"end\" className=\"w-40\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel>{switchThemeLabel}</DropdownMenuLabel>\n              <DropdownMenuRadioGroup\n                value={theme}\n                onValueChange={(value: string) => {\n                  if (isTopbarTheme(value)) {\n                    onThemeChange?.(value);\n                  }\n                }}\n              >\n                {hasLightTheme ? (\n                  <DropdownMenuRadioItem value=\"light\">\n                    {lightModeLabel}\n                  </DropdownMenuRadioItem>\n                ) : null}\n                {hasDarkTheme ? (\n                  <DropdownMenuRadioItem value=\"dark\">\n                    {darkModeLabel}\n                  </DropdownMenuRadioItem>\n                ) : null}\n              </DropdownMenuRadioGroup>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    );\n  }\n);\nTopbarThemeSwitcher.displayName = 'TopbarThemeSwitcher';\n\ntype TopbarActionProps = ComponentProps<typeof Button>;\n\nconst TopbarAction: ForwardRefExoticComponent<\n  Omit<ComponentProps<typeof Button>, 'ref'> & RefAttributes<HTMLElement>\n> = forwardRef<ComponentRef<typeof Button>, TopbarActionProps>(\n  (\n    { className, ...props }: TopbarActionProps,\n    ref: ForwardedRef<ComponentRef<typeof Button>>\n  ) => {\n    return (\n      <Button\n        ref={ref}\n        data-slot=\"topbar-action\"\n        className={className}\n        {...props}\n      />\n    );\n  }\n);\nTopbarAction.displayName = 'TopbarAction';\n\nexport {\n  Topbar,\n  TopbarAction,\n  TopbarBreadcrumbs,\n  TopbarCenter,\n  TopbarIcon,\n  TopbarLeft,\n  TopbarMetadata,\n  TopbarRight,\n  TopbarThemeSwitcher,\n  type TopbarTheme,\n};\n"],"names":["forwardRef","IconMoon","IconSun","cn","Avatar","AvatarIcon","Breadcrumb","Button","DropdownMenu","DropdownMenuContent","DropdownMenuGroup","DropdownMenuLabel","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuTrigger","TOPBAR_ROOT_CLASSES","Topbar","className","role","props","ref","div","data-slot","displayName","TopbarLeft","TopbarIcon","children","sizes","variant","TopbarBreadcrumbs","TopbarMetadata","span","TopbarCenter","TopbarRight","DEFAULT_TOPBAR_THEME_SWITCHER_THEMES","isTopbarTheme","theme","TopbarThemeSwitcher","onThemeChange","availableThemes","toggleThemeLabel","lightModeTitle","darkModeTitle","switchThemeLabel","lightModeLabel","darkModeLabel","hasLightTheme","includes","hasDarkTheme","length","modal","render","size","aria-label","title","align","value","onValueChange","TopbarAction"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import { type ItemInstance } from "@headless-tree/core";
+type TreeProps<T> = {
+	rootItemId: string;
+	items: Record<string, T>;
+	getChildren: (item: T) => string[];
+	getItemName: (item: T) => string;
+	expandedItems?: string[];
+	defaultExpandedItems?: string[];
+	onExpandedItemsChange?: (expandedItems: string[]) => void;
+	checkboxes?: boolean;
+	checkedItems?: string[];
+	defaultCheckedItems?: string[];
+	onCheckedItemsChange?: (checked: string[]) => void;
+	className?: string;
+	children: (item: ItemInstance<T>) => ReactNode;
+};
+declare function Tree<T>({ rootItemId, items, getChildren, getItemName, expandedItems: expandedItemsProp, defaultExpandedItems, onExpandedItemsChange, checkboxes, checkedItems: checkedItemsProp, defaultCheckedItems, onCheckedItemsChange, className, children }: TreeProps<T>): ReactNode;
+export { Tree };
+export type { TreeProps };

package/dist/components/ui/core/tree/tree.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckedState, checkboxesFeature, hotkeysCoreFeature, syncDataLoaderFeature } from "@headless-tree/core";
+import { useTree } from "@headless-tree/react";
+import { IconChevronRight } from "@tabler/icons-react";
+import { useControllableState } from "../../../../lib/use-controllable-state.js";
+import { cn } from "../../../../lib/utils.js";
+import { Item, ItemCheckbox, ItemGroup } from "../item/item.js";
+const EMPTY_ITEMS = [];
+function Tree({ rootItemId, items, getChildren, getItemName, expandedItems: expandedItemsProp, defaultExpandedItems = EMPTY_ITEMS, onExpandedItemsChange, checkboxes = false, checkedItems: checkedItemsProp, defaultCheckedItems = EMPTY_ITEMS, onCheckedItemsChange, className, children }) {
+    const [expandedItems, setExpandedItems] = useControllableState({
+        prop: expandedItemsProp,
+        defaultProp: defaultExpandedItems,
+        onChange: onExpandedItemsChange
+    });
+    const [checkedItems, setCheckedItems] = useControllableState({
+        prop: checkedItemsProp,
+        defaultProp: defaultCheckedItems,
+        onChange: onCheckedItemsChange
+    });
+    const tree = useTree({
+        rootItemId,
+        getItemName: (item)=>getItemName(item.getItemData()),
+        isItemFolder: (item)=>getChildren(item.getItemData()).length > 0,
+        dataLoader: {
+            getItem: (itemId)=>items[itemId],
+            getChildren: (itemId)=>getChildren(items[itemId])
+        },
+        state: {
+            expandedItems,
+            checkedItems
+        },
+        setExpandedItems,
+        setCheckedItems,
+        features: [
+            syncDataLoaderFeature,
+            hotkeysCoreFeature,
+            ...checkboxes ? [
+                checkboxesFeature
+            ] : []
+        ]
+    });
+    return /*#__PURE__*/ _jsx(ItemGroup, {
+        ...tree.getContainerProps(),
+        className: cn('flex flex-col gap-1.5', className),
+        children: tree.getItems().map((item)=>/*#__PURE__*/ _jsx(TreeItem, {
+                item: item,
+                checkboxes: checkboxes,
+                children: children(item)
+            }, item.getId()))
+    });
+}
+function TreeItem({ item, children, checkboxes }) {
+    const level = item.getItemMeta().level;
+    const isFolder = item.isFolder();
+    const isExpanded = item.isExpanded();
+    const checkedState = checkboxes ? item.getCheckedState() : null;
+    const chevron = /*#__PURE__*/ _jsx(IconChevronRight, {
+        "aria-hidden": true,
+        "data-slot": "tree-chevron",
+        "data-open": isExpanded ? '' : undefined,
+        className: cn('size-4 shrink-0 text-medium-foreground transition-transform duration-200 data-open:rotate-90', !isFolder && 'invisible')
+    });
+    return /*#__PURE__*/ _jsxs(Item, {
+        selected: checkedState === CheckedState.Checked || checkedState === CheckedState.Indeterminate,
+        ...item.getProps(),
+        onClick: ()=>item.setFocused(),
+        children: [
+            Array.from({
+                length: level
+            }, (_, index)=>/*#__PURE__*/ _jsx("span", {
+                    "aria-hidden": "true",
+                    "data-slot": "tree-indent",
+                    className: "w-4 shrink-0"
+                }, `${item.getId()}-indent-${index}`)),
+            isFolder ? /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                tabIndex: -1,
+                "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${item.getItemName()}`,
+                className: "shrink-0",
+                onClick: ()=>{
+                    isExpanded ? item.collapse() : item.expand();
+                },
+                children: chevron
+            }) : chevron,
+            checkboxes ? /*#__PURE__*/ _jsx(ItemCheckbox, {
+                className: "shrink-0",
+                "aria-label": `Select ${item.getItemName()}`,
+                checked: checkedState === CheckedState.Checked,
+                indeterminate: checkedState === CheckedState.Indeterminate,
+                onCheckedChange: ()=>{
+                    item.toggleCheckedState();
+                }
+            }) : null,
+            children
+        ]
+    });
+}
+export { Tree };
+
+//# sourceMappingURL=tree.js.map