@powerhousedao/design-system 6.2.3-dev.9 → 6.2.3-dev.91

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

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","names":["twMerge","React","useCallback","useId","Button","Command","FormDescription","FormGroup","FormLabel","FormMessageList","Popover","PopoverContent","PopoverTrigger","withFieldValidation","Content","SelectedContent","useSelectField","SelectFieldRaw","forwardRef","options","favoriteOptions","defaultValue","value","onChange","onBlur","id","propId","name","label","required","disabled","errors","warnings","multiple","selectionIcon","selectionIconPosition","searchable","description","placeholder","className","contentClassName","contentAlign","props","ref","prefix","selectedValues","isPopoverOpen","commandListRef","toggleOption","handleClear","toggleAll","handleOpenChange","onTriggerBlur","e","length","preventDefault","target","control","focus","open","document","activeElement","undefined","find","opt","SelectField","displayName"],"sources":["../../../../src/ui/components/select-field/select-field.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport React, { useCallback, useId } from \"react\";\nimport type { FieldErrorHandling, InputBaseProps } from \"../../types.js\";\nimport { Button } from \"../button/button.js\";\nimport { Command } from \"../command/command.js\";\nimport type { SelectOption, SelectProps } from \"../enum-field/types.js\";\nimport { FormDescription } from \"../form-description/form-description.js\";\nimport { FormGroup } from \"../form-group/form-group.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/popover.js\";\nimport { withFieldValidation } from \"../with-field-validation/with-field-validation.js\";\nimport { Content } from \"./content.js\";\nimport { SelectedContent } from \"./selected-content.js\";\nimport { useSelectField } from \"./use-select-field.js\";\n\ntype SelectFieldBaseProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  | keyof InputBaseProps<string | string[]>\n  | keyof FieldErrorHandling\n  | keyof SelectProps\n>;\n\nexport type SelectFieldProps = SelectFieldBaseProps &\n  InputBaseProps<string | string[]> &\n  FieldErrorHandling & {\n    options?: SelectOption[];\n    favoriteOptions?: SelectOption[];\n  } & Omit<SelectProps, \"options\" | \"favoriteOptions\">;\n\nexport const SelectFieldRaw = React.forwardRef<\n  HTMLButtonElement,\n  SelectFieldProps\n>(\n  (\n    {\n      // core functionality props\n      options = [],\n      favoriteOptions = [],\n      defaultValue,\n      value,\n      onChange,\n      onBlur,\n\n      // form-related props\n      id: propId,\n      name,\n      label,\n      required,\n      disabled,\n\n      // validation props\n      errors = [],\n      warnings = [],\n\n      // behavior props\n      multiple,\n      selectionIcon = \"auto\",\n      selectionIconPosition = \"left\",\n      searchable,\n\n      // display props\n      description,\n      placeholder,\n      className,\n      contentClassName,\n      contentAlign = \"start\",\n\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = propId ?? `${prefix}-select`;\n\n    const {\n      selectedValues,\n      isPopoverOpen,\n      commandListRef,\n      toggleOption,\n      handleClear,\n      toggleAll,\n      handleOpenChange,\n    } = useSelectField({\n      options,\n      multiple,\n      defaultValue,\n      value,\n      onChange,\n    });\n\n    const onTriggerBlur = useCallback(\n      (e: React.FocusEvent<HTMLButtonElement>) => {\n        if (!isPopoverOpen) {\n          // trigger the blur event when the trigger loses focus but the popover is not open,\n          // because when the popover is open, the trigger loses focus but the select as a component still has the focus\n          onBlur?.(e);\n        }\n      },\n      [onBlur, isPopoverOpen],\n    );\n\n    return (\n      <FormGroup>\n        {label && (\n          <FormLabel\n            htmlFor={id}\n            required={required}\n            disabled={disabled}\n            hasError={errors.length > 0}\n            inline={false}\n            onClick={(e) => {\n              e.preventDefault();\n              (e.target as HTMLLabelElement).control?.focus();\n            }}\n          >\n            {label}\n          </FormLabel>\n        )}\n        <Popover\n          open={isPopoverOpen}\n          onOpenChange={(open) => {\n            handleOpenChange(open);\n            // if the popover is closing and it was not by the trigger button\n            if (!open && document.activeElement?.id !== id) {\n              onBlur?.({ target: {} } as React.FocusEvent<HTMLButtonElement>);\n            }\n          }}\n        >\n          <PopoverTrigger asChild={true}>\n            {/* TODO: create a trigger component */}\n            <Button\n              id={id}\n              name={name}\n              type=\"button\"\n              role=\"combobox\"\n              onBlur={onTriggerBlur}\n              disabled={disabled}\n              aria-invalid={errors.length > 0}\n              aria-label={\n                label ? undefined : multiple ? \"Multi select\" : \"Select\"\n              }\n              aria-required={required}\n              aria-expanded={isPopoverOpen}\n              className={twMerge(\n                \"flex h-9 w-full items-center justify-between px-3 py-2\",\n                \"rounded-md border border-border bg-background\",\n                \"hover:hover-effect\",\n                \"hover:hover-effect\",\n                \"focus:ring-1 focus:ring-ring focus:ring-offset-0 focus:outline-none\",\n                \"focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0\",\n                disabled && [\n                  \"pointer-events-auto! cursor-not-allowed bg-background\",\n                  \"hover:hover-effect\",\n                ],\n                className,\n              )}\n              {...props}\n              ref={ref}\n            >\n              <SelectedContent\n                selectedValues={selectedValues}\n                options={[...favoriteOptions, ...options]}\n                multiple={multiple}\n                searchable={searchable}\n                placeholder={placeholder}\n                handleClear={handleClear}\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            align={contentAlign}\n            onEscapeKeyDown={(e) => {\n              e.preventDefault();\n              handleOpenChange(false);\n            }}\n            className={contentClassName}\n          >\n            <Command\n              defaultValue={\n                !multiple && selectedValues[0]\n                  ? options.find((opt) => opt.value === selectedValues[0])\n                      ?.label\n                  : undefined\n              }\n            >\n              <Content\n                favoriteOptions={favoriteOptions}\n                searchable={searchable}\n                commandListRef={commandListRef}\n                multiple={multiple}\n                selectedValues={selectedValues}\n                selectionIcon={selectionIcon}\n                selectionIconPosition={selectionIconPosition}\n                options={options}\n                toggleAll={toggleAll}\n                toggleOption={toggleOption}\n              />\n            </Command>\n          </PopoverContent>\n        </Popover>\n        {description && <FormDescription>{description}</FormDescription>}\n        {warnings.length > 0 && (\n          <FormMessageList messages={warnings} type=\"warning\" />\n        )}\n        {errors.length > 0 && (\n          <FormMessageList messages={errors} type=\"error\" />\n        )}\n      </FormGroup>\n    );\n  },\n);\n\nexport const SelectField =\n  withFieldValidation<SelectFieldProps>(SelectFieldRaw);\n\nSelectField.displayName = \"SelectField\";\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAaiB,iBAAiBhB,sBAAMiB,YAKhC,EAEEC,UAAU,EAAE,EACZC,kBAAkB,EAAE,EACpBC,cACAC,OACAC,UACAC,QAGAC,IAAIC,QACJC,MACAC,OACAC,UACAC,UAGAC,SAAS,EAAE,EACXC,WAAW,EAAE,EAGbC,UACAC,gBAAgB,QAChBC,wBAAwB,QACxBC,YAGAC,aACAC,aACAC,WACAC,kBACAC,eAAe,SAEf,GAAGC,SAELC,QACG;CACH,MAAMC,SAASzC,OAAO;CACtB,MAAMsB,KAAKC,UAAU,GAAGkB,OAAM;CAE9B,MAAM,EACJC,gBACAC,eACAC,gBACAC,cACAC,aACAC,WACAC,qBACEnC,eAAe;EACjBG;EACAc;EACAZ;EACAC;EACAC;EACD,CAAC;CAEF,MAAM6B,gBAAgBlD,aACnBmD,MAA2C;AAC1C,MAAI,CAACP,cAGHtB,UAAS6B,EAAE;IAGf,CAAC7B,QAAQsB,cACX,CAAC;AAED,QACE,qBAAC,WAAD,EAAA,UAAA;EACGlB,SACC,oBAAC,WAAD;GACE,SAASH;GACCI;GACAC;GACV,UAAUC,OAAOuB,SAAS;GAC1B,QAAQ;GACR,UAAUD,MAAM;AACdA,MAAEE,gBAAgB;AACjBF,MAAEG,OAA4BC,SAASC,OAAO;;aAGhD9B;GAEJ,CAAA;EACD,qBAAC,SAAD;GACE,MAAMkB;GACN,eAAea,SAAS;AACtBR,qBAAiBQ,KAAK;AAEtB,QAAI,CAACA,QAAQC,SAASC,eAAepC,OAAOA,GAC1CD,UAAS,EAAEgC,QAAQ,EAAC,EAA0C,CAAC;;aANrE,CAUE,oBAAC,gBAAD;IAAgB,SAAS;cAEvB,oBAAC,QAAD;KACM/B;KACEE;KACN,MAAK;KACL,MAAK;KACL,QAAQyB;KACEtB;KACV,gBAAcC,OAAOuB,SAAS;KAC9B,cACE1B,QAAQkC,KAAAA,IAAY7B,WAAW,iBAAiB;KAElD,iBAAeJ;KACf,iBAAeiB;KACf,WAAW9C,QACT,0DACA,iDACA,sBACA,sBACA,uEACA,4EACA8B,YAAY,CACV,yDACA,qBACD,EACDS,UACD;KACD,GAAIG;KACCC;eAEL,oBAAC,iBAAD;MACkBE;MAChB,SAAS,CAAC,GAAGzB,iBAAiB,GAAGD,QAAQ;MAC/Bc;MACEG;MACCE;MACAW;MAAY,CAAA;KAErB,CAAA;IACM,CAAA,EAChB,oBAAC,gBAAD;IACE,OAAOR;IACP,kBAAkBY,MAAM;AACtBA,OAAEE,gBAAgB;AAClBJ,sBAAiB,MAAM;;IAEzB,WAAWX;cAEX,oBAAC,SAAD;KACE,cACE,CAACP,YAAYY,eAAe,KACxB1B,QAAQ4C,MAAMC,QAAQA,IAAI1C,UAAUuB,eAAe,GAAG,EAClDjB,QACJkC,KAAAA;eAGN,oBAAC,SAAD;MACmB1C;MACLgB;MACIW;MACNd;MACMY;MACDX;MACQC;MACdhB;MACE+B;MACGF;MAAa,CAAA;KAEtB,CAAA;IACK,CAAA,CACT;;EACRX,eAAe,oBAAC,iBAAD,EAAA,UAAkBA,aAA8B,CAAA;EAC/DL,SAASsB,SAAS,KACjB,oBAAC,iBAAD;GAAiB,UAAUtB;GAAU,MAAK;GAC3C,CAAA;EACAD,OAAOuB,SAAS,KACf,oBAAC,iBAAD;GAAiB,UAAUvB;GAAQ,MAAK;GACzC,CAAA;EACS,EAAA,CAAA;EAGjB;AAED,MAAakC,cACXpD,oBAAsCI,eAAe;AAEvDgD,YAAYC,cAAc"}
+{"version":3,"file":"select-field.js","names":["twMerge","React","useCallback","useId","Button","Command","FormDescription","FormGroup","FormLabel","FormMessageList","Popover","PopoverContent","PopoverTrigger","withFieldValidation","Content","SelectedContent","useSelectField","SelectFieldRaw","forwardRef","options","favoriteOptions","defaultValue","value","onChange","onBlur","id","propId","name","label","required","disabled","errors","warnings","multiple","selectionIcon","selectionIconPosition","searchable","description","placeholder","className","contentClassName","contentAlign","props","ref","prefix","selectedValues","isPopoverOpen","commandListRef","toggleOption","handleClear","toggleAll","handleOpenChange","onTriggerBlur","e","length","preventDefault","target","control","focus","open","document","activeElement","undefined","find","opt","SelectField","displayName"],"sources":["../../../../src/ui/components/select-field/select-field.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport React, { useCallback, useId } from \"react\";\nimport type { FieldErrorHandling, InputBaseProps } from \"../../types.js\";\nimport { Button } from \"../button/button.js\";\nimport { Command } from \"../command/command.js\";\nimport type { SelectOption, SelectProps } from \"../enum-field/types.js\";\nimport { FormDescription } from \"../form-description/form-description.js\";\nimport { FormGroup } from \"../form-group/form-group.js\";\nimport { FormLabel } from \"../form-label/form-label.js\";\nimport { FormMessageList } from \"../form-message/message-list.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/popover.js\";\nimport { withFieldValidation } from \"../with-field-validation/with-field-validation.js\";\nimport { Content } from \"./content.js\";\nimport { SelectedContent } from \"./selected-content.js\";\nimport { useSelectField } from \"./use-select-field.js\";\n\ntype SelectFieldBaseProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  | keyof InputBaseProps<string | string[]>\n  | keyof FieldErrorHandling\n  | keyof SelectProps\n>;\n\nexport type SelectFieldProps = SelectFieldBaseProps &\n  InputBaseProps<string | string[]> &\n  FieldErrorHandling & {\n    options?: SelectOption[];\n    favoriteOptions?: SelectOption[];\n  } & Omit<SelectProps, \"options\" | \"favoriteOptions\">;\n\nexport const SelectFieldRaw = React.forwardRef<\n  HTMLButtonElement,\n  SelectFieldProps\n>(\n  (\n    {\n      // core functionality props\n      options = [],\n      favoriteOptions = [],\n      defaultValue,\n      value,\n      onChange,\n      onBlur,\n\n      // form-related props\n      id: propId,\n      name,\n      label,\n      required,\n      disabled,\n\n      // validation props\n      errors = [],\n      warnings = [],\n\n      // behavior props\n      multiple,\n      selectionIcon = \"auto\",\n      selectionIconPosition = \"left\",\n      searchable,\n\n      // display props\n      description,\n      placeholder,\n      className,\n      contentClassName,\n      contentAlign = \"start\",\n\n      ...props\n    },\n    ref,\n  ) => {\n    const prefix = useId();\n    const id = propId ?? `${prefix}-select`;\n\n    const {\n      selectedValues,\n      isPopoverOpen,\n      commandListRef,\n      toggleOption,\n      handleClear,\n      toggleAll,\n      handleOpenChange,\n    } = useSelectField({\n      options,\n      multiple,\n      defaultValue,\n      value,\n      onChange,\n    });\n\n    const onTriggerBlur = useCallback(\n      (e: React.FocusEvent<HTMLButtonElement>) => {\n        if (!isPopoverOpen) {\n          // trigger the blur event when the trigger loses focus but the popover is not open,\n          // because when the popover is open, the trigger loses focus but the select as a component still has the focus\n          onBlur?.(e);\n        }\n      },\n      [onBlur, isPopoverOpen],\n    );\n\n    return (\n      <FormGroup>\n        {label && (\n          <FormLabel\n            htmlFor={id}\n            required={required}\n            disabled={disabled}\n            hasError={errors.length > 0}\n            inline={false}\n            onClick={(e) => {\n              e.preventDefault();\n              (e.target as HTMLLabelElement).control?.focus();\n            }}\n          >\n            {label}\n          </FormLabel>\n        )}\n        <Popover\n          open={isPopoverOpen}\n          onOpenChange={(open) => {\n            handleOpenChange(open);\n            // if the popover is closing and it was not by the trigger button\n            if (!open && document.activeElement?.id !== id) {\n              onBlur?.({ target: {} } as React.FocusEvent<HTMLButtonElement>);\n            }\n          }}\n        >\n          <PopoverTrigger asChild={true}>\n            {/* TODO: create a trigger component */}\n            <Button\n              id={id}\n              name={name}\n              type=\"button\"\n              role=\"combobox\"\n              onBlur={onTriggerBlur}\n              disabled={disabled}\n              aria-invalid={errors.length > 0}\n              aria-label={\n                label ? undefined : multiple ? \"Multi select\" : \"Select\"\n              }\n              aria-required={required}\n              aria-expanded={isPopoverOpen}\n              className={twMerge(\n                \"flex h-9 w-full items-center justify-between px-3 py-2\",\n                \"rounded-md border border-border bg-background\",\n                \"hover:hover-effect\",\n                \"hover:hover-effect\",\n                \"focus:ring-1 focus:ring-ring focus:ring-offset-0 focus:outline-none\",\n                \"focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0\",\n                disabled && [\n                  \"pointer-events-auto! cursor-not-allowed bg-background\",\n                  \"hover:hover-effect\",\n                ],\n                className,\n              )}\n              {...props}\n              ref={ref}\n            >\n              <SelectedContent\n                selectedValues={selectedValues}\n                options={[...favoriteOptions, ...options]}\n                multiple={multiple}\n                searchable={searchable}\n                placeholder={placeholder}\n                handleClear={handleClear}\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            align={contentAlign}\n            onEscapeKeyDown={(e) => {\n              e.preventDefault();\n              handleOpenChange(false);\n            }}\n            className={contentClassName}\n          >\n            <Command\n              defaultValue={\n                !multiple && selectedValues[0]\n                  ? options.find((opt) => opt.value === selectedValues[0])\n                      ?.label\n                  : undefined\n              }\n            >\n              <Content\n                favoriteOptions={favoriteOptions}\n                searchable={searchable}\n                commandListRef={commandListRef}\n                multiple={multiple}\n                selectedValues={selectedValues}\n                selectionIcon={selectionIcon}\n                selectionIconPosition={selectionIconPosition}\n                options={options}\n                toggleAll={toggleAll}\n                toggleOption={toggleOption}\n              />\n            </Command>\n          </PopoverContent>\n        </Popover>\n        {description && <FormDescription>{description}</FormDescription>}\n        {warnings.length > 0 && (\n          <FormMessageList messages={warnings} type=\"warning\" />\n        )}\n        {errors.length > 0 && (\n          <FormMessageList messages={errors} type=\"error\" />\n        )}\n      </FormGroup>\n    );\n  },\n);\n\nexport const SelectField =\n  withFieldValidation<SelectFieldProps>(SelectFieldRaw);\n\nSelectField.displayName = \"SelectField\";\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAaiB,iBAAiBhB,oBAAMiB,YAKhC,EAEEC,UAAU,CAAA,GACVC,kBAAkB,CAAA,GAClBC,cACAC,OACAC,UACAC,QAGAC,IAAIC,QACJC,MACAC,OACAC,UACAC,UAGAC,SAAS,CAAA,GACTC,WAAW,CAAA,GAGXC,UACAC,gBAAgB,QAChBC,wBAAwB,QACxBC,YAGAC,aACAC,aACAC,WACAC,kBACAC,eAAe,SAEf,GAAGC,SAELC,QACG;CACH,MAAMC,SAASzC,MAAM;CACrB,MAAMsB,KAAKC,UAAU,GAAGkB,OAAM;CAE9B,MAAM,EACJC,gBACAC,eACAC,gBACAC,cACAC,aACAC,WACAC,qBACEnC,eAAe;EACjBG;EACAc;EACAZ;EACAC;EACAC;CACF,CAAC;CAED,MAAM6B,gBAAgBlD,aACnBmD,MAA2C;EAC1C,IAAI,CAACP,eAGHtB,SAAS6B,CAAC;CAEd,GACA,CAAC7B,QAAQsB,aAAa,CACxB;CAEA,OACE,qBAAC,WAAD,EAAA,UAAA;EACGlB,SACC,oBAAC,WAAD;GACE,SAASH;GACCI;GACAC;GACV,UAAUC,OAAOuB,SAAS;GAC1B,QAAQ;GACR,UAAUD,MAAM;IACdA,EAAEE,eAAe;IAChBF,EAAEG,OAA4BC,SAASC,MAAM;GAChD;GAEC9B,UAAAA;EACQ,CAAA;EAEb,qBAAC,SAAD;GACE,MAAMkB;GACN,eAAea,SAAS;IACtBR,iBAAiBQ,IAAI;IAErB,IAAI,CAACA,QAAQC,SAASC,eAAepC,OAAOA,IAC1CD,SAAS,EAAEgC,QAAQ,CAAC,EAAE,CAAwC;GAElE;GARF,UAAA,CAUE,oBAAC,gBAAD;IAAgB,SAAS;IAEvB,UAAA,oBAAC,QAAD;KACM/B;KACEE;KACN,MAAK;KACL,MAAK;KACL,QAAQyB;KACEtB;KACV,gBAAcC,OAAOuB,SAAS;KAC9B,cACE1B,QAAQkC,KAAAA,IAAY7B,WAAW,iBAAiB;KAElD,iBAAeJ;KACf,iBAAeiB;KACf,WAAW9C,QACT,0DACA,iDACA,sBACA,sBACA,uEACA,4EACA8B,YAAY,CACV,yDACA,oBAAoB,GAEtBS,SACF;KACA,GAAIG;KACCC;KAEL,UAAA,oBAAC,iBAAD;MACkBE;MAChB,SAAS,CAAC,GAAGzB,iBAAiB,GAAGD,OAAO;MAC9Bc;MACEG;MACCE;MACAW;KAAY,CAAA;IAErB,CAAA;GACM,CAAA,GAChB,oBAAC,gBAAD;IACE,OAAOR;IACP,kBAAkBY,MAAM;KACtBA,EAAEE,eAAe;KACjBJ,iBAAiB,KAAK;IACxB;IACA,WAAWX;IAEX,UAAA,oBAAC,SAAD;KACE,cACE,CAACP,YAAYY,eAAe,KACxB1B,QAAQ4C,MAAMC,QAAQA,IAAI1C,UAAUuB,eAAe,EAAE,CAAC,EAClDjB,QACJkC,KAAAA;KAGN,UAAA,oBAAC,SAAD;MACmB1C;MACLgB;MACIW;MACNd;MACMY;MACDX;MACQC;MACdhB;MACE+B;MACGF;KAAa,CAAA;IAEtB,CAAA;GACK,CAAA,CACT;;EACRX,eAAe,oBAAC,iBAAD,EAAA,UAAkBA,YAA6B,CAAA;EAC9DL,SAASsB,SAAS,KACjB,oBAAC,iBAAD;GAAiB,UAAUtB;GAAU,MAAK;EAAS,CAAA;EAEpDD,OAAOuB,SAAS,KACf,oBAAC,iBAAD;GAAiB,UAAUvB;GAAQ,MAAK;EAAO,CAAA;CAExC,EAAA,CAAA;AAEf,CACF;AAEA,MAAakC,cACXpD,oBAAsCI,cAAc;AAEtDgD,YAAYC,cAAc"}

package/dist/ui/components/select-field/selected-content.d.ts

@@ -1,2 +1,3 @@
-import { t as SelectedContent } from "../../../selected-content-CGsK5PR4.js";
-export { SelectedContent };
+import { t as SelectedContent } from "../../../selected-content-CSTFkQr9.js";
+export { SelectedContent };
+export {};

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

@@ -1,4 +1,4 @@
-import { t as Icon } from "../../../icon-C4QOpsdI.js";
+import { t as Icon } from "../../../icon-DQ2yrWYv.js";
 import React from "react";
 import { twMerge } from "tailwind-merge";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"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-foreground\">\n            {placeholder}\n          </span>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-foreground\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-foreground\"\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-foreground\",\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-foreground\"\n            />\n          </div>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-foreground\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-foreground\"\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,uCACA,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;KAAgC,CAAA;IAG/C,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-foreground\">\n            {placeholder}\n          </span>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-foreground\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-foreground\"\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-foreground\",\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-foreground\"\n            />\n          </div>\n        )}\n        {searchable ? (\n          <Icon\n            name=\"CaretSort\"\n            size={16}\n            className=\"cursor-pointer text-foreground\"\n          />\n        ) : (\n          <Icon\n            name=\"ChevronDown\"\n            size={16}\n            className=\"cursor-pointer text-foreground\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAeA,MAAaG,mBAAmD,EAC9DC,gBACAC,UAAU,CAAA,GACVC,UACAC,YACAC,aACAC,kBACI;CACJ,MAAMC,cACJC,kBAIG;EACH,IAAI,OAAOA,kBAAkB,UAC3B,OAAO,oBAAC,MAAD;GAAM,MAAMA;GAAe,MAAM;EAAG,CAAA;EAE7C,OAAOA,iBAAiB,oBAAC,eAAD,EAAe,WAAU,SAAQ,CAAA;CAC3D;CAEA,IAAIP,eAAeQ,WAAW,GAC5B,OACE,qBAAC,OAAD;EACE,WAAWX,QACT,oCACAO,cAAc,oBAAoB,aACpC;EAJF,UAAA,CAMGA,eACC,oBAAC,QAAD;GAAM,WAAU;GACbA,UAAAA;EACG,CAAA,GAEPD,aACC,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;EAAgC,CAAA,IAG5C,oBAAC,MAAD;GACE,MAAK;GACL,MAAM;GACN,WAAU;EAAgC,CAAA,CAG3C;;CAIT,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,OAAD;GACE,WAAWN,QACT,uCACA,CAACK,YAAY,yBACf;GAECF,UAAAA,eAAeS,KAAKC,OAAOC,UAAU;IACpC,MAAMC,SAASX,QAAQY,MAAMC,MAAMA,EAAEJ,UAAUA,KAAK;IACpD,OAAO,CAACR,WACN,qBAAC,MAAM,UAAP,EAAA,UAAA,CACGI,WAAWM,QAAQG,IAAI,GACxB,oBAAC,QAAD;KAAM,WAAU;KACbH,UAAAA,QAAQI;IACL,CAAA,CACQ,EAAA,GALKN,KAKL,IAEhB,oBAAC,QAAD;KAEE,WAAWb,QACT,yBACAc,UAAUX,eAAeQ,SAAS,KAAK,MACzC;KAECG,UAAAA,UAAUX,eAAeQ,SAAS,IAC/B,GAAGI,QAAQI,MAAK,KAChBJ,QAAQI;IACR,GATCN,KASD;GAEV,CAAC;EACE,CAAA,GACL,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACGR,YAAYF,eAAeQ,SAAS,KACnC,oBAAC,OAAD;IACE,UAAUS,MAAM;KACdA,EAAEC,eAAe;KACjBD,EAAEE,gBAAgB;KAClBd,YAAY;IACd;IACA,WAAU;IAEV,UAAA,oBAAC,MAAD;KACE,MAAK;KACL,MAAM;KACN,WAAU;IAAgC,CAAA;GAEzC,CAAA,GAENF,aACC,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;GAAgC,CAAA,IAG5C,oBAAC,MAAD;IACE,MAAK;IACL,MAAM;IACN,WAAU;GAAgC,CAAA,CAG3C;EACF,CAAA,CAAA;;AAET"}

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

@@ -1,6 +1,5 @@
-import { C as SelectProps } from "../../../../index--hDSfvJT.js";
+import { C as SelectProps } from "../../../../index-5FEr1tXH.js";
 import React from "react";
-
 //#region src/ui/components/select-field/subcomponents/CommandItemList.d.ts
 interface FavoriteOptionsProps {
   options: SelectProps["options"];
@@ -12,7 +11,7 @@ interface FavoriteOptionsProps {
   toggleOption: (value: string) => void;
   tabIndex?: number;
 }
-declare const CommandItemList: React.FC<FavoriteOptionsProps>;
+export declare const CommandItemList: React.FC<FavoriteOptionsProps>;
 //#endregion
-export { CommandItemList };
+export {};
 //# sourceMappingURL=CommandItemList.d.ts.map

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":";;;;UAOU,oBAAA;EACR,OAAA,EAAS,WAAA;EACT,cAAA;EACA,QAAA;EACA,aAAA;EACA,qBAAA;EACA,UAAA;EACA,YAAA,GAAe,KAAA;EACf,QAAA;AAAA;AAAA,cAyBW,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;EACR,SAAS;EACT;EACA;EACA;EACA;EACA;EACA,eAAe;EACf;;qBAyBW,iBAAiB,MAAM,GAAG"}

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

@@ -1,4 +1,4 @@
-import { t as Icon } from "../../../../icon-C4QOpsdI.js";
+import { t as Icon } from "../../../../icon-DQ2yrWYv.js";
 import { CommandItem } from "../../command/command.js";
 import "react";
 import { twMerge } from "tailwind-merge";

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

@@ -1 +1 @@
-{"version":3,"file":"CommandItemList.js","names":["Icon","React","twMerge","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 React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\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-foreground\")}\n      />\n    );\n  }\n  return (\n    IconComponent && (\n      <IconComponent className={twMerge(\"size-4\", \"text-foreground\")} />\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-accent\",\n              opt.disabled &&\n                \"pointer-events-auto! cursor-not-allowed hover:hover-effect\",\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-foreground\",\n                    isSelected && \"bg-primary text-primary-foreground\",\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 ? \"border-foreground\" : \"border-foreground\",\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-primary\" />\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-foreground\"\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-foreground\",\n                opt.disabled && \"text-foreground\",\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-foreground\"\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,WAAWH,QAAQ,kBAAkB;EACrC,CAAA;AAGN,QACEG,iBACE,oBAAC,eAAD,EAAe,WAAWH,QAAQ,UAAU,kBAAkB,EAC/D,CAAA;;AAIL,MAAaI,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,WAAWnB,QACT,kBACA,kCACAc,IAAIK,YACF,6DACH;GACD,MAAK;GACL,iBAAeJ;aAbjB;IAeGP,kBAAkB,WAChBD,WACC,oBAAC,OAAD;KACE,WAAWP,QACT,6DACA,qBACAe,cAAc,qCACf;eAEAA,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAY,MAAM;MAAM,CAAA;KAC9C,CAAA,GAEN,oBAAC,OAAD;KACE,WAAWf,QACT,uCACAe,aAAa,sBAAsB,qBACnC,iBACD;eAEAA,cACC,oBAAC,OAAD,EAAK,WAAU,6EAChB,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,WAAWpB,QACT,yCACA,mBACAc,IAAIK,YAAY,kBACjB;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;KAvEP,YAAYD,IAAIG,QAuET;GAEhB,EACD,CAAA"}
+{"version":3,"file":"CommandItemList.js","names":["Icon","React","twMerge","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 React from \"react\";\nimport { twMerge } from \"tailwind-merge\";\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-foreground\")}\n      />\n    );\n  }\n  return (\n    IconComponent && (\n      <IconComponent className={twMerge(\"size-4\", \"text-foreground\")} />\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-accent\",\n              opt.disabled &&\n                \"pointer-events-auto! cursor-not-allowed hover:hover-effect\",\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-foreground\",\n                    isSelected && \"bg-primary text-primary-foreground\",\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 ? \"border-foreground\" : \"border-foreground\",\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-primary\" />\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-foreground\"\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-foreground\",\n                opt.disabled && \"text-foreground\",\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-foreground\"\n                    />\n                  )}\n                </div>\n              )}\n          </CommandItem>\n        );\n      })}\n    </>\n  );\n};\n"],"mappings":";;;;;;AAkBA,MAAMI,cACJC,kBAIG;CACH,IAAI,OAAOA,kBAAkB,UAC3B,OACE,oBAAC,MAAD;EACE,MAAMA;EACN,MAAM;EACN,WAAWH,QAAQ,iBAAiB;CAAE,CAAA;CAI5C,OACEG,iBACE,oBAAC,eAAD,EAAe,WAAWH,QAAQ,UAAU,iBAAiB,EAAE,CAAA;AAGrE;AAEA,MAAaI,mBAAmD,EAC9DC,UAAU,CAAA,GACVC,gBACAC,UACAC,eACAC,uBACAC,YACAC,cACAC,eACI;CACJ,OACE,oBAAA,YAAA,EAAA,UACGP,QAAQQ,KAAKC,QAAQ;EACpB,MAAMC,aAAaT,eAAeU,SAASF,IAAIG,KAAK;EACpD,OACE,qBAAC,aAAD;GACYL;GAEV,OAAOE,IAAII;GACX,gBAAgB,CAACJ,IAAIK,YAAYR,aAAaG,IAAIG,KAAK;GACvD,UAAUH,IAAIK;GACd,WAAWnB,QACT,kBACA,kCACAc,IAAIK,YACF,4DACJ;GACA,MAAK;GACL,iBAAeJ;GAbjB,UAAA;IAeGP,kBAAkB,WAChBD,WACC,oBAAC,OAAD;KACE,WAAWP,QACT,6DACA,qBACAe,cAAc,oCAChB;KAECA,UAAAA,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAY,MAAM;KAAG,CAAA;IAC5C,CAAA,IAEL,oBAAC,OAAD;KACE,WAAWf,QACT,uCACAe,aAAa,sBAAsB,qBACnC,gBACF;KAECA,UAAAA,cACC,oBAAC,OAAD,EAAK,WAAU,4EAA2E,CAAA;IAEzF,CAAA;IAERP,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWC,eACrC,oBAAC,OAAD;KAAK,WAAU;KACZD,UAAAA,0BAA0B,UAAUM,cACnC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;KAAiB,CAAA;IAG5B,CAAA;IAERb,WAAWY,IAAIM,IAAI;IACpB,oBAAC,QAAD;KACE,WAAWpB,QACT,yCACA,mBACAc,IAAIK,YAAY,iBAClB;KAECL,UAAAA,IAAII;IACD,CAAA;IACLV,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;KAAK,WAAU;KACZM,UAAAA,cACC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;KAAiB,CAAA;IAG5B,CAAA;GAEE;EAvEN,GAAA,YAAYD,IAAIG,OAuEV;CAEjB,CAAC,EACH,CAAA;AAEJ"}

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

@@ -1,6 +1,4 @@
-import { C as SelectProps } from "../../../index--hDSfvJT.js";
-import * as react from "react";
-
+import { C as SelectProps } from "../../../index-5FEr1tXH.js";
 //#region src/ui/components/select-field/use-select-field.d.ts
 interface UseSelectFieldProps {
   options?: SelectProps["options"];
@@ -9,21 +7,15 @@ interface UseSelectFieldProps {
   value?: string | string[];
   onChange?: (value: string | string[]) => void;
 }
-declare function useSelectField({
-  options,
-  multiple,
-  defaultValue,
-  value,
-  onChange
-}: UseSelectFieldProps): {
+export declare function useSelectField({ options, multiple, defaultValue, value, onChange }: UseSelectFieldProps): {
   selectedValues: string[];
   isPopoverOpen: boolean;
-  commandListRef: react.RefObject<HTMLDivElement | null>;
+  commandListRef: import("react").RefObject<HTMLDivElement | null>;
   toggleOption: (optionValue: string) => void;
   handleClear: () => void;
   toggleAll: () => void;
   handleOpenChange: (open: boolean) => void;
 };
 //#endregion
-export { useSelectField };
+export {};
 //# sourceMappingURL=use-select-field.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-select-field.d.ts","names":[],"sources":["../../../../src/ui/components/select-field/use-select-field.ts"],"mappings":";;;;UAGU,mBAAA;EACR,OAAA,GAAU,WAAA;EACV,QAAA;EACA,YAAA;EACA,KAAA;EACA,QAAA,IAAY,KAAA;AAAA;AAAA,iBAGE,cAAA,CAAA;EACd,OAAA;EACA,QAAA;EACA,YAAA;EACA,KAAA;EACA;AAAA,GACC,mBAAA"}
+{"version":3,"file":"use-select-field.d.ts","names":[],"sources":["../../../../src/ui/components/select-field/use-select-field.ts"],"mappings":";;UAGU;EACR,UAAU;EACV;EACA;EACA;EACA,YAAY;;wBAGE,iBACd,SACA,UACA,cACA,OACA,YACC;;;;EA8Be,eAAA;;;EAL4B,mBAAA"}

package/dist/ui/components/select-field/use-select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-select-field.js","names":["useCallback","useEffect","useRef","useState","useSelectField","options","multiple","defaultValue","value","onChange","isInternalChange","commandListRef","isPopoverOpen","setIsPopoverOpen","selectedValues","setSelectedValues","initialValue","Array","isArray","current","newValue","handleOpenChange","open","toggleOption","optionValue","newValues","includes","filter","v","handleClear","toggleAll","enabledOptions","opt","disabled","map","length","prevMultiple"],"sources":["../../../../src/ui/components/select-field/use-select-field.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { SelectProps } from \"../enum-field/types.js\";\n\ninterface UseSelectFieldProps {\n  options?: SelectProps[\"options\"];\n  multiple?: boolean;\n  defaultValue?: string | string[];\n  value?: string | string[];\n  onChange?: (value: string | string[]) => void;\n}\n\nexport function useSelectField({\n  options = [],\n  multiple = false,\n  defaultValue,\n  value,\n  onChange,\n}: UseSelectFieldProps) {\n  const isInternalChange = useRef(false);\n  const commandListRef = useRef<HTMLDivElement>(null);\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<string[]>(() => {\n    const initialValue = value ?? defaultValue ?? [];\n    if (initialValue === \"\") {\n      return [];\n    }\n    return Array.isArray(initialValue) ? initialValue : [initialValue];\n  });\n\n  useEffect(() => {\n    if (isInternalChange.current) {\n      isInternalChange.current = false;\n      return;\n    }\n    const newValue = value ?? defaultValue ?? [];\n    if (newValue === \"\") {\n      setSelectedValues([]);\n    } else {\n      setSelectedValues(Array.isArray(newValue) ? newValue : [newValue]);\n    }\n  }, [value]);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    setIsPopoverOpen(open);\n  }, []);\n\n  const toggleOption = useCallback(\n    (optionValue: string) => {\n      isInternalChange.current = true;\n      let newValues: string[];\n\n      if (multiple) {\n        newValues = selectedValues.includes(optionValue)\n          ? selectedValues.filter((v) => v !== optionValue)\n          : [...selectedValues, optionValue];\n      } else {\n        newValues = selectedValues[0] === optionValue ? [] : [optionValue];\n\n        setIsPopoverOpen(false);\n      }\n\n      setSelectedValues(newValues);\n      onChange?.(multiple ? newValues : (newValues[0] ?? \"\"));\n    },\n    [multiple, selectedValues, options, onChange],\n  );\n\n  const handleClear = useCallback(() => {\n    isInternalChange.current = true;\n    setSelectedValues([]);\n    onChange?.(multiple ? [] : \"\");\n  }, [multiple, onChange]);\n\n  const toggleAll = useCallback(() => {\n    isInternalChange.current = true;\n    const enabledOptions = options\n      .filter((opt) => !opt.disabled)\n      .map((opt) => opt.value);\n\n    const newValues =\n      selectedValues.length === enabledOptions.length ? [] : enabledOptions;\n\n    setSelectedValues(newValues);\n    onChange?.(multiple ? newValues : newValues[0]);\n  }, [options, selectedValues, multiple, onChange]);\n\n  // handles changes to the \"multiple\" prop avoiding calling onChange on mount\n  const prevMultiple = useRef(multiple);\n  useEffect(() => {\n    if (prevMultiple.current === multiple) {\n      return;\n    }\n    prevMultiple.current = multiple;\n\n    if (!multiple && selectedValues.length > 1) {\n      isInternalChange.current = true;\n      setSelectedValues([selectedValues[0]]);\n      onChange?.(selectedValues[0]);\n      return;\n    }\n    if (selectedValues.length > 0) {\n      isInternalChange.current = true;\n      onChange?.(multiple ? [selectedValues[0]] : selectedValues[0]);\n    }\n  }, [multiple]);\n\n  return {\n    selectedValues,\n    isPopoverOpen,\n    commandListRef,\n    toggleOption,\n    handleClear,\n    toggleAll,\n    handleOpenChange,\n  };\n}\n"],"mappings":";;AAWA,SAAgBI,eAAe,EAC7BC,UAAU,EAAE,EACZC,WAAW,OACXC,cACAC,OACAC,YACsB;CACtB,MAAMC,mBAAmBR,OAAO,MAAM;CACtC,MAAMS,iBAAiBT,OAAuB,KAAK;CACnD,MAAM,CAACU,eAAeC,oBAAoBV,SAAS,MAAM;CACzD,MAAM,CAACW,gBAAgBC,qBAAqBZ,eAAyB;EACnE,MAAMa,eAAeR,SAASD,gBAAgB,EAAE;AAChD,MAAIS,iBAAiB,GACnB,QAAO,EAAE;AAEX,SAAOC,MAAMC,QAAQF,aAAa,GAAGA,eAAe,CAACA,aAAa;GAClE;AAEFf,iBAAgB;AACd,MAAIS,iBAAiBS,SAAS;AAC5BT,oBAAiBS,UAAU;AAC3B;;EAEF,MAAMC,WAAWZ,SAASD,gBAAgB,EAAE;AAC5C,MAAIa,aAAa,GACfL,mBAAkB,EAAE,CAAC;MAErBA,mBAAkBE,MAAMC,QAAQE,SAAS,GAAGA,WAAW,CAACA,SAAS,CAAC;IAEnE,CAACZ,MAAM,CAAC;CAEX,MAAMa,mBAAmBrB,aAAasB,SAAkB;AACtDT,mBAAiBS,KAAK;IACrB,EAAE,CAAC;CAEN,MAAMC,eAAevB,aAClBwB,gBAAwB;AACvBd,mBAAiBS,UAAU;EAC3B,IAAIM;AAEJ,MAAInB,SACFmB,aAAYX,eAAeY,SAASF,YAAY,GAC5CV,eAAea,QAAQC,MAAMA,MAAMJ,YAAY,GAC/C,CAAC,GAAGV,gBAAgBU,YAAY;OAC/B;AACLC,eAAYX,eAAe,OAAOU,cAAc,EAAE,GAAG,CAACA,YAAY;AAElEX,oBAAiB,MAAM;;AAGzBE,oBAAkBU,UAAU;AAC5BhB,aAAWH,WAAWmB,YAAaA,UAAU,MAAM,GAAI;IAEzD;EAACnB;EAAUQ;EAAgBT;EAASI;EACtC,CAAC;CAED,MAAMoB,cAAc7B,kBAAkB;AACpCU,mBAAiBS,UAAU;AAC3BJ,oBAAkB,EAAE,CAAC;AACrBN,aAAWH,WAAW,EAAE,GAAG,GAAG;IAC7B,CAACA,UAAUG,SAAS,CAAC;CAExB,MAAMqB,YAAY9B,kBAAkB;AAClCU,mBAAiBS,UAAU;EAC3B,MAAMY,iBAAiB1B,QACpBsB,QAAQK,QAAQ,CAACA,IAAIC,SAAS,CAC9BC,KAAKF,QAAQA,IAAIxB,MAAM;EAE1B,MAAMiB,YACJX,eAAeqB,WAAWJ,eAAeI,SAAS,EAAE,GAAGJ;AAEzDhB,oBAAkBU,UAAU;AAC5BhB,aAAWH,WAAWmB,YAAYA,UAAU,GAAG;IAC9C;EAACpB;EAASS;EAAgBR;EAAUG;EAAS,CAAC;CAGjD,MAAM2B,eAAelC,OAAOI,SAAS;AACrCL,iBAAgB;AACd,MAAImC,aAAajB,YAAYb,SAC3B;AAEF8B,eAAajB,UAAUb;AAEvB,MAAI,CAACA,YAAYQ,eAAeqB,SAAS,GAAG;AAC1CzB,oBAAiBS,UAAU;AAC3BJ,qBAAkB,CAACD,eAAe,GAAG,CAAC;AACtCL,cAAWK,eAAe,GAAG;AAC7B;;AAEF,MAAIA,eAAeqB,SAAS,GAAG;AAC7BzB,oBAAiBS,UAAU;AAC3BV,cAAWH,WAAW,CAACQ,eAAe,GAAG,GAAGA,eAAe,GAAG;;IAE/D,CAACR,SAAS,CAAC;AAEd,QAAO;EACLQ;EACAF;EACAD;EACAY;EACAM;EACAC;EACAT;EACD"}
+{"version":3,"file":"use-select-field.js","names":["useCallback","useEffect","useRef","useState","useSelectField","options","multiple","defaultValue","value","onChange","isInternalChange","commandListRef","isPopoverOpen","setIsPopoverOpen","selectedValues","setSelectedValues","initialValue","Array","isArray","current","newValue","handleOpenChange","open","toggleOption","optionValue","newValues","includes","filter","v","handleClear","toggleAll","enabledOptions","opt","disabled","map","length","prevMultiple"],"sources":["../../../../src/ui/components/select-field/use-select-field.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { SelectProps } from \"../enum-field/types.js\";\n\ninterface UseSelectFieldProps {\n  options?: SelectProps[\"options\"];\n  multiple?: boolean;\n  defaultValue?: string | string[];\n  value?: string | string[];\n  onChange?: (value: string | string[]) => void;\n}\n\nexport function useSelectField({\n  options = [],\n  multiple = false,\n  defaultValue,\n  value,\n  onChange,\n}: UseSelectFieldProps) {\n  const isInternalChange = useRef(false);\n  const commandListRef = useRef<HTMLDivElement>(null);\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n  const [selectedValues, setSelectedValues] = useState<string[]>(() => {\n    const initialValue = value ?? defaultValue ?? [];\n    if (initialValue === \"\") {\n      return [];\n    }\n    return Array.isArray(initialValue) ? initialValue : [initialValue];\n  });\n\n  useEffect(() => {\n    if (isInternalChange.current) {\n      isInternalChange.current = false;\n      return;\n    }\n    const newValue = value ?? defaultValue ?? [];\n    if (newValue === \"\") {\n      setSelectedValues([]);\n    } else {\n      setSelectedValues(Array.isArray(newValue) ? newValue : [newValue]);\n    }\n  }, [value]);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    setIsPopoverOpen(open);\n  }, []);\n\n  const toggleOption = useCallback(\n    (optionValue: string) => {\n      isInternalChange.current = true;\n      let newValues: string[];\n\n      if (multiple) {\n        newValues = selectedValues.includes(optionValue)\n          ? selectedValues.filter((v) => v !== optionValue)\n          : [...selectedValues, optionValue];\n      } else {\n        newValues = selectedValues[0] === optionValue ? [] : [optionValue];\n\n        setIsPopoverOpen(false);\n      }\n\n      setSelectedValues(newValues);\n      onChange?.(multiple ? newValues : (newValues[0] ?? \"\"));\n    },\n    [multiple, selectedValues, options, onChange],\n  );\n\n  const handleClear = useCallback(() => {\n    isInternalChange.current = true;\n    setSelectedValues([]);\n    onChange?.(multiple ? [] : \"\");\n  }, [multiple, onChange]);\n\n  const toggleAll = useCallback(() => {\n    isInternalChange.current = true;\n    const enabledOptions = options\n      .filter((opt) => !opt.disabled)\n      .map((opt) => opt.value);\n\n    const newValues =\n      selectedValues.length === enabledOptions.length ? [] : enabledOptions;\n\n    setSelectedValues(newValues);\n    onChange?.(multiple ? newValues : newValues[0]);\n  }, [options, selectedValues, multiple, onChange]);\n\n  // handles changes to the \"multiple\" prop avoiding calling onChange on mount\n  const prevMultiple = useRef(multiple);\n  useEffect(() => {\n    if (prevMultiple.current === multiple) {\n      return;\n    }\n    prevMultiple.current = multiple;\n\n    if (!multiple && selectedValues.length > 1) {\n      isInternalChange.current = true;\n      setSelectedValues([selectedValues[0]]);\n      onChange?.(selectedValues[0]);\n      return;\n    }\n    if (selectedValues.length > 0) {\n      isInternalChange.current = true;\n      onChange?.(multiple ? [selectedValues[0]] : selectedValues[0]);\n    }\n  }, [multiple]);\n\n  return {\n    selectedValues,\n    isPopoverOpen,\n    commandListRef,\n    toggleOption,\n    handleClear,\n    toggleAll,\n    handleOpenChange,\n  };\n}\n"],"mappings":";;AAWA,SAAgBI,eAAe,EAC7BC,UAAU,CAAA,GACVC,WAAW,OACXC,cACAC,OACAC,YACsB;CACtB,MAAMC,mBAAmBR,OAAO,KAAK;CACrC,MAAMS,iBAAiBT,OAAuB,IAAI;CAClD,MAAM,CAACU,eAAeC,oBAAoBV,SAAS,KAAK;CACxD,MAAM,CAACW,gBAAgBC,qBAAqBZ,eAAyB;EACnE,MAAMa,eAAeR,SAASD,gBAAgB,CAAA;EAC9C,IAAIS,iBAAiB,IACnB,OAAO,CAAA;EAET,OAAOC,MAAMC,QAAQF,YAAY,IAAIA,eAAe,CAACA,YAAY;CACnE,CAAC;CAEDf,gBAAgB;EACd,IAAIS,iBAAiBS,SAAS;GAC5BT,iBAAiBS,UAAU;GAC3B;EACF;EACA,MAAMC,WAAWZ,SAASD,gBAAgB,CAAA;EAC1C,IAAIa,aAAa,IACfL,kBAAkB,CAAA,CAAE;OAEpBA,kBAAkBE,MAAMC,QAAQE,QAAQ,IAAIA,WAAW,CAACA,QAAQ,CAAC;CAErE,GAAG,CAACZ,KAAK,CAAC;CAEV,MAAMa,mBAAmBrB,aAAasB,SAAkB;EACtDT,iBAAiBS,IAAI;CACvB,GAAG,CAAA,CAAE;CAEL,MAAMC,eAAevB,aAClBwB,gBAAwB;EACvBd,iBAAiBS,UAAU;EAC3B,IAAIM;EAEJ,IAAInB,UACFmB,YAAYX,eAAeY,SAASF,WAAW,IAC3CV,eAAea,QAAQC,MAAMA,MAAMJ,WAAW,IAC9C,CAAC,GAAGV,gBAAgBU,WAAW;OAC9B;GACLC,YAAYX,eAAe,OAAOU,cAAc,CAAA,IAAK,CAACA,WAAW;GAEjEX,iBAAiB,KAAK;EACxB;EAEAE,kBAAkBU,SAAS;EAC3BhB,WAAWH,WAAWmB,YAAaA,UAAU,MAAM,EAAG;CACxD,GACA;EAACnB;EAAUQ;EAAgBT;EAASI;CAAQ,CAC9C;CAEA,MAAMoB,cAAc7B,kBAAkB;EACpCU,iBAAiBS,UAAU;EAC3BJ,kBAAkB,CAAA,CAAE;EACpBN,WAAWH,WAAW,CAAA,IAAK,EAAE;CAC/B,GAAG,CAACA,UAAUG,QAAQ,CAAC;CAEvB,MAAMqB,YAAY9B,kBAAkB;EAClCU,iBAAiBS,UAAU;EAC3B,MAAMY,iBAAiB1B,QACpBsB,QAAQK,QAAQ,CAACA,IAAIC,QAAQ,CAAC,CAC9BC,KAAKF,QAAQA,IAAIxB,KAAK;EAEzB,MAAMiB,YACJX,eAAeqB,WAAWJ,eAAeI,SAAS,CAAA,IAAKJ;EAEzDhB,kBAAkBU,SAAS;EAC3BhB,WAAWH,WAAWmB,YAAYA,UAAU,EAAE;CAChD,GAAG;EAACpB;EAASS;EAAgBR;EAAUG;CAAQ,CAAC;CAGhD,MAAM2B,eAAelC,OAAOI,QAAQ;CACpCL,gBAAgB;EACd,IAAImC,aAAajB,YAAYb,UAC3B;EAEF8B,aAAajB,UAAUb;EAEvB,IAAI,CAACA,YAAYQ,eAAeqB,SAAS,GAAG;GAC1CzB,iBAAiBS,UAAU;GAC3BJ,kBAAkB,CAACD,eAAe,EAAE,CAAC;GACrCL,WAAWK,eAAe,EAAE;GAC5B;EACF;EACA,IAAIA,eAAeqB,SAAS,GAAG;GAC7BzB,iBAAiBS,UAAU;GAC3BV,WAAWH,WAAW,CAACQ,eAAe,EAAE,IAAIA,eAAe,EAAE;EAC/D;CACF,GAAG,CAACR,QAAQ,CAAC;CAEb,OAAO;EACLQ;EACAF;EACAD;EACAY;EACAM;EACAC;EACAT;CACF;AACF"}

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

@@ -1,4 +1,6 @@
-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 };
+import { a as NodeStatus, i as NodeSortType, n as NodeSortComparisonFn, o as SidebarIcon, r as NodeSortOrder, s as SidebarNode, t as FlattenedNode } from "../../../types-FTqFl5du.js";
+import { n as SidebarProps, t as Sidebar } from "../../../sidebar-DFqreKf1.js";
+import { n as useSidebar, t as SidebarProvider } from "../../../sidebar-provider-CZHhqW5n.js";
+import "../../../index-C-Tup7Br.js";
+export { type FlattenedNode, type NodeSortComparisonFn, type NodeSortOrder, type NodeSortType, type NodeStatus, Sidebar, type SidebarIcon, type SidebarNode, SidebarProps, SidebarProvider, useSidebar };
+export {};

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

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

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

@@ -1,4 +1,4 @@
-import { t as Icon } from "../../../icon-C4QOpsdI.js";
+import { t as Icon } from "../../../icon-DQ2yrWYv.js";
 import { triggerEvent } from "./utils.js";
 import { useSidebar } from "./subcomponents/sidebar-provider/sidebar-provider.js";
 import { SidebarContentArea } from "./subcomponents/sidebar-content-area.js";

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

@@ -1 +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-sidebar text-sidebar-foreground shadow-lg transition-[width] duration-75 ease-linear\",\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-sidebar-border p-2\">\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:hover-effect\",\n              isResizing && \"cursor-default bg-info\",\n              !isSidebarOpen && \"bg-secondary\",\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-muted-foreground\",\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-foreground\",\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,gJACA+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,qGACA+B,cAAc,0BACd,CAACC,iBAAiB,eACnB;cAED,oBAAC,UAAD;KACE,MAAK;KACL,WAAWhC,QACT,mFACA,uEACD;KACD,SAASiC;eAET,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAWjC,QACT,2BACAgC,iBAAiB,cAClB;MAAC,CAAA;KAEE,CAAA;IACL,CAAA;GAER,CAAA,CACK"}
+{"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-sidebar text-sidebar-foreground shadow-lg transition-[width] duration-75 ease-linear\",\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-sidebar-border p-2\">\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:hover-effect\",\n              isResizing && \"cursor-default bg-info\",\n              !isSidebarOpen && \"bg-secondary\",\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-muted-foreground\",\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-foreground\",\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;CACF,CAAC;CAED,MAAM,EACJa,gBACAC,UACAC,WACAC,WACAC,kBACAC,6BACA7B,OAAO8B,eACPf,cAAcgB,iBACdf,eAAegB,qBACbvC,WAAW;CAEfN,gBAAgB;EACd,IAAIa,OACFyB,SAASzB,OAAOe,cAAcC,aAAa;CAE/C,GAAG;EAAChB;EAAOyB;EAAUV;EAAcC;CAAa,CAAC;CAEjD7B,gBAAgB;EACd,IACE,CAACa,SACD8B,cAAcG,SAAS,MACtBlB,iBAAiBgB,mBAAmBf,kBAAkBgB,mBAEvDP,SAASK,eAAef,cAAcC,aAAa;CAEvD,GAAG;EACDhB;EACA8B;EACAL;EACAV;EACAC;EACAe;EACAC;CAAgB,CACjB;CAKD7C,gBAAgB;EACd,IAAIgB,eAAe,GACjBuB,UAAUvB,YAAY;CAE1B,GAAG,CAACA,YAAY,CAAC;CAEjB,MAAM+B,yBAAyBhD,aAC5BiD,SAAsB;EACrBpC,qBAAqBoC,IAAI;EACzBvC,aAAa,kBAAkB,EAAEuC,KAAK,GAAGlB,WAAWmB,OAAO;CAC7D,GACA,CAACrC,oBAAoBkB,UAAU,CACjC;CACA9B,gBAAgB;EACdyC,iBAAiB9B,YAAY;CAC/B,GAAG,CAACA,cAAc8B,gBAAgB,CAAC;CAEnCzC,gBAAgB;EACd0C,4BAA4BK,sBAAsB;CACpD,GAAG,CAACA,wBAAwBL,2BAA2B,CAAC;CAExD1C,gBAAgB;EACd,MAAMkD,iBAAiBb,eAAeS,SAAS;EAC/C,IAAI,CAAC5B,gBAAgBgC,gBAAgB;GACnC,MAAMC,mBAAmBd,eAAeA,eAAeS,SAAS,EAAE,CAACM;GACnEZ,UAAUW,gBAAgB;EAC5B;CACF,GAAG;EAACjC;EAAcmB;EAAgBG;CAAS,CAAC;CAE5C,OACE,qBAAC,SAAD;EACE,KAAKV;EACL,OAAO,EAAEuB,OAAO,kCAAkC;EAClD,WAAWpD,QACT,gJACA+B,cAAc,mBACdP,SACF;EAPF,UAAA,CASGQ,iBACC,qBAAA,YAAA,EAAA,UAAA;GACE,oBAAC,eAAD;IACgBlB;IACDD;IACCG;IACMS;GAAmB,CAAA;GAGxCR,gBAAgBmB,eAAeS,SAAS,KAAK,oBAAC,oBAAD,CAAmB,CAAA;GACjE,oBAAC,oBAAD;IACgB5B;IACHS;GAAU,CAAA;GAEtBP,iBACC,oBAAC,eAAD,EAAiCC,iBAAiB,CAAA;GAEnDC,sBACC,oBAAC,OAAD;IAAK,WAAU;IACZA,UAAAA;GACE,CAAA;EAET,EAAA,CAAA,GAGDH,aACC,oBAAC,OAAD;GACE,WAAU;GACV,aAAaY;GAEb,UAAA,oBAAC,OAAD;IACE,WAAW9B,QACT,qGACA+B,cAAc,0BACd,CAACC,iBAAiB,cACpB;IAEA,UAAA,oBAAC,UAAD;KACE,MAAK;KACL,WAAWhC,QACT,mFACA,sEACF;KACA,SAASiC;KAET,UAAA,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAWjC,QACT,2BACAgC,iBAAiB,aACnB;KAAE,CAAA;IAEE,CAAA;GACL,CAAA;EACF,CAAA,CAEF;;AAEX"}

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

@@ -1,14 +1,9 @@
-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;
+export declare const SidebarContentArea: ({ allowPinning, isLoading }: SidebarContentAreaProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { SidebarContentArea };
+export {};
 //# sourceMappingURL=sidebar-content-area.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"sidebar-content-area.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-content-area.tsx"],"mappings":";UAOU;EACR;EACA;;qBAGW,uBAAkB,cAAA,aAG5B,wDAAuB,IAAA"}

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

@@ -1,4 +1,4 @@
-import { t as Icon } from "../../../../icon-C4QOpsdI.js";
+import { t as Icon } from "../../../../icon-DQ2yrWYv.js";
 import { SidebarItem } from "./sidebar-item.js";
 import { useSidebar } from "./sidebar-provider/sidebar-provider.js";
 import { SidebarSkeleton } from "./sidebar-skeleton.js";

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

@@ -1 +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-muted-foreground\">\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"}
+{"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-muted-foreground\">\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,WAAW;CACf,MAAMgB,iBAAiBZ,gBAAgBQ,eAAeK,SAAS;CAE/D,MAAMC,cAAc,EAClBC,OACAC,KACAC,YAKI;EACJ,MAAMC,OAAOhB,eAAea;EAE5B,OACE,oBAAC,aAAD;GAEQG;GACMf;GACDC;GACCC;GACGC;GACIC;GACnB,cAAcP,gBAAgB;GAC9B,UAAUS,iBAAiBS,KAAKC;GAChC,UAAUR;GACHM;EAAM,GAVRD,GAUQ;CAGnB;CAEA,OACE,oBAAC,OAAD;EACE,WAAWtB,QACT,8CACAkB,kBAAkB,QACpB;EAECX,UAAAA,YACC,oBAAC,iBAAD,CAAgB,CAAA,IACdC,eAAeW,WAAW,IAC5B,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,MAAD;IAAM,MAAK;IAAgB,MAAM;IAAI,WAAU;GAAS,CAAA,GACxD,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAwB,CAAA,CAChD;EAEL,CAAA,IAAA,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,WAAD,EAAA,WACI,EAAEO,OAAOC,aACT,oBAAC,MAAD;IACE,KAAKX;IACL,WAAU;IACHU;IACCC;IACR,UAAUnB,eAAeW;IACzB,WAAW;IACX,aAAaC;GAAW,CAAA,EAGnB,CAAA;EACR,CAAA;CAEJ,CAAA;AAET"}

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

@@ -5,7 +5,7 @@ interface SidebarHeaderProps {
   enableMacros?: number;
   handleOnTitleClick?: () => void;
 }
-declare const SidebarHeader: React.FC<SidebarHeaderProps>;
+export declare const SidebarHeader: React.FC<SidebarHeaderProps>;
 //#endregion
-export { SidebarHeader };
+export {};
 //# sourceMappingURL=sidebar-header.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"sidebar-header.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-header.tsx"],"mappings":";UAGU;EACR;EACA,cAAc,MAAM;EACpB;EACA;;qBAGW,eAAe,MAAM,GAAG"}

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

@@ -1 +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 = \"truncate text-sm font-semibold text-foreground\";\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-sidebar-border bg-sidebar p-4\">\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-sidebar p-1 text-center text-xs text-sidebar-foreground\",\n                  !isDisabled && \"hover:hover-effect\",\n                  isDisabled &&\n                    \"cursor-not-allowed bg-muted text-muted-foreground\",\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,mBAAmB;AACzB,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,kFACA,CAACmB,cAAc,sBACfA,cACE,oDACH;KACD,eAAe;AACb,UAAI,CAACA,WACHX,WAAUU,QAAQ,EAAE;;eAIvBA,QAAQ;KACL,EAhBC,SAASA,QAgBV;KAER;GAEL,CAAA,CACM"}
+{"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 = \"truncate text-sm font-semibold text-foreground\";\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-sidebar-border bg-sidebar p-4\">\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-sidebar p-1 text-center text-xs text-sidebar-foreground\",\n                  !isDisabled && \"hover:hover-effect\",\n                  isDisabled &&\n                    \"cursor-not-allowed bg-muted text-muted-foreground\",\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,WAAW;CAC3C,IAAI,CAACE,gBAAgB,CAACC,eAAe,CAACC,cACpC,OAAO;CAET,IAAII;CACJ,MAAMC,mBAAmB;CACzB,IAAIJ,oBACFG,eACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAWT,QAAQU,kBAAkB,gBAAgB;EACrD,SAASJ;EAERH,UAAAA;CACK,CAAA;MAGVM,eAAe,oBAAC,OAAD;EAAK,WAAWC;EAAmBP,UAAAA;CAAkB,CAAA;CAGtE,OACE,qBAAC,UAAD;EAAQ,WAAU;EAAlB,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACGC,aACAK,YACE;EAEJJ,CAAAA,GAAAA,eAAe,KACd,oBAAC,OAAD;GAAK,WAAU;GACZM,UAAAA,MAAMC,KAAK,EAAEC,QAAQC,KAAKC,IAAIV,cAAc,CAAC,EAAE,CAAC,CAAC,CAACW,KAAKC,GAAGC,UAAU;IACnE,MAAMC,aAAaD,QAAQ,IAAIX;IAE/B,OACE,oBAAC,OAAD;KAEE,MAAK;KACL,UAAU;KACV,WAAWP,QACT,kFACA,CAACmB,cAAc,sBACfA,cACE,mDACJ;KACA,eAAe;MACb,IAAI,CAACA,YACHX,UAAUU,QAAQ,CAAC;KAEvB;KAECA,UAAAA,QAAQ;IACN,GAhBE,SAASA,OAgBX;GAET,CAAC;EACE,CAAA,CAED;;AAEZ"}

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

@@ -1,6 +1,4 @@
-import { s as SidebarNode, t as FlattenedNode } from "../../../../types-CNbvfWjh.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
+import { s as SidebarNode, t as FlattenedNode } from "../../../../types-FTqFl5du.js";
 //#region src/ui/components/sidebar/subcomponents/sidebar-item.d.ts
 interface SidebarItemProps {
   node: FlattenedNode;
@@ -16,20 +14,7 @@ interface SidebarItemProps {
   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;
+export declare const SidebarItem: ({ node, toggleNode, togglePin, searchTerm, searchResults, activeSearchIndex, allowPinning, pinnedMode, isPinned, isActive, style, onChange }: SidebarItemProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { SidebarItem };
+export {};
 //# sourceMappingURL=sidebar-item.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"sidebar-item.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-item.tsx"],"mappings":";;UAWU;EACR,MAAM;EACN,cAAc;EACd,YAAY;EACZ;EACA,eAAe;EACf;EACA;EACA;EACA;EACA;EACA,QAAQ,MAAM;EACd,YAAY,MAAM;;qBAMP,gBAAW,MAAA,YAAA,WAAA,YAAA,eAAA,mBAAA,cAAA,YAAA,UAAA,UAAA,OAAA,YAarB,iDAAgB,IAAA"}

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

@@ -1,5 +1,6 @@
-import { a as PinFilled, o as Pin, s as CaretDown, t as Icon } from "../../../../icon-C4QOpsdI.js";
+import { S as CaretDown, t as Icon } from "../../../../icon-DQ2yrWYv.js";
 import { Tooltip, TooltipProvider as Provider } from "../../tooltip/tooltip.js";
+import { n as Pin, t as PinFilled } from "../../../../PinFilled-cSbUqZCA.js";
 import { NodeStatus } from "../types.js";
 import { useEllipsis } from "../use-ellipsis.js";
 import { StatusIcon } from "./status-icon.js";
@@ -64,7 +65,7 @@ const SidebarItem = ({ node, toggleNode, togglePin, searchTerm, searchResults, a
 							name: IconComponent,
 							size: 16,
 							className: "min-w-4"
-						}) : /* @__PURE__ */ cloneElement(IconComponent, { className: "min-w-4 w-4" }) : pinnedMode ? /* @__PURE__ */ jsx(PinnedModeCircleIcon, { isPinned }) : null,
+						}) : /*#__PURE__*/ cloneElement(IconComponent, { className: "min-w-4 w-4" }) : pinnedMode ? /* @__PURE__ */ jsx(PinnedModeCircleIcon, { isPinned }) : null,
 						/* @__PURE__ */ jsx(RenderTitle, {
 							ref: ellipsisRef,
 							title: node.title,
@@ -104,7 +105,7 @@ const SidebarItem = ({ node, toggleNode, togglePin, searchTerm, searchResults, a
 		})
 	}) });
 };
-const RenderTitle = /* @__PURE__ */ forwardRef(({ title, searchTerm, isSearchActive, pinnedMode, className }, ref) => {
+const RenderTitle = /*#__PURE__*/ forwardRef(({ title, searchTerm, isSearchActive, pinnedMode, className }, ref) => {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: twMerge("truncate text-sm/5", className),

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.js","names":["cloneElement","forwardRef","useMemo","useRef","twMerge","CaretDown","Pin","PinFilled","Icon","Tooltip","TooltipProvider","NodeStatus","useEllipsis","StatusIcon","TOOLTIP_DELAY","TOOLTIP_DELAY_LONG","SidebarItem","node","toggleNode","togglePin","searchTerm","searchResults","activeSearchIndex","allowPinning","pinnedMode","isPinned","isActive","style","onChange","paddingLeft","depth","isSearchActive","length","id","IconComponent","isExpanded","expandedIcon","icon","isDescendenceModified","check","n","status","UNCHANGED","children","some","child","hasStatus","computedStyle","ellipsisRef","hasEllipsis","title","className","e","stopPropagation","undefined","RenderTitle","ref","toLowerCase","includes","highlightClass","parts","remaining","lowerTerm","i","idx","indexOf","push","slice","displayName","PinnedModeCircleIcon"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-item.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useMemo, useRef } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport CaretDown from \"../../../../powerhouse/components/icon-components/CaretDown.js\";\nimport Pin from \"../../../../powerhouse/components/icon-components/Pin.js\";\nimport PinFilled from \"../../../../powerhouse/components/icon-components/PinFilled.js\";\nimport { Icon } from \"../../../../powerhouse/index.js\";\nimport { Tooltip, TooltipProvider } from \"../../tooltip/tooltip.js\";\nimport { type FlattenedNode, NodeStatus, type SidebarNode } from \"../types.js\";\nimport { useEllipsis } from \"../use-ellipsis.js\";\nimport { StatusIcon } from \"./status-icon.js\";\n\ninterface SidebarItemProps {\n  node: FlattenedNode;\n  toggleNode?: (nodeId: string) => void;\n  togglePin: (nodeId: string) => void;\n  searchTerm: string;\n  searchResults: SidebarNode[];\n  activeSearchIndex: number;\n  allowPinning: boolean;\n  pinnedMode?: boolean;\n  isPinned?: boolean;\n  isActive?: boolean;\n  style?: React.CSSProperties;\n  onChange?: (node: SidebarNode) => void;\n}\n\nconst TOOLTIP_DELAY = 700;\nconst TOOLTIP_DELAY_LONG = 172800000; // 2 days to simulate no tooltip\n\nexport const SidebarItem = ({\n  node,\n  toggleNode,\n  togglePin,\n  searchTerm,\n  searchResults,\n  activeSearchIndex,\n  allowPinning,\n  pinnedMode = false,\n  isPinned = false,\n  isActive = false,\n  style,\n  onChange,\n}: SidebarItemProps) => {\n  const paddingLeft = node.depth * 24;\n  const isSearchActive =\n    searchResults.length > 0 && searchResults[activeSearchIndex].id === node.id;\n  const IconComponent = node.isExpanded\n    ? (node.expandedIcon ?? node.icon)\n    : node.icon;\n  const isDescendenceModified = useMemo(() => {\n    const check = (n: SidebarNode): boolean => {\n      // Check current node's status first\n      if (n.status !== NodeStatus.UNCHANGED && n.status) {\n        return true;\n      }\n\n      // Then recursively check all children\n      if (n.children && n.children.length > 0) {\n        return n.children.some((child) => check(child));\n      }\n\n      return false;\n    };\n\n    return check(node);\n  }, [node]);\n  const hasStatus =\n    (node.status && node.status !== NodeStatus.UNCHANGED) ||\n    isDescendenceModified;\n\n  const computedStyle = { ...style, paddingLeft };\n\n  // Check if the title has ellipsis to determine if the tooltip should be delayed\n  const ellipsisRef = useRef<HTMLDivElement | null>(null);\n  const hasEllipsis = useEllipsis(ellipsisRef);\n\n  return (\n    <TooltipProvider>\n      <Tooltip\n        content={node.title}\n        triggerAsChild\n        side=\"bottom\"\n        delayDuration={hasEllipsis ? TOOLTIP_DELAY : TOOLTIP_DELAY_LONG}\n      >\n        <div\n          style={computedStyle}\n          className={twMerge(\n            \"group/sidebar-item-wrapper flex w-full items-center\",\n            !pinnedMode && \"pb-2\",\n          )}\n        >\n          <div\n            tabIndex={0}\n            data-testid=\"sidebar-item\"\n            id={`sidebar-item-${node.id}`}\n            className={twMerge(\n              \"group/sidebar-item relative flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-foreground select-none hover:hover-effect\",\n              hasStatus && \"pr-6\",\n              allowPinning && (hasStatus ? \"hover:pr-12\" : \"hover:pr-6\"),\n              isPinned && (hasStatus ? \"pr-12\" : \"pr-6\"),\n              isSearchActive && \"bg-warning/10\",\n              // line between pinned items\n              pinnedMode &&\n                \"after:absolute after:-top-2.5 after:left-[15px] after:h-4 after:w-px after:bg-secondary first:group-first/sidebar-item-wrapper:after:hidden hover:hover-effect\",\n              isActive &&\n                \"bg-sidebar-accent font-medium text-sidebar-accent-foreground hover:hover-effect\",\n              node.className,\n            )}\n            onClick={() => {\n              toggleNode?.(node.id);\n              onChange?.(node);\n            }}\n          >\n            <div className=\"flex max-w-full items-center gap-2\">\n              {!pinnedMode && (\n                <div\n                  className=\"-m-2 -mr-1 h-full rounded-md py-2 pr-1 pl-2 hover:hover-effect\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    toggleNode?.(node.id);\n                  }}\n                >\n                  <CaretDown\n                    width=\"16\"\n                    height=\"16\"\n                    className={twMerge(\n                      \"min-w-4\",\n                      node.isExpanded &&\n                        node.children &&\n                        node.children.length > 0\n                        ? \"\"\n                        : \"-rotate-90\",\n                      node.children === undefined || node.children.length === 0\n                        ? \"text-muted-foreground\"\n                        : \"text-foreground\",\n                    )}\n                  />\n                </div>\n              )}\n\n              {IconComponent ? (\n                typeof IconComponent === \"string\" ? (\n                  <Icon name={IconComponent} size={16} className=\"min-w-4\" />\n                ) : (\n                  // @ts-expect-error -- this is a workaround\n                  cloneElement(IconComponent, { className: \"min-w-4 w-4\" })\n                )\n              ) : pinnedMode ? (\n                <PinnedModeCircleIcon isPinned={isPinned} />\n              ) : null}\n\n              <RenderTitle\n                ref={ellipsisRef}\n                title={node.title}\n                searchTerm={searchTerm}\n                isSearchActive={isSearchActive}\n                pinnedMode={pinnedMode}\n                className=\"\"\n              />\n\n              {allowPinning && (\n                <div\n                  className={twMerge(\n                    \"absolute top-1/2 flex -translate-y-1/2 items-center justify-center\",\n                    hasStatus ? \"right-8\" : \"right-2\",\n                    isPinned\n                      ? \"text-foreground hover:hover-effect\"\n                      : \"invisible text-muted-foreground group-hover/sidebar-item:visible hover:hover-effect\",\n                  )}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    togglePin(node.id);\n                  }}\n                >\n                  {isPinned ? (\n                    <PinFilled width=\"16\" height=\"16\" />\n                  ) : (\n                    <Pin width=\"16\" height=\"16\" />\n                  )}\n                </div>\n              )}\n              {hasStatus && (\n                <div\n                  className={twMerge(\n                    \"absolute top-1/2 right-2 flex -translate-y-1/2 items-center justify-center\",\n                    \"text-foreground group-hover/sidebar-item:visible hover:hover-effect\",\n                  )}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    togglePin(node.id);\n                  }}\n                >\n                  <StatusIcon\n                    status={node.status ?? NodeStatus.UNCHANGED}\n                    isDescendenceModified={isDescendenceModified}\n                  />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\nconst RenderTitle = forwardRef<\n  HTMLDivElement,\n  {\n    title: string;\n    searchTerm: string;\n    isSearchActive: boolean;\n    pinnedMode: boolean;\n    className?: string;\n  }\n>(({ title, searchTerm, isSearchActive, pinnedMode, className }, ref) => {\n  return (\n    <div ref={ref} className={twMerge(\"truncate text-sm/5\", className)}>\n      {searchTerm &&\n      title.toLowerCase().includes(searchTerm.toLowerCase()) &&\n      !pinnedMode\n        ? (() => {\n            const highlightClass = isSearchActive\n              ? \"bg-warning/10\"\n              : \"bg-secondary\";\n            const parts: React.ReactNode[] = [];\n            let remaining = title;\n            const lowerTerm = searchTerm.toLowerCase();\n            let i = 0;\n            while (remaining.length > 0) {\n              const idx = remaining.toLowerCase().indexOf(lowerTerm);\n              if (idx === -1) {\n                parts.push(remaining);\n                break;\n              }\n              if (idx > 0) parts.push(remaining.slice(0, idx));\n              parts.push(\n                <span key={i++} className={highlightClass}>\n                  {remaining.slice(idx, idx + searchTerm.length)}\n                </span>,\n              );\n              remaining = remaining.slice(idx + searchTerm.length);\n            }\n            return <>{parts}</>;\n          })()\n        : title}\n    </div>\n  );\n});\n\nRenderTitle.displayName = \"RenderTitle\";\n\nconst PinnedModeCircleIcon = ({ isPinned }: { isPinned: boolean }) => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"min-w-4\"\n  >\n    <rect width=\"16\" height=\"16\" rx=\"6.4\" fill=\"transparent\" />\n    <path\n      d=\"M12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z\"\n      fill=\"currentColor\"\n      className={isPinned ? \"text-muted-foreground\" : \"text-foreground\"}\n    />\n  </svg>\n);\n"],"mappings":"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"}
+{"version":3,"file":"sidebar-item.js","names":["cloneElement","forwardRef","useMemo","useRef","twMerge","CaretDown","Pin","PinFilled","Icon","Tooltip","TooltipProvider","NodeStatus","useEllipsis","StatusIcon","TOOLTIP_DELAY","TOOLTIP_DELAY_LONG","SidebarItem","node","toggleNode","togglePin","searchTerm","searchResults","activeSearchIndex","allowPinning","pinnedMode","isPinned","isActive","style","onChange","paddingLeft","depth","isSearchActive","length","id","IconComponent","isExpanded","expandedIcon","icon","isDescendenceModified","check","n","status","UNCHANGED","children","some","child","hasStatus","computedStyle","ellipsisRef","hasEllipsis","title","className","e","stopPropagation","undefined","RenderTitle","ref","toLowerCase","includes","highlightClass","parts","remaining","lowerTerm","i","idx","indexOf","push","slice","displayName","PinnedModeCircleIcon"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-item.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useMemo, useRef } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport CaretDown from \"../../../../powerhouse/components/icon-components/CaretDown.js\";\nimport Pin from \"../../../../powerhouse/components/icon-components/Pin.js\";\nimport PinFilled from \"../../../../powerhouse/components/icon-components/PinFilled.js\";\nimport { Icon } from \"../../../../powerhouse/index.js\";\nimport { Tooltip, TooltipProvider } from \"../../tooltip/tooltip.js\";\nimport { type FlattenedNode, NodeStatus, type SidebarNode } from \"../types.js\";\nimport { useEllipsis } from \"../use-ellipsis.js\";\nimport { StatusIcon } from \"./status-icon.js\";\n\ninterface SidebarItemProps {\n  node: FlattenedNode;\n  toggleNode?: (nodeId: string) => void;\n  togglePin: (nodeId: string) => void;\n  searchTerm: string;\n  searchResults: SidebarNode[];\n  activeSearchIndex: number;\n  allowPinning: boolean;\n  pinnedMode?: boolean;\n  isPinned?: boolean;\n  isActive?: boolean;\n  style?: React.CSSProperties;\n  onChange?: (node: SidebarNode) => void;\n}\n\nconst TOOLTIP_DELAY = 700;\nconst TOOLTIP_DELAY_LONG = 172800000; // 2 days to simulate no tooltip\n\nexport const SidebarItem = ({\n  node,\n  toggleNode,\n  togglePin,\n  searchTerm,\n  searchResults,\n  activeSearchIndex,\n  allowPinning,\n  pinnedMode = false,\n  isPinned = false,\n  isActive = false,\n  style,\n  onChange,\n}: SidebarItemProps) => {\n  const paddingLeft = node.depth * 24;\n  const isSearchActive =\n    searchResults.length > 0 && searchResults[activeSearchIndex].id === node.id;\n  const IconComponent = node.isExpanded\n    ? (node.expandedIcon ?? node.icon)\n    : node.icon;\n  const isDescendenceModified = useMemo(() => {\n    const check = (n: SidebarNode): boolean => {\n      // Check current node's status first\n      if (n.status !== NodeStatus.UNCHANGED && n.status) {\n        return true;\n      }\n\n      // Then recursively check all children\n      if (n.children && n.children.length > 0) {\n        return n.children.some((child) => check(child));\n      }\n\n      return false;\n    };\n\n    return check(node);\n  }, [node]);\n  const hasStatus =\n    (node.status && node.status !== NodeStatus.UNCHANGED) ||\n    isDescendenceModified;\n\n  const computedStyle = { ...style, paddingLeft };\n\n  // Check if the title has ellipsis to determine if the tooltip should be delayed\n  const ellipsisRef = useRef<HTMLDivElement | null>(null);\n  const hasEllipsis = useEllipsis(ellipsisRef);\n\n  return (\n    <TooltipProvider>\n      <Tooltip\n        content={node.title}\n        triggerAsChild\n        side=\"bottom\"\n        delayDuration={hasEllipsis ? TOOLTIP_DELAY : TOOLTIP_DELAY_LONG}\n      >\n        <div\n          style={computedStyle}\n          className={twMerge(\n            \"group/sidebar-item-wrapper flex w-full items-center\",\n            !pinnedMode && \"pb-2\",\n          )}\n        >\n          <div\n            tabIndex={0}\n            data-testid=\"sidebar-item\"\n            id={`sidebar-item-${node.id}`}\n            className={twMerge(\n              \"group/sidebar-item relative flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-foreground select-none hover:hover-effect\",\n              hasStatus && \"pr-6\",\n              allowPinning && (hasStatus ? \"hover:pr-12\" : \"hover:pr-6\"),\n              isPinned && (hasStatus ? \"pr-12\" : \"pr-6\"),\n              isSearchActive && \"bg-warning/10\",\n              // line between pinned items\n              pinnedMode &&\n                \"after:absolute after:-top-2.5 after:left-[15px] after:h-4 after:w-px after:bg-secondary first:group-first/sidebar-item-wrapper:after:hidden hover:hover-effect\",\n              isActive &&\n                \"bg-sidebar-accent font-medium text-sidebar-accent-foreground hover:hover-effect\",\n              node.className,\n            )}\n            onClick={() => {\n              toggleNode?.(node.id);\n              onChange?.(node);\n            }}\n          >\n            <div className=\"flex max-w-full items-center gap-2\">\n              {!pinnedMode && (\n                <div\n                  className=\"-m-2 -mr-1 h-full rounded-md py-2 pr-1 pl-2 hover:hover-effect\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    toggleNode?.(node.id);\n                  }}\n                >\n                  <CaretDown\n                    width=\"16\"\n                    height=\"16\"\n                    className={twMerge(\n                      \"min-w-4\",\n                      node.isExpanded &&\n                        node.children &&\n                        node.children.length > 0\n                        ? \"\"\n                        : \"-rotate-90\",\n                      node.children === undefined || node.children.length === 0\n                        ? \"text-muted-foreground\"\n                        : \"text-foreground\",\n                    )}\n                  />\n                </div>\n              )}\n\n              {IconComponent ? (\n                typeof IconComponent === \"string\" ? (\n                  <Icon name={IconComponent} size={16} className=\"min-w-4\" />\n                ) : (\n                  // @ts-expect-error -- this is a workaround\n                  cloneElement(IconComponent, { className: \"min-w-4 w-4\" })\n                )\n              ) : pinnedMode ? (\n                <PinnedModeCircleIcon isPinned={isPinned} />\n              ) : null}\n\n              <RenderTitle\n                ref={ellipsisRef}\n                title={node.title}\n                searchTerm={searchTerm}\n                isSearchActive={isSearchActive}\n                pinnedMode={pinnedMode}\n                className=\"\"\n              />\n\n              {allowPinning && (\n                <div\n                  className={twMerge(\n                    \"absolute top-1/2 flex -translate-y-1/2 items-center justify-center\",\n                    hasStatus ? \"right-8\" : \"right-2\",\n                    isPinned\n                      ? \"text-foreground hover:hover-effect\"\n                      : \"invisible text-muted-foreground group-hover/sidebar-item:visible hover:hover-effect\",\n                  )}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    togglePin(node.id);\n                  }}\n                >\n                  {isPinned ? (\n                    <PinFilled width=\"16\" height=\"16\" />\n                  ) : (\n                    <Pin width=\"16\" height=\"16\" />\n                  )}\n                </div>\n              )}\n              {hasStatus && (\n                <div\n                  className={twMerge(\n                    \"absolute top-1/2 right-2 flex -translate-y-1/2 items-center justify-center\",\n                    \"text-foreground group-hover/sidebar-item:visible hover:hover-effect\",\n                  )}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    togglePin(node.id);\n                  }}\n                >\n                  <StatusIcon\n                    status={node.status ?? NodeStatus.UNCHANGED}\n                    isDescendenceModified={isDescendenceModified}\n                  />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\nconst RenderTitle = forwardRef<\n  HTMLDivElement,\n  {\n    title: string;\n    searchTerm: string;\n    isSearchActive: boolean;\n    pinnedMode: boolean;\n    className?: string;\n  }\n>(({ title, searchTerm, isSearchActive, pinnedMode, className }, ref) => {\n  return (\n    <div ref={ref} className={twMerge(\"truncate text-sm/5\", className)}>\n      {searchTerm &&\n      title.toLowerCase().includes(searchTerm.toLowerCase()) &&\n      !pinnedMode\n        ? (() => {\n            const highlightClass = isSearchActive\n              ? \"bg-warning/10\"\n              : \"bg-secondary\";\n            const parts: React.ReactNode[] = [];\n            let remaining = title;\n            const lowerTerm = searchTerm.toLowerCase();\n            let i = 0;\n            while (remaining.length > 0) {\n              const idx = remaining.toLowerCase().indexOf(lowerTerm);\n              if (idx === -1) {\n                parts.push(remaining);\n                break;\n              }\n              if (idx > 0) parts.push(remaining.slice(0, idx));\n              parts.push(\n                <span key={i++} className={highlightClass}>\n                  {remaining.slice(idx, idx + searchTerm.length)}\n                </span>,\n              );\n              remaining = remaining.slice(idx + searchTerm.length);\n            }\n            return <>{parts}</>;\n          })()\n        : title}\n    </div>\n  );\n});\n\nRenderTitle.displayName = \"RenderTitle\";\n\nconst PinnedModeCircleIcon = ({ isPinned }: { isPinned: boolean }) => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"min-w-4\"\n  >\n    <rect width=\"16\" height=\"16\" rx=\"6.4\" fill=\"transparent\" />\n    <path\n      d=\"M12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z\"\n      fill=\"currentColor\"\n      className={isPinned ? \"text-muted-foreground\" : \"text-foreground\"}\n    />\n  </svg>\n);\n"],"mappings":"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"}