@powerhousedao/design-system 6.1.0-dev.2 → 6.1.0-dev.20

package/dist/ui/components/select-field/selected-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"selected-content.js","names":["cn","Icon","React","SelectedContent","selectedValues","options","multiple","searchable","placeholder","handleClear","renderIcon","IconComponent","length","map","value","index","option","find","o","icon","label","e","preventDefault","stopPropagation"],"sources":["../../../../src/ui/components/select-field/selected-content.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { cn, Icon } from \"#design-system\";\nimport React from \"react\";\nimport type { SelectProps } from \"../enum-field/types.js\";\n\ninterface SelectedContentProps {\n  selectedValues: string[];\n  options: SelectProps[\"options\"];\n  multiple?: boolean;\n  searchable?: boolean;\n  placeholder?: string;\n  handleClear: () => void;\n}\n\nexport const SelectedContent: React.FC<SelectedContentProps> = ({\n  selectedValues,\n  options = [],\n  multiple,\n  searchable,\n  placeholder,\n  handleClear,\n}) => {\n  const renderIcon = (\n    IconComponent:\n      | IconName\n      | React.ComponentType<{ className?: string }>\n      | undefined,\n  ) => {\n    if (typeof IconComponent === \"string\") {\n      return <Icon name={IconComponent} size={16} />;\n    }\n    return IconComponent && <IconComponent className=\"size-4\" />;\n  };\n\n  if (selectedValues.length === 0) {\n    return (\n      <div\n        className={cn(\n          \"mx-auto flex w-full items-center\",\n          placeholder ? \"justify-between\" : \"justify-end\",\n        )}\n      >\n        {placeholder && (\n          <span className=\"text-sm/5 font-normal text-gray-600 dark:text-gray-500\">\n            {placeholder}\n          </span>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full items-center justify-between gap-2\">\n      <div\n        className={cn(\n          \"max-w-full truncate text-gray-900 dark:text-gray-50\",\n          !multiple && \"flex items-center gap-2\",\n        )}\n      >\n        {selectedValues.map((value, index) => {\n          const option = options.find((o) => o.value === value);\n          return !multiple ? (\n            <React.Fragment key={value}>\n              {renderIcon(option?.icon)}\n              <span className=\"truncate text-sm/5 font-normal\">\n                {option?.label}\n              </span>\n            </React.Fragment>\n          ) : (\n            <span\n              key={value}\n              className={cn(\n                \"text-sm/5 font-normal\",\n                index !== selectedValues.length - 1 && \"mr-1\",\n              )}\n            >\n              {index !== selectedValues.length - 1\n                ? `${option?.label},`\n                : option?.label}\n            </span>\n          );\n        })}\n      </div>\n      <div className=\"flex items-center justify-between gap-2\">\n        {multiple && selectedValues.length > 0 && (\n          <div\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n              handleClear();\n            }}\n            className=\"size-4 p-0\"\n          >\n            <Icon\n              name=\"XmarkLight\"\n              size={16}\n              className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n            />\n          </div>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-gray-400\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAcA,MAAaG,mBAAmD,EAC9DC,gBACAC,UAAU,EAAE,EACZC,UACAC,YACAC,aACAC,kBACI;CACJ,MAAMC,cACJC,kBAIG;AACH,MAAI,OAAOA,kBAAkB,SAC3B,QAAO,oBAAC,MAAD;GAAM,MAAMA;GAAe,MAAM;GAAM,CAAA;AAEhD,SAAOA,iBAAiB,oBAAC,eAAD,EAAe,WAAU,UAAW,CAAA;;AAG9D,KAAIP,eAAeQ,WAAW,EAC5B,QACE,qBAAC,OAAD;EACE,WAAWZ,GACT,oCACAQ,cAAc,oBAAoB,cACnC;YAJH,CAMGA,eACC,oBAAC,QAAD;GAAM,WAAU;aACbA;GAEJ,CAAA,EACAD,aACC,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GACV,CAAA,GAEF,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GAEb,CAAA,CACG;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,WAAWP,GACT,uDACA,CAACM,YAAY,0BACd;aAEAF,eAAeS,KAAKC,OAAOC,UAAU;IACpC,MAAMC,SAASX,QAAQY,MAAMC,MAAMA,EAAEJ,UAAUA,MAAM;AACrD,WAAO,CAACR,WACN,qBAAC,MAAM,UAAP,EAAA,UAAA,CACGI,WAAWM,QAAQG,KAAK,EACzB,oBAAC,QAAD;KAAM,WAAU;eACbH,QAAQI;KACL,CAAA,CACS,EAAA,EALIN,MAKJ,GAEjB,oBAAC,QAAD;KAEE,WAAWd,GACT,yBACAe,UAAUX,eAAeQ,SAAS,KAAK,OACxC;eAEAG,UAAUX,eAAeQ,SAAS,IAC/B,GAAGI,QAAQI,MAAK,KAChBJ,QAAQI;KAEf,EAVQN,MAUR;KACD;GACC,CAAA,EACL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACGR,YAAYF,eAAeQ,SAAS,KACnC,oBAAC,OAAD;IACE,UAAUS,MAAM;AACdA,OAAEC,gBAAgB;AAClBD,OAAEE,iBAAiB;AACnBd,kBAAa;;IAEf,WAAU;cAEV,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAU;KAAiD,CAAA;IAGhE,CAAA,EACAF,aACC,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IACV,CAAA,GAEF,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IAEb,CAAA,CACE;KACD"}
+{"version":3,"file":"selected-content.js","names":["Icon","twMerge","React","SelectedContent","selectedValues","options","multiple","searchable","placeholder","handleClear","renderIcon","IconComponent","length","map","value","index","option","find","o","icon","label","e","preventDefault","stopPropagation"],"sources":["../../../../src/ui/components/select-field/selected-content.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport React from \"react\";\nimport type { SelectProps } from \"../enum-field/types.js\";\n\ninterface SelectedContentProps {\n  selectedValues: string[];\n  options: SelectProps[\"options\"];\n  multiple?: boolean;\n  searchable?: boolean;\n  placeholder?: string;\n  handleClear: () => void;\n}\n\nexport const SelectedContent: React.FC<SelectedContentProps> = ({\n  selectedValues,\n  options = [],\n  multiple,\n  searchable,\n  placeholder,\n  handleClear,\n}) => {\n  const renderIcon = (\n    IconComponent:\n      | IconName\n      | React.ComponentType<{ className?: string }>\n      | undefined,\n  ) => {\n    if (typeof IconComponent === \"string\") {\n      return <Icon name={IconComponent} size={16} />;\n    }\n    return IconComponent && <IconComponent className=\"size-4\" />;\n  };\n\n  if (selectedValues.length === 0) {\n    return (\n      <div\n        className={twMerge(\n          \"mx-auto flex w-full items-center\",\n          placeholder ? \"justify-between\" : \"justify-end\",\n        )}\n      >\n        {placeholder && (\n          <span className=\"text-sm/5 font-normal text-gray-700 dark:text-slate-200\">\n            {placeholder}\n          </span>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-slate-200\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-slate-200\"\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full items-center justify-between gap-2\">\n      <div\n        className={twMerge(\n          \"max-w-full truncate text-gray-900 dark:text-slate-50\",\n          !multiple && \"flex items-center gap-2\",\n        )}\n      >\n        {selectedValues.map((value, index) => {\n          const option = options.find((o) => o.value === value);\n          return !multiple ? (\n            <React.Fragment key={value}>\n              {renderIcon(option?.icon)}\n              <span className=\"truncate text-sm/5 font-normal\">\n                {option?.label}\n              </span>\n            </React.Fragment>\n          ) : (\n            <span\n              key={value}\n              className={twMerge(\n                \"text-sm/5 font-normal\",\n                index !== selectedValues.length - 1 && \"mr-1\",\n              )}\n            >\n              {index !== selectedValues.length - 1\n                ? `${option?.label},`\n                : option?.label}\n            </span>\n          );\n        })}\n      </div>\n      <div className=\"flex items-center justify-between gap-2\">\n        {multiple && selectedValues.length > 0 && (\n          <div\n            onClick={(e) => {\n              e.preventDefault();\n              e.stopPropagation();\n              handleClear();\n            }}\n            className=\"size-4 p-0\"\n          >\n            <Icon\n              name=\"XmarkLight\"\n              size={16}\n              className=\"cursor-pointer text-gray-700 dark:text-slate-200\"\n            />\n          </div>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-slate-200\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-gray-700 dark:text-slate-200\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAeA,MAAaG,mBAAmD,EAC9DC,gBACAC,UAAU,EAAE,EACZC,UACAC,YACAC,aACAC,kBACI;CACJ,MAAMC,cACJC,kBAIG;AACH,MAAI,OAAOA,kBAAkB,SAC3B,QAAO,oBAAC,MAAD;GAAM,MAAMA;GAAe,MAAM;GAAM,CAAA;AAEhD,SAAOA,iBAAiB,oBAAC,eAAD,EAAe,WAAU,UAAW,CAAA;;AAG9D,KAAIP,eAAeQ,WAAW,EAC5B,QACE,qBAAC,OAAD;EACE,WAAWX,QACT,oCACAO,cAAc,oBAAoB,cACnC;YAJH,CAMGA,eACC,oBAAC,QAAD;GAAM,WAAU;aACbA;GAEJ,CAAA,EACAD,aACC,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GACV,CAAA,GAEF,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;GAEb,CAAA,CACG;;AAIV,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,WAAWN,QACT,wDACA,CAACK,YAAY,0BACd;aAEAF,eAAeS,KAAKC,OAAOC,UAAU;IACpC,MAAMC,SAASX,QAAQY,MAAMC,MAAMA,EAAEJ,UAAUA,MAAM;AACrD,WAAO,CAACR,WACN,qBAAC,MAAM,UAAP,EAAA,UAAA,CACGI,WAAWM,QAAQG,KAAK,EACzB,oBAAC,QAAD;KAAM,WAAU;eACbH,QAAQI;KACL,CAAA,CACS,EAAA,EALIN,MAKJ,GAEjB,oBAAC,QAAD;KAEE,WAAWb,QACT,yBACAc,UAAUX,eAAeQ,SAAS,KAAK,OACxC;eAEAG,UAAUX,eAAeQ,SAAS,IAC/B,GAAGI,QAAQI,MAAK,KAChBJ,QAAQI;KAEf,EAVQN,MAUR;KACD;GACC,CAAA,EACL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACGR,YAAYF,eAAeQ,SAAS,KACnC,oBAAC,OAAD;IACE,UAAUS,MAAM;AACdA,OAAEC,gBAAgB;AAClBD,OAAEE,iBAAiB;AACnBd,kBAAa;;IAEf,WAAU;cAEV,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAU;KAAkD,CAAA;IAGjE,CAAA,EACAF,aACC,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IACV,CAAA,GAEF,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;IAEb,CAAA,CACE;KACD"}

package/dist/ui/components/select-field/subcomponents/CommandItemList.d.ts

@@ -1,4 +1,4 @@
-import { C as SelectProps } from "../../../../index-DtPJq-vz.js";
+import { C as SelectProps } from "../../../../index--hDSfvJT.js";
 import React from "react";
 
 //#region src/ui/components/select-field/subcomponents/CommandItemList.d.ts

package/dist/ui/components/select-field/subcomponents/CommandItemList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandItemList.d.ts","names":[],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"mappings":";;;;UAMU,oBAAA;EACR,OAAA,EAAS,WAAA;EACT,cAAA;EACA,QAAA;EACA,aAAA;EACA,qBAAA;EACA,UAAA;EACA,YAAA,GAAe,KAAA;EACf,QAAA;AAAA;AAAA,cA2BW,eAAA,EAAiB,KAAA,CAAM,EAAA,CAAG,oBAAA"}
+{"version":3,"file":"CommandItemList.d.ts","names":[],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"mappings":";;;;UAOU,oBAAA;EACR,OAAA,EAAS,WAAA;EACT,cAAA;EACA,QAAA;EACA,aAAA;EACA,qBAAA;EACA,UAAA;EACA,YAAA,GAAe,KAAA;EACf,QAAA;AAAA;AAAA,cA2BW,eAAA,EAAiB,KAAA,CAAM,EAAA,CAAG,oBAAA"}

package/dist/ui/components/select-field/subcomponents/CommandItemList.js

@@ -1,15 +1,16 @@
-import { h as Icon, t as cn } from "../../../../src-BgCjYazJ.js";
+import { t as Icon } from "../../../../icon-C4QOpsdI.js";
 import { CommandItem } from "../../command/command.js";
 import "react";
+import { twMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/components/select-field/subcomponents/CommandItemList.tsx
 const renderIcon = (IconComponent) => {
 	if (typeof IconComponent === "string") return /* @__PURE__ */ jsx(Icon, {
 		name: IconComponent,
 		size: 16,
-		className: cn("text-gray-700 dark:text-gray-400")
+		className: twMerge("text-gray-700 dark:text-slate-200")
 	});
-	return IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: cn("size-4", "text-gray-700 dark:text-gray-400") });
+	return IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: twMerge("size-4", "text-gray-700 dark:text-slate-200") });
 };
 const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon, selectionIconPosition, hasAnyIcon, toggleOption, tabIndex }) => {
 	return /* @__PURE__ */ jsx(Fragment$1, { children: options.map((opt) => {
@@ -19,31 +20,31 @@ const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon
 			value: opt.label,
 			onSelect: () => !opt.disabled && toggleOption(opt.value),
 			disabled: opt.disabled,
-			className: cn("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900", opt.disabled && "pointer-events-auto! cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent"),
+			className: twMerge("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-slate-500", opt.disabled && "pointer-events-auto! cursor-not-allowed hover:bg-transparent dark:hover:bg-slate-500"),
 			role: "option",
 			"aria-selected": isSelected,
 			children: [
 				selectionIcon === "auto" && (multiple ? /* @__PURE__ */ jsx("div", {
-					className: cn("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-gray-400", isSelected && "bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black"),
+					className: twMerge("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-slate-200", isSelected && "bg-gray-900 text-gray-50 dark:bg-slate-50 dark:text-slate-900"),
 					children: isSelected && /* @__PURE__ */ jsx(Icon, {
 						name: "Checkmark",
 						size: 16
 					})
 				}) : /* @__PURE__ */ jsx("div", {
-					className: cn("relative size-4 rounded-full border", isSelected ? "border-gray-900 dark:border-gray-400" : "border-gray-800 dark:border-gray-400", "bg-transparent dark:bg-transparent"),
-					children: isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 size-2.5 -translate-1/2 rounded-full bg-gray-900 dark:bg-gray-400" })
+					className: twMerge("relative size-4 rounded-full border", isSelected ? "border-gray-900 dark:border-slate-50" : "border-gray-800 dark:border-slate-100", "bg-transparent"),
+					children: isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 size-2.5 -translate-1/2 rounded-full bg-gray-900 dark:bg-slate-50" })
 				})),
 				selectionIcon === "checkmark" && !(selectionIconPosition === "right" && hasAnyIcon) && /* @__PURE__ */ jsx("div", {
 					className: "size-4",
 					children: selectionIconPosition === "left" && isSelected && /* @__PURE__ */ jsx(Icon, {
 						name: "Checkmark",
 						size: 16,
-						className: "text-gray-900 dark:text-gray-50"
+						className: "text-gray-900 dark:text-slate-50"
 					})
 				}),
 				renderIcon(opt.icon),
 				/* @__PURE__ */ jsx("span", {
-					className: cn("flex-1 truncate text-sm/4 font-normal", "text-gray-700 dark:text-gray-500", opt.disabled && "text-gray-600 dark:text-gray-600"),
+					className: twMerge("flex-1 truncate text-sm/4 font-normal", "text-gray-700 dark:text-slate-200", opt.disabled && "text-gray-700 dark:text-slate-200"),
 					children: opt.label
 				}),
 				selectionIcon === "checkmark" && selectionIconPosition === "right" && /* @__PURE__ */ jsx("div", {
@@ -51,7 +52,7 @@ const CommandItemList = ({ options = [], selectedValues, multiple, selectionIcon
 					children: isSelected && /* @__PURE__ */ jsx(Icon, {
 						name: "Checkmark",
 						size: 16,
-						className: "text-gray-900 dark:text-gray-50"
+						className: "text-gray-900 dark:text-slate-50"
 					})
 				})
 			]

package/dist/ui/components/select-field/subcomponents/CommandItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandItemList.js","names":["cn","Icon","React","CommandItem","renderIcon","IconComponent","CommandItemList","options","selectedValues","multiple","selectionIcon","selectionIconPosition","hasAnyIcon","toggleOption","tabIndex","map","opt","isSelected","includes","value","label","disabled","icon"],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { cn, Icon } from \"#design-system\";\nimport React from \"react\";\nimport { CommandItem } from \"../../command/command.js\";\nimport type { SelectProps } from \"../../enum-field/types.js\";\n\ninterface FavoriteOptionsProps {\n  options: SelectProps[\"options\"];\n  selectedValues: string[];\n  multiple?: boolean;\n  selectionIcon: \"auto\" | \"checkmark\";\n  selectionIconPosition: \"left\" | \"right\";\n  hasAnyIcon: boolean;\n  toggleOption: (value: string) => void;\n  tabIndex?: number;\n}\n\nconst renderIcon = (\n  IconComponent:\n    | IconName\n    | React.ComponentType<{ className?: string }>\n    | undefined,\n) => {\n  if (typeof IconComponent === \"string\") {\n    return (\n      <Icon\n        name={IconComponent}\n        size={16}\n        className={cn(\"text-gray-700 dark:text-gray-400\")}\n      />\n    );\n  }\n  return (\n    IconComponent && (\n      <IconComponent\n        className={cn(\"size-4\", \"text-gray-700 dark:text-gray-400\")}\n      />\n    )\n  );\n};\n\nexport const CommandItemList: React.FC<FavoriteOptionsProps> = ({\n  options = [],\n  selectedValues,\n  multiple,\n  selectionIcon,\n  selectionIconPosition,\n  hasAnyIcon,\n  toggleOption,\n  tabIndex,\n}) => {\n  return (\n    <>\n      {options.map((opt) => {\n        const isSelected = selectedValues.includes(opt.value);\n        return (\n          <CommandItem\n            tabIndex={tabIndex}\n            key={`favorite-${opt.value}`}\n            value={opt.label}\n            onSelect={() => !opt.disabled && toggleOption(opt.value)}\n            disabled={opt.disabled}\n            className={cn(\n              \"cursor-pointer\",\n              \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900\",\n              opt.disabled &&\n                \"pointer-events-auto! cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n            )}\n            role=\"option\"\n            aria-selected={isSelected}\n          >\n            {selectionIcon === \"auto\" &&\n              (multiple ? (\n                <div\n                  className={cn(\n                    \"flex size-4 items-center justify-center rounded-md border\",\n                    \"border-gray-700 dark:border-gray-400\",\n                    isSelected &&\n                      \"bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black\",\n                  )}\n                >\n                  {isSelected && <Icon name=\"Checkmark\" size={16} />}\n                </div>\n              ) : (\n                <div\n                  className={cn(\n                    \"relative size-4 rounded-full border\",\n                    isSelected\n                      ? \"border-gray-900 dark:border-gray-400\"\n                      : \"border-gray-800 dark:border-gray-400\",\n                    \"bg-transparent dark:bg-transparent\",\n                  )}\n                >\n                  {isSelected && (\n                    <div className=\"absolute top-1/2 left-1/2 size-2.5 -translate-1/2 rounded-full bg-gray-900 dark:bg-gray-400\" />\n                  )}\n                </div>\n              ))}\n            {selectionIcon === \"checkmark\" &&\n              !(selectionIconPosition === \"right\" && hasAnyIcon) && (\n                <div className=\"size-4\">\n                  {selectionIconPosition === \"left\" && isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-gray-50\"\n                    />\n                  )}\n                </div>\n              )}\n            {renderIcon(opt.icon)}\n            <span\n              className={cn(\n                \"flex-1 truncate text-sm/4 font-normal\",\n                \"text-gray-700 dark:text-gray-500\",\n                opt.disabled && \"text-gray-600 dark:text-gray-600\",\n              )}\n            >\n              {opt.label}\n            </span>\n            {selectionIcon === \"checkmark\" &&\n              selectionIconPosition === \"right\" && (\n                <div className=\"size-4\">\n                  {isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-gray-50\"\n                    />\n                  )}\n                </div>\n              )}\n          </CommandItem>\n        );\n      })}\n    </>\n  );\n};\n"],"mappings":";;;;;AAiBA,MAAMI,cACJC,kBAIG;AACH,KAAI,OAAOA,kBAAkB,SAC3B,QACE,oBAAC,MAAD;EACE,MAAMA;EACN,MAAM;EACN,WAAWL,GAAG,mCAAmC;EACjD,CAAA;AAGN,QACEK,iBACE,oBAAC,eAAD,EACE,WAAWL,GAAG,UAAU,mCAAmC,EAE9D,CAAA;;AAIL,MAAaM,mBAAmD,EAC9DC,UAAU,EAAE,EACZC,gBACAC,UACAC,eACAC,uBACAC,YACAC,cACAC,eACI;AACJ,QACE,oBAAA,YAAA,EAAA,UACGP,QAAQQ,KAAKC,QAAQ;EACpB,MAAMC,aAAaT,eAAeU,SAASF,IAAIG,MAAM;AACrD,SACE,qBAAC,aAAD;GACYL;GAEV,OAAOE,IAAII;GACX,gBAAgB,CAACJ,IAAIK,YAAYR,aAAaG,IAAIG,MAAM;GACxD,UAAUH,IAAIK;GACd,WAAWrB,GACT,kBACA,0EACAgB,IAAIK,YACF,yFACH;GACD,MAAK;GACL,iBAAeJ;aAbjB;IAeGP,kBAAkB,WAChBD,WACC,oBAAC,OAAD;KACE,WAAWT,GACT,6DACA,wCACAiB,cACE,6DACH;eAEAA,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAY,MAAM;MAAM,CAAA;KAC9C,CAAA,GAEN,oBAAC,OAAD;KACE,WAAWjB,GACT,uCACAiB,aACI,yCACA,wCACJ,qCACD;eAEAA,cACC,oBAAC,OAAD,EAAK,WAAU,+FAChB,CAAA;KAEJ,CAAA;IACFP,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWC,eACrC,oBAAC,OAAD;KAAK,WAAU;eACZD,0BAA0B,UAAUM,cACnC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACFb,WAAWY,IAAIM,KAAK;IACrB,oBAAC,QAAD;KACE,WAAWtB,GACT,yCACA,oCACAgB,IAAIK,YAAY,mCACjB;eAEAL,IAAII;KACD,CAAA;IACLV,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;KAAK,WAAU;eACZM,cACC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACS;KA1EP,YAAYD,IAAIG,QA0ET;GAEhB,EACD,CAAA"}
+{"version":3,"file":"CommandItemList.js","names":["Icon","twMerge","React","CommandItem","renderIcon","IconComponent","CommandItemList","options","selectedValues","multiple","selectionIcon","selectionIconPosition","hasAnyIcon","toggleOption","tabIndex","map","opt","isSelected","includes","value","label","disabled","icon"],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport React from \"react\";\nimport { CommandItem } from \"../../command/command.js\";\nimport type { SelectProps } from \"../../enum-field/types.js\";\n\ninterface FavoriteOptionsProps {\n  options: SelectProps[\"options\"];\n  selectedValues: string[];\n  multiple?: boolean;\n  selectionIcon: \"auto\" | \"checkmark\";\n  selectionIconPosition: \"left\" | \"right\";\n  hasAnyIcon: boolean;\n  toggleOption: (value: string) => void;\n  tabIndex?: number;\n}\n\nconst renderIcon = (\n  IconComponent:\n    | IconName\n    | React.ComponentType<{ className?: string }>\n    | undefined,\n) => {\n  if (typeof IconComponent === \"string\") {\n    return (\n      <Icon\n        name={IconComponent}\n        size={16}\n        className={twMerge(\"text-gray-700 dark:text-slate-200\")}\n      />\n    );\n  }\n  return (\n    IconComponent && (\n      <IconComponent\n        className={twMerge(\"size-4\", \"text-gray-700 dark:text-slate-200\")}\n      />\n    )\n  );\n};\n\nexport const CommandItemList: React.FC<FavoriteOptionsProps> = ({\n  options = [],\n  selectedValues,\n  multiple,\n  selectionIcon,\n  selectionIconPosition,\n  hasAnyIcon,\n  toggleOption,\n  tabIndex,\n}) => {\n  return (\n    <>\n      {options.map((opt) => {\n        const isSelected = selectedValues.includes(opt.value);\n        return (\n          <CommandItem\n            tabIndex={tabIndex}\n            key={`favorite-${opt.value}`}\n            value={opt.label}\n            onSelect={() => !opt.disabled && toggleOption(opt.value)}\n            disabled={opt.disabled}\n            className={twMerge(\n              \"cursor-pointer\",\n              \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-slate-500\",\n              opt.disabled &&\n                \"pointer-events-auto! cursor-not-allowed hover:bg-transparent dark:hover:bg-slate-500\",\n            )}\n            role=\"option\"\n            aria-selected={isSelected}\n          >\n            {selectionIcon === \"auto\" &&\n              (multiple ? (\n                <div\n                  className={twMerge(\n                    \"flex size-4 items-center justify-center rounded-md border\",\n                    \"border-gray-700 dark:border-slate-200\",\n                    isSelected &&\n                      \"bg-gray-900 text-gray-50 dark:bg-slate-50 dark:text-slate-900\",\n                  )}\n                >\n                  {isSelected && <Icon name=\"Checkmark\" size={16} />}\n                </div>\n              ) : (\n                <div\n                  className={twMerge(\n                    \"relative size-4 rounded-full border\",\n                    isSelected\n                      ? \"border-gray-900 dark:border-slate-50\"\n                      : \"border-gray-800 dark:border-slate-100\",\n                    \"bg-transparent\",\n                  )}\n                >\n                  {isSelected && (\n                    <div className=\"absolute top-1/2 left-1/2 size-2.5 -translate-1/2 rounded-full bg-gray-900 dark:bg-slate-50\" />\n                  )}\n                </div>\n              ))}\n            {selectionIcon === \"checkmark\" &&\n              !(selectionIconPosition === \"right\" && hasAnyIcon) && (\n                <div className=\"size-4\">\n                  {selectionIconPosition === \"left\" && isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-slate-50\"\n                    />\n                  )}\n                </div>\n              )}\n            {renderIcon(opt.icon)}\n            <span\n              className={twMerge(\n                \"flex-1 truncate text-sm/4 font-normal\",\n                \"text-gray-700 dark:text-slate-200\",\n                opt.disabled && \"text-gray-700 dark:text-slate-200\",\n              )}\n            >\n              {opt.label}\n            </span>\n            {selectionIcon === \"checkmark\" &&\n              selectionIconPosition === \"right\" && (\n                <div className=\"size-4\">\n                  {isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-slate-50\"\n                    />\n                  )}\n                </div>\n              )}\n          </CommandItem>\n        );\n      })}\n    </>\n  );\n};\n"],"mappings":";;;;;;AAkBA,MAAMI,cACJC,kBAIG;AACH,KAAI,OAAOA,kBAAkB,SAC3B,QACE,oBAAC,MAAD;EACE,MAAMA;EACN,MAAM;EACN,WAAWJ,QAAQ,oCAAoC;EACvD,CAAA;AAGN,QACEI,iBACE,oBAAC,eAAD,EACE,WAAWJ,QAAQ,UAAU,oCAAoC,EAEpE,CAAA;;AAIL,MAAaK,mBAAmD,EAC9DC,UAAU,EAAE,EACZC,gBACAC,UACAC,eACAC,uBACAC,YACAC,cACAC,eACI;AACJ,QACE,oBAAA,YAAA,EAAA,UACGP,QAAQQ,KAAKC,QAAQ;EACpB,MAAMC,aAAaT,eAAeU,SAASF,IAAIG,MAAM;AACrD,SACE,qBAAC,aAAD;GACYL;GAEV,OAAOE,IAAII;GACX,gBAAgB,CAACJ,IAAIK,YAAYR,aAAaG,IAAIG,MAAM;GACxD,UAAUH,IAAIK;GACd,WAAWpB,QACT,kBACA,2EACAe,IAAIK,YACF,uFACH;GACD,MAAK;GACL,iBAAeJ;aAbjB;IAeGP,kBAAkB,WAChBD,WACC,oBAAC,OAAD;KACE,WAAWR,QACT,6DACA,yCACAgB,cACE,gEACH;eAEAA,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAY,MAAM;MAAM,CAAA;KAC9C,CAAA,GAEN,oBAAC,OAAD;KACE,WAAWhB,QACT,uCACAgB,aACI,yCACA,yCACJ,iBACD;eAEAA,cACC,oBAAC,OAAD,EAAK,WAAU,+FAChB,CAAA;KAEJ,CAAA;IACFP,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWC,eACrC,oBAAC,OAAD;KAAK,WAAU;eACZD,0BAA0B,UAAUM,cACnC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACFb,WAAWY,IAAIM,KAAK;IACrB,oBAAC,QAAD;KACE,WAAWrB,QACT,yCACA,qCACAe,IAAIK,YAAY,oCACjB;eAEAL,IAAII;KACD,CAAA;IACLV,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;KAAK,WAAU;eACZM,cACC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACS;KA1EP,YAAYD,IAAIG,QA0ET;GAEhB,EACD,CAAA"}

package/dist/ui/components/select-field/use-select-field.d.ts

@@ -1,4 +1,4 @@
-import { C as SelectProps } from "../../../index-DtPJq-vz.js";
+import { C as SelectProps } from "../../../index--hDSfvJT.js";
 import * as react from "react";
 
 //#region src/ui/components/select-field/use-select-field.d.ts

package/dist/ui/components/sidebar/index.d.ts

@@ -0,0 +1,4 @@
+import { a as NodeStatus, i as NodeSortType, n as NodeSortComparisonFn, o as SidebarIcon, r as NodeSortOrder, s as SidebarNode, t as FlattenedNode } from "../../../types-CNbvfWjh.js";
+import { n as SidebarProps, t as Sidebar } from "../../../sidebar-DOoE4krt.js";
+import { n as useSidebar, t as SidebarProvider } from "../../../sidebar-provider-C2eyz9TL.js";
+export { FlattenedNode, NodeSortComparisonFn, NodeSortOrder, NodeSortType, NodeStatus, Sidebar, SidebarIcon, SidebarNode, SidebarProps, SidebarProvider, useSidebar };

package/dist/ui/components/sidebar/index.js

@@ -0,0 +1,3 @@
+import { SidebarProvider, useSidebar } from "./subcomponents/sidebar-provider/sidebar-provider.js";
+import { Sidebar } from "./sidebar.js";
+export { Sidebar, SidebarProvider, useSidebar };

package/dist/ui/components/sidebar/sidebar.d.ts

@@ -0,0 +1,2 @@
+import { n as SidebarProps, t as Sidebar } from "../../../sidebar-DOoE4krt.js";
+export { Sidebar, SidebarProps };

package/dist/ui/components/sidebar/sidebar.js

@@ -0,0 +1,110 @@
+import { t as Icon } from "../../../icon-C4QOpsdI.js";
+import { triggerEvent } from "./utils.js";
+import { useSidebar } from "./subcomponents/sidebar-provider/sidebar-provider.js";
+import { SidebarContentArea } from "./subcomponents/sidebar-content-area.js";
+import { SidebarHeader } from "./subcomponents/sidebar-header.js";
+import { SidebarPinningArea } from "./subcomponents/sidebar-pinning-area.js";
+import { SidebarSearch } from "./subcomponents/sidebar-search/sidebar-search.js";
+import { useSidebarResize } from "./use-sidebar-resize.js";
+import { useCallback, useEffect } from "react";
+import { twMerge } from "tailwind-merge";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/sidebar/sidebar.tsx
+/**
+* Sidebar component that provides a collapsible and resizable navigation panel
+* with support for hierarchical data, search, pinning, and custom styling.
+*/
+const Sidebar = ({ activeNodeId, onActiveNodeChange, nodes, sidebarIcon, sidebarTitle, defaultLevel = 1, enableMacros = 0, allowPinning = true, resizable = true, showSearchBar = true, showStatusFilter = false, extraFooterContent, initialWidth = 300, maxWidth, className, handleOnTitleClick, isLoading = false, nodeSortType, nodeSortOrder = "asc" }) => {
+	const { sidebarRef, startResizing, isResizing, isSidebarOpen, handleToggleSidebar } = useSidebarResize({
+		defaultWidth: initialWidth,
+		minWidth: 220,
+		maxWidth
+	});
+	const { pinnedNodePath, setNodes, openLevel, togglePin, syncActiveNodeId, setActiveNodeChangeCallback, nodes: providerNodes, nodeSortType: currentSortType, nodeSortOrder: currentSortOrder } = useSidebar();
+	useEffect(() => {
+		if (nodes) setNodes(nodes, nodeSortType, nodeSortOrder);
+	}, [
+		nodes,
+		setNodes,
+		nodeSortType,
+		nodeSortOrder
+	]);
+	useEffect(() => {
+		if (!nodes && providerNodes.length > 0 && (nodeSortType !== currentSortType || nodeSortOrder !== currentSortOrder)) setNodes(providerNodes, nodeSortType, nodeSortOrder);
+	}, [
+		nodes,
+		providerNodes,
+		setNodes,
+		nodeSortType,
+		nodeSortOrder,
+		currentSortType,
+		currentSortOrder
+	]);
+	useEffect(() => {
+		if (defaultLevel > 1) openLevel(defaultLevel);
+	}, [defaultLevel]);
+	const handleActiveNodeChange = useCallback((node) => {
+		onActiveNodeChange?.(node);
+		triggerEvent("sidebar:change", { node }, sidebarRef.current);
+	}, [onActiveNodeChange, sidebarRef]);
+	useEffect(() => {
+		syncActiveNodeId(activeNodeId);
+	}, [activeNodeId, syncActiveNodeId]);
+	useEffect(() => {
+		setActiveNodeChangeCallback(handleActiveNodeChange);
+	}, [handleActiveNodeChange, setActiveNodeChangeCallback]);
+	useEffect(() => {
+		const hasPinnedNodes = pinnedNodePath.length > 0;
+		if (!allowPinning && hasPinnedNodes) {
+			const lastPinnedNodeId = pinnedNodePath[pinnedNodePath.length - 1].id;
+			togglePin(lastPinnedNodeId);
+		}
+	}, [
+		allowPinning,
+		pinnedNodePath,
+		togglePin
+	]);
+	return /* @__PURE__ */ jsxs("aside", {
+		ref: sidebarRef,
+		style: { width: "min(100%, var(--sidebar-width))" },
+		className: twMerge("group peer relative flex h-svh max-h-screen flex-col bg-gray-50 shadow-lg transition-[width] duration-75 ease-linear dark:bg-slate-600", isResizing && "transition-none", className),
+		children: [isSidebarOpen && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(SidebarHeader, {
+				sidebarTitle,
+				sidebarIcon,
+				enableMacros,
+				handleOnTitleClick
+			}),
+			allowPinning && pinnedNodePath.length > 0 && /* @__PURE__ */ jsx(SidebarPinningArea, {}),
+			/* @__PURE__ */ jsx(SidebarContentArea, {
+				allowPinning,
+				isLoading
+			}),
+			showSearchBar && /* @__PURE__ */ jsx(SidebarSearch, { showStatusFilter }),
+			extraFooterContent && /* @__PURE__ */ jsx("div", {
+				className: "w-full border-t border-gray-300 p-2 dark:border-slate-800",
+				children: extraFooterContent
+			})
+		] }), resizable && /* @__PURE__ */ jsx("div", {
+			className: "group/sidebar-resizer absolute top-0 right-0 h-full w-[10px] translate-x-1/2 cursor-ew-resize select-none",
+			onMouseDown: startResizing,
+			children: /* @__PURE__ */ jsx("div", {
+				className: twMerge("relative h-full w-px translate-x-[5px] transition-colors group-hover/sidebar-resizer:bg-gray-500 dark:group-hover/sidebar-resizer:bg-slate-600", isResizing && "cursor-default bg-blue-500", !isSidebarOpen && "bg-gray-300 dark:bg-slate-600"),
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: twMerge("absolute top-14 right-0 size-4 translate-x-1/2 rounded-full bg-gray-500 dark:bg-slate-900", "opacity-0 transition-opacity group-hover/sidebar-resizer:opacity-100"),
+					onClick: handleToggleSidebar,
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "Caret",
+						size: 16,
+						className: twMerge("min-w-4 text-gray-50 dark:text-slate-500", isSidebarOpen && "-rotate-180")
+					})
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { Sidebar };
+
+//# sourceMappingURL=sidebar.js.map

package/dist/ui/components/sidebar/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","names":["useCallback","useEffect","twMerge","Icon","SidebarContentArea","SidebarHeader","SidebarPinningArea","useSidebar","SidebarSearch","useSidebarResize","triggerEvent","Sidebar","activeNodeId","onActiveNodeChange","nodes","sidebarIcon","sidebarTitle","defaultLevel","enableMacros","allowPinning","resizable","showSearchBar","showStatusFilter","extraFooterContent","initialWidth","maxWidth","className","handleOnTitleClick","isLoading","nodeSortType","nodeSortOrder","sidebarRef","startResizing","isResizing","isSidebarOpen","handleToggleSidebar","defaultWidth","minWidth","pinnedNodePath","setNodes","openLevel","togglePin","syncActiveNodeId","setActiveNodeChangeCallback","providerNodes","currentSortType","currentSortOrder","length","handleActiveNodeChange","node","current","hasPinnedNodes","lastPinnedNodeId","id","width"],"sources":["../../../../src/ui/components/sidebar/sidebar.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Icon } from \"../../../powerhouse/index.js\";\nimport { SidebarContentArea } from \"./subcomponents/sidebar-content-area.js\";\nimport { SidebarHeader } from \"./subcomponents/sidebar-header.js\";\nimport { SidebarPinningArea } from \"./subcomponents/sidebar-pinning-area.js\";\nimport { useSidebar } from \"./subcomponents/sidebar-provider/index.js\";\nimport { SidebarSearch } from \"./subcomponents/sidebar-search/index.js\";\nimport type { NodeSortOrder, NodeSortType, SidebarNode } from \"./types.js\";\nimport { useSidebarResize } from \"./use-sidebar-resize.js\";\nimport { triggerEvent } from \"./utils.js\";\n\nexport interface SidebarProps {\n  /**\n   * The ID of the currently active node\n   */\n  activeNodeId?: string;\n  /**\n   * Callback function to update the active node\n   */\n  onActiveNodeChange?: (newNode: SidebarNode) => void;\n  /**\n   * The nodes to be displayed in the sidebar\n   */\n  nodes?: SidebarNode[];\n  /**\n   * Which level should be shown by default (i.e., level 1).\n   * @default 1 It is 1-indexed.\n   */\n  defaultLevel?: number;\n  /**\n   * Enables the vertical resizing of the sidebar\n   * @default true\n   */\n  resizable?: boolean;\n  /**\n   * Whether pinning functionality is enabled for nodes\n   * @default true\n   */\n  allowPinning?: boolean;\n  /**\n   * Configurable levels (e.g., 4). If its zero, then no buttons are shown (default).\n   * @default 0\n   */\n  enableMacros?: number;\n  /**\n   * Whether to display the search bar in the sidebar\n   * @default true\n   */\n  showSearchBar?: boolean;\n  /**\n   * Whether to display the status filter button in the sidebar. This option is ignored if `showSearchBar` is `false`.\n   * @default false\n   */\n  showStatusFilter?: boolean;\n  /**\n   * The title that appears at the top of the sidebar, providing context or a heading for the hierarchy displayed within it.\n   */\n  sidebarTitle?: string;\n  /**\n   * An optional icon that can be displayed next to the sidebar title or at the top of the sidebar.\n   */\n  sidebarIcon?: React.ReactNode;\n  /**\n   * An optional footer content that can be displayed at the bottom of the sidebar.\n   */\n  extraFooterContent?: React.ReactNode;\n  /**\n   * The initial width of the sidebar.\n   * @default 300\n   */\n  initialWidth?: number;\n  /**\n   * The maximum width of the sidebar.\n   */\n  maxWidth?: number;\n  /**\n   * Optional className for the sidebar container\n   */\n  className?: string;\n\n  /**\n   * Callback function triggered when the sidebar title is clicked.\n   */\n  handleOnTitleClick?: () => void;\n\n  /**\n   * Whether the sidebar is in a loading state, displaying skeleton items\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * The type of sorting to apply to all nodes recursively.\n   * Can be \"alphabetical\", \"natural\", or a custom comparison function.\n   * When undefined, nodes maintain their original order.\n   * Affects all levels of the tree hierarchy.\n   */\n  nodeSortType?: NodeSortType;\n  /**\n   * The order direction for sorting nodes (\"asc\" or \"desc\").\n   * Only applicable when nodeSortType is defined.\n   * @default \"asc\"\n   */\n  nodeSortOrder?: NodeSortOrder;\n}\n\n/**\n * Sidebar component that provides a collapsible and resizable navigation panel\n * with support for hierarchical data, search, pinning, and custom styling.\n */\nexport const Sidebar: React.FC<SidebarProps> = ({\n  activeNodeId,\n  onActiveNodeChange,\n  nodes,\n  sidebarIcon,\n  sidebarTitle,\n  defaultLevel = 1,\n  enableMacros = 0,\n  allowPinning = true,\n  resizable = true,\n  showSearchBar = true,\n  showStatusFilter = false,\n  extraFooterContent,\n  initialWidth = 300,\n  maxWidth,\n  className,\n  handleOnTitleClick,\n  isLoading = false,\n  nodeSortType,\n  nodeSortOrder = \"asc\",\n}) => {\n  const {\n    sidebarRef,\n    startResizing,\n    isResizing,\n    isSidebarOpen,\n    handleToggleSidebar,\n  } = useSidebarResize({\n    defaultWidth: initialWidth,\n    minWidth: 220,\n    maxWidth,\n  });\n\n  const {\n    pinnedNodePath,\n    setNodes,\n    openLevel,\n    togglePin,\n    syncActiveNodeId,\n    setActiveNodeChangeCallback,\n    nodes: providerNodes,\n    nodeSortType: currentSortType,\n    nodeSortOrder: currentSortOrder,\n  } = useSidebar();\n\n  useEffect(() => {\n    if (nodes) {\n      setNodes(nodes, nodeSortType, nodeSortOrder);\n    }\n  }, [nodes, setNodes, nodeSortType, nodeSortOrder]);\n\n  useEffect(() => {\n    if (\n      !nodes &&\n      providerNodes.length > 0 &&\n      (nodeSortType !== currentSortType || nodeSortOrder !== currentSortOrder)\n    ) {\n      setNodes(providerNodes, nodeSortType, nodeSortOrder);\n    }\n  }, [\n    nodes,\n    providerNodes,\n    setNodes,\n    nodeSortType,\n    nodeSortOrder,\n    currentSortType,\n    currentSortOrder,\n  ]);\n\n  // Initialize default expanded level on mount.\n  // openLevel intentionally omitted — it changes every time currentRoots\n  // changes, which would cause an infinite loop.\n  useEffect(() => {\n    if (defaultLevel > 1) {\n      openLevel(defaultLevel);\n    }\n  }, [defaultLevel]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleActiveNodeChange = useCallback(\n    (node: SidebarNode) => {\n      onActiveNodeChange?.(node);\n      triggerEvent(\"sidebar:change\", { node }, sidebarRef.current);\n    },\n    [onActiveNodeChange, sidebarRef],\n  );\n  useEffect(() => {\n    syncActiveNodeId(activeNodeId);\n  }, [activeNodeId, syncActiveNodeId]);\n\n  useEffect(() => {\n    setActiveNodeChangeCallback(handleActiveNodeChange);\n  }, [handleActiveNodeChange, setActiveNodeChangeCallback]);\n\n  useEffect(() => {\n    const hasPinnedNodes = pinnedNodePath.length > 0;\n    if (!allowPinning && hasPinnedNodes) {\n      const lastPinnedNodeId = pinnedNodePath[pinnedNodePath.length - 1].id;\n      togglePin(lastPinnedNodeId);\n    }\n  }, [allowPinning, pinnedNodePath, togglePin]);\n\n  return (\n    <aside\n      ref={sidebarRef}\n      style={{ width: \"min(100%, var(--sidebar-width))\" }}\n      className={twMerge(\n        \"group peer relative flex h-svh max-h-screen flex-col bg-gray-50 shadow-lg transition-[width] duration-75 ease-linear dark:bg-slate-600\",\n        isResizing && \"transition-none\",\n        className,\n      )}\n    >\n      {isSidebarOpen && (\n        <>\n          <SidebarHeader\n            sidebarTitle={sidebarTitle}\n            sidebarIcon={sidebarIcon}\n            enableMacros={enableMacros}\n            handleOnTitleClick={handleOnTitleClick}\n          />\n\n          {allowPinning && pinnedNodePath.length > 0 && <SidebarPinningArea />}\n          <SidebarContentArea\n            allowPinning={allowPinning}\n            isLoading={isLoading}\n          />\n          {showSearchBar && (\n            <SidebarSearch showStatusFilter={showStatusFilter} />\n          )}\n          {extraFooterContent && (\n            <div className=\"w-full border-t border-gray-300 p-2 dark:border-slate-800\">\n              {extraFooterContent}\n            </div>\n          )}\n        </>\n      )}\n\n      {resizable && (\n        <div\n          className=\"group/sidebar-resizer absolute top-0 right-0 h-full w-[10px] translate-x-1/2 cursor-ew-resize select-none\"\n          onMouseDown={startResizing}\n        >\n          <div\n            className={twMerge(\n              \"relative h-full w-px translate-x-[5px] transition-colors group-hover/sidebar-resizer:bg-gray-500 dark:group-hover/sidebar-resizer:bg-slate-600\",\n              isResizing && \"cursor-default bg-blue-500\",\n              !isSidebarOpen && \"bg-gray-300 dark:bg-slate-600\",\n            )}\n          >\n            <button\n              type=\"button\"\n              className={twMerge(\n                \"absolute top-14 right-0 size-4 translate-x-1/2 rounded-full bg-gray-500 dark:bg-slate-900\",\n                \"opacity-0 transition-opacity group-hover/sidebar-resizer:opacity-100\",\n              )}\n              onClick={handleToggleSidebar}\n            >\n              <Icon\n                name=\"Caret\"\n                size={16}\n                className={twMerge(\n                  \"min-w-4 text-gray-50 dark:text-slate-500\",\n                  isSidebarOpen && \"-rotate-180\",\n                )}\n              />\n            </button>\n          </div>\n        </div>\n      )}\n    </aside>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA8GA,MAAaW,WAAmC,EAC9CC,cACAC,oBACAC,OACAC,aACAC,cACAC,eAAe,GACfC,eAAe,GACfC,eAAe,MACfC,YAAY,MACZC,gBAAgB,MAChBC,mBAAmB,OACnBC,oBACAC,eAAe,KACfC,UACAC,WACAC,oBACAC,YAAY,OACZC,cACAC,gBAAgB,YACZ;CACJ,MAAM,EACJC,YACAC,eACAC,YACAC,eACAC,wBACE1B,iBAAiB;EACnB2B,cAAcZ;EACda,UAAU;EACVZ;EACD,CAAC;CAEF,MAAM,EACJa,gBACAC,UACAC,WACAC,WACAC,kBACAC,6BACA7B,OAAO8B,eACPf,cAAcgB,iBACdf,eAAegB,qBACbvC,YAAY;AAEhBN,iBAAgB;AACd,MAAIa,MACFyB,UAASzB,OAAOe,cAAcC,cAAc;IAE7C;EAAChB;EAAOyB;EAAUV;EAAcC;EAAc,CAAC;AAElD7B,iBAAgB;AACd,MACE,CAACa,SACD8B,cAAcG,SAAS,MACtBlB,iBAAiBgB,mBAAmBf,kBAAkBgB,kBAEvDP,UAASK,eAAef,cAAcC,cAAc;IAErD;EACDhB;EACA8B;EACAL;EACAV;EACAC;EACAe;EACAC;EACD,CAAC;AAKF7C,iBAAgB;AACd,MAAIgB,eAAe,EACjBuB,WAAUvB,aAAa;IAExB,CAACA,aAAa,CAAC;CAElB,MAAM+B,yBAAyBhD,aAC5BiD,SAAsB;AACrBpC,uBAAqBoC,KAAK;AAC1BvC,eAAa,kBAAkB,EAAEuC,MAAM,EAAElB,WAAWmB,QAAQ;IAE9D,CAACrC,oBAAoBkB,WACvB,CAAC;AACD9B,iBAAgB;AACdyC,mBAAiB9B,aAAa;IAC7B,CAACA,cAAc8B,iBAAiB,CAAC;AAEpCzC,iBAAgB;AACd0C,8BAA4BK,uBAAuB;IAClD,CAACA,wBAAwBL,4BAA4B,CAAC;AAEzD1C,iBAAgB;EACd,MAAMkD,iBAAiBb,eAAeS,SAAS;AAC/C,MAAI,CAAC5B,gBAAgBgC,gBAAgB;GACnC,MAAMC,mBAAmBd,eAAeA,eAAeS,SAAS,GAAGM;AACnEZ,aAAUW,iBAAiB;;IAE5B;EAACjC;EAAcmB;EAAgBG;EAAU,CAAC;AAE7C,QACE,qBAAC,SAAD;EACE,KAAKV;EACL,OAAO,EAAEuB,OAAO,mCAAmC;EACnD,WAAWpD,QACT,0IACA+B,cAAc,mBACdP,UACD;YAPH,CASGQ,iBACC,qBAAA,YAAA,EAAA,UAAA;GACE,oBAAC,eAAD;IACgBlB;IACDD;IACCG;IACMS;IAAmB,CAAA;GAGxCR,gBAAgBmB,eAAeS,SAAS,KAAK,oBAAC,oBAAD,EAAsB,CAAA;GACpE,oBAAC,oBAAD;IACgB5B;IACHS;IAAU,CAAA;GAEtBP,iBACC,oBAAC,eAAD,EAAiCC,kBAClC,CAAA;GACAC,sBACC,oBAAC,OAAD;IAAK,WAAU;cACZA;IAEJ,CAAA;GAEJ,EAAA,CAAA,EAEAH,aACC,oBAAC,OAAD;GACE,WAAU;GACV,aAAaY;aAEb,oBAAC,OAAD;IACE,WAAW9B,QACT,kJACA+B,cAAc,8BACd,CAACC,iBAAiB,gCACnB;cAED,oBAAC,UAAD;KACE,MAAK;KACL,WAAWhC,QACT,6FACA,uEACD;KACD,SAASiC;eAET,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAWjC,QACT,4CACAgC,iBAAiB,cAClB;MAAC,CAAA;KAEE,CAAA;IACL,CAAA;GAER,CAAA,CACK"}

package/dist/ui/components/sidebar/subcomponents/sidebar-content-area.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/components/sidebar/subcomponents/sidebar-content-area.d.ts
+interface SidebarContentAreaProps {
+  allowPinning?: boolean;
+  isLoading?: boolean;
+}
+declare const SidebarContentArea: ({
+  allowPinning,
+  isLoading
+}: SidebarContentAreaProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SidebarContentArea };
+//# sourceMappingURL=sidebar-content-area.d.ts.map

package/dist/ui/components/sidebar/subcomponents/sidebar-content-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-content-area.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-content-area.tsx"],"mappings":";;;UAOU,uBAAA;EACR,YAAA;EACA,SAAA;AAAA;AAAA,cAGW,kBAAA;EAAsB,YAAA;EAAA;AAAA,GAGhC,uBAAA,KAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-content-area.js

@@ -0,0 +1,56 @@
+import { t as Icon } from "../../../../icon-C4QOpsdI.js";
+import { SidebarItem } from "./sidebar-item.js";
+import { useSidebar } from "./sidebar-provider/sidebar-provider.js";
+import { SidebarSkeleton } from "./sidebar-skeleton.js";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AutoSizer, List } from "react-virtualized";
+//#region src/ui/components/sidebar/subcomponents/sidebar-content-area.tsx
+const SidebarContentArea = ({ allowPinning, isLoading }) => {
+	const { flattenedNodes, toggleNode, togglePin, searchTerm, searchResults, activeSearchIndex, pinnedNodePath, activeNodeId, virtualListRef, onActiveNodeChange } = useSidebar();
+	const hasPinnedItems = allowPinning && pinnedNodePath.length > 0;
+	const renderNode = ({ index, key, style }) => {
+		const node = flattenedNodes[index];
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			node,
+			toggleNode,
+			togglePin,
+			searchTerm,
+			searchResults,
+			activeSearchIndex,
+			allowPinning: allowPinning ?? false,
+			isActive: activeNodeId === node.id,
+			onChange: onActiveNodeChange,
+			style
+		}, key);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: twMerge("flex flex-1 flex-col gap-1 overflow-y-auto", hasPinnedItems && "pt-0.5"),
+		children: isLoading ? /* @__PURE__ */ jsx(SidebarSkeleton, {}) : flattenedNodes.length === 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "flex max-w-full items-center gap-2 p-2 text-sm/5 text-gray-400 dark:text-slate-400",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: "TreeViewSlash",
+				size: 16,
+				className: "min-w-4"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: "This node is empty"
+			})]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-hidden",
+			children: /* @__PURE__ */ jsx(AutoSizer, { children: ({ width, height }) => /* @__PURE__ */ jsx(List, {
+				ref: virtualListRef,
+				className: "p-2",
+				width,
+				height,
+				rowCount: flattenedNodes.length,
+				rowHeight: 40,
+				rowRenderer: renderNode
+			}) })
+		})
+	});
+};
+//#endregion
+export { SidebarContentArea };
+
+//# sourceMappingURL=sidebar-content-area.js.map

package/dist/ui/components/sidebar/subcomponents/sidebar-content-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-content-area.js","names":["AutoSizer","List","twMerge","SidebarItem","useSidebar","SidebarSkeleton","Icon","SidebarContentArea","allowPinning","isLoading","flattenedNodes","toggleNode","togglePin","searchTerm","searchResults","activeSearchIndex","pinnedNodePath","activeNodeId","virtualListRef","onActiveNodeChange","hasPinnedItems","length","renderNode","index","key","style","node","id","width","height"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-content-area.tsx"],"sourcesContent":["import { AutoSizer, List } from \"react-virtualized\";\nimport { twMerge } from \"tailwind-merge\";\nimport { SidebarItem } from \"./sidebar-item.js\";\nimport { useSidebar } from \"./sidebar-provider/index.js\";\nimport { SidebarSkeleton } from \"./sidebar-skeleton.js\";\nimport { Icon } from \"../../../../powerhouse/index.js\";\n\ninterface SidebarContentAreaProps {\n  allowPinning?: boolean;\n  isLoading?: boolean;\n}\n\nexport const SidebarContentArea = ({\n  allowPinning,\n  isLoading,\n}: SidebarContentAreaProps) => {\n  const {\n    flattenedNodes,\n    toggleNode,\n    togglePin,\n    searchTerm,\n    searchResults,\n    activeSearchIndex,\n    pinnedNodePath,\n    activeNodeId,\n    virtualListRef,\n    onActiveNodeChange,\n  } = useSidebar();\n  const hasPinnedItems = allowPinning && pinnedNodePath.length > 0;\n\n  const renderNode = ({\n    index,\n    key,\n    style,\n  }: {\n    index: number;\n    key: string;\n    style: React.CSSProperties;\n  }) => {\n    const node = flattenedNodes[index];\n\n    return (\n      <SidebarItem\n        key={key}\n        node={node}\n        toggleNode={toggleNode}\n        togglePin={togglePin}\n        searchTerm={searchTerm}\n        searchResults={searchResults}\n        activeSearchIndex={activeSearchIndex}\n        allowPinning={allowPinning ?? false}\n        isActive={activeNodeId === node.id}\n        onChange={onActiveNodeChange}\n        style={style}\n      />\n    );\n  };\n\n  return (\n    <div\n      className={twMerge(\n        \"flex flex-1 flex-col gap-1 overflow-y-auto\",\n        hasPinnedItems && \"pt-0.5\",\n      )}\n    >\n      {isLoading ? (\n        <SidebarSkeleton />\n      ) : flattenedNodes.length === 0 ? (\n        <div className=\"flex max-w-full items-center gap-2 p-2 text-sm/5 text-gray-400 dark:text-slate-400\">\n          <Icon name=\"TreeViewSlash\" size={16} className=\"min-w-4\" />\n          <span className=\"truncate\">This node is empty</span>\n        </div>\n      ) : (\n        <div className=\"flex-1 overflow-hidden\">\n          <AutoSizer>\n            {({ width, height }) => (\n              <List\n                ref={virtualListRef}\n                className=\"p-2\"\n                width={width}\n                height={height}\n                rowCount={flattenedNodes.length}\n                rowHeight={32 + 8}\n                rowRenderer={renderNode}\n              />\n            )}\n          </AutoSizer>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,MAAaO,sBAAsB,EACjCC,cACAC,gBAC6B;CAC7B,MAAM,EACJC,gBACAC,YACAC,WACAC,YACAC,eACAC,mBACAC,gBACAC,cACAC,gBACAC,uBACEf,YAAY;CAChB,MAAMgB,iBAAiBZ,gBAAgBQ,eAAeK,SAAS;CAE/D,MAAMC,cAAc,EAClBC,OACAC,KACAC,YAKI;EACJ,MAAMC,OAAOhB,eAAea;AAE5B,SACE,oBAAC,aAAD;GAEQG;GACMf;GACDC;GACCC;GACGC;GACIC;GACnB,cAAcP,gBAAgB;GAC9B,UAAUS,iBAAiBS,KAAKC;GAChC,UAAUR;GACHM;GACP,EAXKD,IAWL;;AAIN,QACE,oBAAC,OAAD;EACE,WAAWtB,QACT,8CACAkB,kBAAkB,SACnB;YAEAX,YACC,oBAAC,iBAAD,EAAmB,CAAA,GACjBC,eAAeW,WAAW,IAC5B,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,MAAD;IAAM,MAAK;IAAgB,MAAM;IAAI,WAAU;IAAS,CAAA,EACxD,oBAAC,QAAD;IAAM,WAAU;cAAW;IAAwB,CAAA,CAC/C;OAEN,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,WAAD,EAAA,WACI,EAAEO,OAAOC,aACT,oBAAC,MAAD;IACE,KAAKX;IACL,WAAU;IACHU;IACCC;IACR,UAAUnB,eAAeW;IACzB,WAAW;IACX,aAAaC;IAEhB,CAAA,EACQ,CAAA;GAEd,CAAA;EACG,CAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-header.d.ts

@@ -0,0 +1,11 @@
+//#region src/ui/components/sidebar/subcomponents/sidebar-header.d.ts
+interface SidebarHeaderProps {
+  sidebarTitle?: string;
+  sidebarIcon?: React.ReactNode;
+  enableMacros?: number;
+  handleOnTitleClick?: () => void;
+}
+declare const SidebarHeader: React.FC<SidebarHeaderProps>;
+//#endregion
+export { SidebarHeader };
+//# sourceMappingURL=sidebar-header.d.ts.map

package/dist/ui/components/sidebar/subcomponents/sidebar-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-header.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-header.tsx"],"mappings":";UAGU,kBAAA;EACR,YAAA;EACA,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,YAAA;EACA,kBAAA;AAAA;AAAA,cAGW,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-header.js

@@ -0,0 +1,45 @@
+import { useSidebar } from "./sidebar-provider/sidebar-provider.js";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/sidebar/subcomponents/sidebar-header.tsx
+const SidebarHeader = ({ sidebarTitle, sidebarIcon, enableMacros = 0, handleOnTitleClick }) => {
+	const { maxDepth, openLevel } = useSidebar();
+	if (!sidebarTitle && !sidebarIcon && !enableMacros) return null;
+	let titleElement;
+	const baseTitleClasses = "truncate text-sm font-semibold text-gray-700 dark:text-slate-300";
+	if (handleOnTitleClick) titleElement = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: twMerge(baseTitleClasses, "cursor-pointer"),
+		onClick: handleOnTitleClick,
+		children: sidebarTitle
+	});
+	else titleElement = /* @__PURE__ */ jsx("div", {
+		className: baseTitleClasses,
+		children: sidebarTitle
+	});
+	return /* @__PURE__ */ jsxs("header", {
+		className: "flex items-center justify-between gap-2 border-b border-gray-300 bg-gray-50 p-4 dark:border-slate-800 dark:bg-slate-600",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 truncate",
+			children: [sidebarIcon, titleElement]
+		}), enableMacros > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2 select-none",
+			children: Array.from({ length: Math.min(enableMacros, 4) }).map((_, index) => {
+				const isDisabled = index + 1 > maxDepth;
+				return /* @__PURE__ */ jsx("div", {
+					role: "button",
+					tabIndex: 0,
+					className: twMerge("w-[26px] rounded-lg bg-gray-50 p-1 text-center text-xs text-gray-100 dark:bg-slate-900 dark:text-slate-200", !isDisabled && "hover:bg-gray-100 hover:text-gray-200 dark:hover:bg-slate-600 dark:hover:text-slate-50", isDisabled && "cursor-not-allowed bg-gray-100 text-[#E2E4E7] dark:bg-[#252728] dark:text-slate-500"),
+					onClick: () => {
+						if (!isDisabled) openLevel(index + 1);
+					},
+					children: index + 1
+				}, `macro-${index}`);
+			})
+		})]
+	});
+};
+//#endregion
+export { SidebarHeader };
+
+//# sourceMappingURL=sidebar-header.js.map

package/dist/ui/components/sidebar/subcomponents/sidebar-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-header.js","names":["twMerge","useSidebar","SidebarHeader","sidebarTitle","sidebarIcon","enableMacros","handleOnTitleClick","maxDepth","openLevel","titleElement","baseTitleClasses","Array","from","length","Math","min","map","_","index","isDisabled"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-header.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport { useSidebar } from \"./sidebar-provider/index.js\";\n\ninterface SidebarHeaderProps {\n  sidebarTitle?: string;\n  sidebarIcon?: React.ReactNode;\n  enableMacros?: number;\n  handleOnTitleClick?: () => void;\n}\n\nexport const SidebarHeader: React.FC<SidebarHeaderProps> = ({\n  sidebarTitle,\n  sidebarIcon,\n  enableMacros = 0,\n  handleOnTitleClick,\n}) => {\n  const { maxDepth, openLevel } = useSidebar();\n  if (!sidebarTitle && !sidebarIcon && !enableMacros) {\n    return null;\n  }\n  let titleElement;\n  const baseTitleClasses =\n    \"truncate text-sm font-semibold text-gray-700 dark:text-slate-300\";\n  if (handleOnTitleClick) {\n    titleElement = (\n      <button\n        type=\"button\"\n        className={twMerge(baseTitleClasses, \"cursor-pointer\")}\n        onClick={handleOnTitleClick}\n      >\n        {sidebarTitle}\n      </button>\n    );\n  } else {\n    titleElement = <div className={baseTitleClasses}>{sidebarTitle}</div>;\n  }\n\n  return (\n    <header className=\"flex items-center justify-between gap-2 border-b border-gray-300 bg-gray-50 p-4 dark:border-slate-800 dark:bg-slate-600\">\n      <div className=\"flex items-center gap-2 truncate\">\n        {sidebarIcon}\n        {titleElement}\n      </div>\n\n      {enableMacros > 0 && (\n        <div className=\"flex items-center gap-2 select-none\">\n          {Array.from({ length: Math.min(enableMacros, 4) }).map((_, index) => {\n            const isDisabled = index + 1 > maxDepth;\n\n            return (\n              <div\n                key={`macro-${index}`}\n                role=\"button\"\n                tabIndex={0}\n                className={twMerge(\n                  \"w-[26px] rounded-lg bg-gray-50 p-1 text-center text-xs text-gray-100 dark:bg-slate-900 dark:text-slate-200\",\n                  !isDisabled &&\n                    \"hover:bg-gray-100 hover:text-gray-200 dark:hover:bg-slate-600 dark:hover:text-slate-50\",\n                  isDisabled &&\n                    \"cursor-not-allowed bg-gray-100 text-[#E2E4E7] dark:bg-[#252728] dark:text-slate-500\",\n                )}\n                onClick={() => {\n                  if (!isDisabled) {\n                    openLevel(index + 1);\n                  }\n                }}\n              >\n                {index + 1}\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </header>\n  );\n};\n"],"mappings":";;;;AAUA,MAAaE,iBAA+C,EAC1DC,cACAC,aACAC,eAAe,GACfC,yBACI;CACJ,MAAM,EAAEC,UAAUC,cAAcP,YAAY;AAC5C,KAAI,CAACE,gBAAgB,CAACC,eAAe,CAACC,aACpC,QAAO;CAET,IAAII;CACJ,MAAMC,mBACJ;AACF,KAAIJ,mBACFG,gBACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAWT,QAAQU,kBAAkB,iBAAiB;EACtD,SAASJ;YAERH;EAEJ,CAAA;KAEDM,gBAAe,oBAAC,OAAD;EAAK,WAAWC;YAAmBP;EAAmB,CAAA;AAGvE,QACE,qBAAC,UAAD;EAAQ,WAAU;YAAlB,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACGC,aACAK,aACE;MAEJJ,eAAe,KACd,oBAAC,OAAD;GAAK,WAAU;aACZM,MAAMC,KAAK,EAAEC,QAAQC,KAAKC,IAAIV,cAAc,EAAC,EAAG,CAAC,CAACW,KAAKC,GAAGC,UAAU;IACnE,MAAMC,aAAaD,QAAQ,IAAIX;AAE/B,WACE,oBAAC,OAAD;KAEE,MAAK;KACL,UAAU;KACV,WAAWP,QACT,8GACA,CAACmB,cACC,0FACFA,cACE,sFACH;KACD,eAAe;AACb,UAAI,CAACA,WACHX,WAAUU,QAAQ,EAAE;;eAIvBA,QAAQ;KACL,EAjBC,SAASA,QAiBV;KAER;GAEL,CAAA,CACM"}

package/dist/ui/components/sidebar/subcomponents/sidebar-item.d.ts

@@ -0,0 +1,35 @@
+import { s as SidebarNode, t as FlattenedNode } from "../../../../types-CNbvfWjh.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/components/sidebar/subcomponents/sidebar-item.d.ts
+interface SidebarItemProps {
+  node: FlattenedNode;
+  toggleNode?: (nodeId: string) => void;
+  togglePin: (nodeId: string) => void;
+  searchTerm: string;
+  searchResults: SidebarNode[];
+  activeSearchIndex: number;
+  allowPinning: boolean;
+  pinnedMode?: boolean;
+  isPinned?: boolean;
+  isActive?: boolean;
+  style?: React.CSSProperties;
+  onChange?: (node: SidebarNode) => void;
+}
+declare const SidebarItem: ({
+  node,
+  toggleNode,
+  togglePin,
+  searchTerm,
+  searchResults,
+  activeSearchIndex,
+  allowPinning,
+  pinnedMode,
+  isPinned,
+  isActive,
+  style,
+  onChange
+}: SidebarItemProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SidebarItem };
+//# sourceMappingURL=sidebar-item.d.ts.map

package/dist/ui/components/sidebar/subcomponents/sidebar-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-item.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-item.tsx"],"mappings":";;;;UAWU,gBAAA;EACR,IAAA,EAAM,aAAA;EACN,UAAA,IAAc,MAAA;EACd,SAAA,GAAY,MAAA;EACZ,UAAA;EACA,aAAA,EAAe,WAAA;EACf,iBAAA;EACA,YAAA;EACA,UAAA;EACA,QAAA;EACA,QAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAA;EACd,QAAA,IAAY,IAAA,EAAM,WAAA;AAAA;AAAA,cAMP,WAAA;EAAe,IAAA;EAAA,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,YAAA;EAAA,UAAA;EAAA,QAAA;EAAA,QAAA;EAAA,KAAA;EAAA;AAAA,GAazB,gBAAA,KAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}