@koobiq/react-components 0.27.1 → 0.28.0

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -17,4 +17,4 @@ export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<{
         label?: FormFieldLabelProps<"span">;
         checkboxGroup?: import("react").ComponentPropsWithRef<"div">;
     };
-} & Omit<import("@react-types/checkbox").AriaCheckboxGroupProps, "description" | "validationState"> & import("react").RefAttributes<HTMLDivElement>>;
+} & Omit<import("react-aria").AriaCheckboxGroupProps, "description" | "validationState"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ContenPanel/hooks/useContentPanelContainer/useContentPanelContainer.d.ts

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'react';
 import type { ButtonBaseProps } from '@koobiq/react-primitives';
 import type { OverlayTriggerState } from '@react-stately/overlays';
 export type UseContentPanelReturnValue = {
-    triggerProps: ButtonBaseProps;
+    triggerProps: Omit<ButtonBaseProps, 'isLoading' | 'children' | 'className' | 'style'>;
     closeButtonProps: ButtonBaseProps;
     containerProps?: HTMLAttributes<HTMLElement>;
     panelProps?: HTMLAttributes<HTMLElement>;

package/dist/components/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { mergeProps } from "@koobiq/react-core";
 import { IconCalendarO16 } from "@koobiq/react-icons";
@@ -57,23 +57,28 @@ function DatePickerRender(props, ref) {
     anchorRef
   );
   const { slotProps: rootSlotProps, ...otherRoot } = slotProps?.root || {};
+  const triggerButtonProps = mergeProps(
+    {
+      variant: isInvalid ? "error" : "fade-contrast",
+      className: s.calendar,
+      children: /* @__PURE__ */ jsx(IconCalendarO16, {})
+    },
+    buttonProps,
+    slotProps?.triggerButton
+  );
   const mergedRootSlotProps = {
     ...rootSlotProps,
-    group: mergeProps(rootSlotProps?.group, groupProps, {
-      ref: anchorRef,
-      endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
-        endAddon,
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            variant: isInvalid ? "error" : "fade-contrast",
-            className: s.calendar,
-            ...buttonProps,
-            children: /* @__PURE__ */ jsx(IconCalendarO16, {})
-          }
-        )
-      ] })
-    })
+    group: mergeProps(
+      groupProps,
+      {
+        ref: anchorRef,
+        endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+          endAddon,
+          /* @__PURE__ */ jsx(IconButton, { ...triggerButtonProps })
+        ] })
+      },
+      rootSlotProps?.group
+    )
   };
   const rootProps = mergeProps(
     {

package/dist/components/DatePicker/types.d.ts

@@ -3,6 +3,7 @@ import type { AriaDatePickerProps, DateValue } from '@koobiq/react-primitives';
 import type { CalendarProps } from '../Calendar';
 import type { DateInputPropLabelAlign, DateInputPropLabelPlacement, DateInputProps, DateInputRef } from '../DateInput';
 import type { FormFieldLabelProps } from '../FormField';
+import type { IconButtonProps } from '../IconButton';
 import type { PopoverProps } from '../Popover';
 export type DatePickerProps<T extends DateValue> = {
     /**
@@ -40,6 +41,7 @@ export type DatePickerProps<T extends DateValue> = {
         label?: FormFieldLabelProps;
         popover?: PopoverProps;
         calendar?: CalendarProps<T>;
+        triggerButton?: IconButtonProps;
     };
 } & Omit<AriaDatePickerProps<T>, 'description' | 'validationState'>;
 export type DatePickerComponent = <T extends DateValue>(props: DatePickerProps<T>) => ReactElement | null;

package/dist/components/Divider/Divider.d.ts

@@ -11,4 +11,4 @@ export declare const Divider: (props: {
     flexItem?: boolean;
     disablePaddings?: boolean;
     as?: ElementType;
-} & Omit<import("@react-aria/separator").SeparatorProps, "elementType"> & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;
+} & Omit<import("react-aria").SeparatorProps, "elementType"> & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;

package/dist/components/Input/Input.js

@@ -94,6 +94,7 @@ const Input = forwardRef((props, ref) => {
     const clearButtonProps = mergeProps(
       {
         isClearable,
+        tabIndex: -1,
         isHidden: clearButtonIsHidden
       },
       slotProps?.clearButton

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,5 +1,5 @@
 import type { FormFieldProps, FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldControlGroupProps } from '../FormField';
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "description" | "validationState">, "caption" | "style" | "className" | `data-${string}` | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden"> & {
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("react-aria").AriaSearchFieldProps, "description" | "validationState">, "caption" | "style" | "className" | `data-${string}` | "startAddon" | "endAddon" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden"> & {
     className?: string;
     style?: import("react").CSSProperties;
     isLabelHidden?: boolean;

package/dist/components/Table/Table.js

@@ -24,6 +24,7 @@ function TableBase(props) {
   const {
     divider = "none",
     stickyHeader,
+    hideSelectAll = false,
     fullWidth,
     slotProps,
     isResizable,
@@ -67,7 +68,8 @@ function TableBase(props) {
         {
           state,
           column,
-          layoutState
+          layoutState,
+          hideSelectAll
         },
         column.key
       ) : /* @__PURE__ */ jsx(

package/dist/components/Table/components/TableColumnHeader/TableColumnHeader.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRef } from "react";
-import { useFocusRing, clsx, mergeProps } from "@koobiq/react-core";
+import { useFocusRing, useHover, clsx, mergeProps } from "@koobiq/react-core";
 import { IconChevronUpS16, IconChevronDownS16 } from "@koobiq/react-icons";
 import { useTableColumnHeader } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
@@ -32,11 +32,27 @@ function TableColumnHeader({
     allowsResizing
   } = column.props;
   const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({ isDisabled: !allowsSorting });
   const isActive = state.sortDescriptor?.column === column.key;
   const direction = isActive ? state.sortDescriptor?.direction : void 0;
-  const defaultIcon = direction === "ascending" ? /* @__PURE__ */ jsx(IconChevronUpS16, {}) : /* @__PURE__ */ jsx(IconChevronDownS16, {});
-  const iconToRender = renderSortIcon?.({ direction, isActive }) ?? defaultIcon;
-  const columnSortIcon = allowsSorting && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: clsx(s.sortIcon, isActive && s.active), children: iconToRender });
+  const defaultIcon = () => {
+    if (direction === "ascending") {
+      return /* @__PURE__ */ jsx(IconChevronUpS16, {});
+    }
+    if (direction === "descending") {
+      return /* @__PURE__ */ jsx(IconChevronDownS16, {});
+    }
+    return null;
+  };
+  const iconToRender = renderSortIcon?.({ direction, isActive }) ?? defaultIcon();
+  const columnSortIcon = allowsSorting && /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: clsx(s.sortIcon, (isActive || isHovered) && s.active),
+      children: iconToRender
+    }
+  );
   const isResizable = !!(allowsResizing && layoutState);
   return /* @__PURE__ */ jsx(
     "th",
@@ -54,7 +70,7 @@ function TableColumnHeader({
       "data-valign": valign || void 0,
       "data-allows-sorting": allowsSorting || void 0,
       "data-allows-resizing": isResizable || void 0,
-      ...mergeProps(columnHeaderProps, focusProps),
+      ...mergeProps(columnHeaderProps, hoverProps, focusProps),
       style: {
         ...styleProp,
         inlineSize: layoutState?.getColumnWidth(column.key)

package/dist/components/Table/components/TableSelectAllCell/TableSelectAllCell.d.ts

@@ -3,6 +3,7 @@ type TableSelectAllCellProps<T> = {
     column: AriaTableColumnHeaderProps<T>['node'];
     state: TableState<T>;
     layoutState?: TableColumnResizeState<T>;
+    hideSelectAll?: boolean;
 };
-export declare function TableSelectAllCell<T>({ column, state, layoutState, }: TableSelectAllCellProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TableSelectAllCell<T>({ column, state, layoutState, hideSelectAll, }: TableSelectAllCellProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/components/TableSelectAllCell/TableSelectAllCell.js

@@ -7,7 +7,8 @@ import { Checkbox } from "../../../Checkbox/Checkbox.js";
 function TableSelectAllCell({
   column,
   state,
-  layoutState
+  layoutState,
+  hideSelectAll = false
 }) {
   const ref = useRef(null);
   const { columnHeaderProps } = useTableColumnHeader(
@@ -16,6 +17,13 @@ function TableSelectAllCell({
     ref
   );
   const { checkboxProps } = useTableSelectAllCheckbox(state);
+  const isSingleSelection = state.selectionManager.selectionMode === "single";
+  let content = null;
+  if (isSingleSelection) {
+    content = /* @__PURE__ */ jsx(VisuallyHidden, { children: checkboxProps["aria-label"] });
+  } else if (!hideSelectAll) {
+    content = /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps });
+  }
   return /* @__PURE__ */ jsx(
     "th",
     {
@@ -25,7 +33,7 @@ function TableSelectAllCell({
         inlineSize: layoutState?.getColumnWidth(column.key)
       },
       ref,
-      children: state.selectionManager.selectionMode === "single" ? /* @__PURE__ */ jsx(VisuallyHidden, { children: checkboxProps["aria-label"] }) : /* @__PURE__ */ jsx(Checkbox, { ...checkboxProps })
+      children: content
     }
   );
 }

package/dist/components/Table/types.d.ts

@@ -26,6 +26,11 @@ export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'sele
     fullWidth?: boolean;
     /** Flag indicating a fixed table header. */
     stickyHeader?: boolean;
+    /**
+     * Hides the select-all checkbox in the table header during multiple selection.
+     * @default false
+     */
+    hideSelectAll?: boolean;
     /** Render function for a custom sort icon for the column */
     renderSortIcon?: TablePropSortIconRender;
     /**

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<import("@react-types/tooltip").TooltipTriggerProps, "children" | "style" | "className" | "id" | "placement" | `data-${string}` | "variant" | "offset" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<import("react-aria").TooltipTriggerProps, "children" | "style" | "className" | "id" | "placement" | `data-${string}` | "variant" | "offset" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
     open?: boolean;
     disabled?: boolean;
 }> & {

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

@@ -0,0 +1,17 @@
+import type { TreeProps } from '@koobiq/react-primitives';
+import './Tree.css';
+import { TreeItem, TreeItemContent, TreeLoadMoreItem } from './components';
+export type { TreeProps };
+export declare function TreeComponent<T extends object>({ className, ...props }: TreeProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TreeComponent {
+    var displayName: string;
+    var Item: typeof TreeItem;
+    var ItemContent: typeof TreeItemContent;
+    var LoadMoreItem: typeof TreeLoadMoreItem;
+}
+type CompoundedComponent = typeof TreeComponent & {
+    Item: typeof TreeItem;
+    ItemContent: typeof TreeItemContent;
+    LoadMoreItem: typeof TreeLoadMoreItem;
+};
+export declare const Tree: CompoundedComponent;

package/dist/components/Tree/Tree.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "@koobiq/react-core";
+import { Tree as Tree$1, composeRenderProps } from "@koobiq/react-primitives";
+/* empty css         */
+import { utilClasses } from "../../styles/utility.js";
+import { TreeItem } from "./components/TreeItem/TreeItem.js";
+import { TreeItemContent } from "./components/TreeItemContent/TreeItemContent.js";
+import { TreeLoadMoreItem } from "./components/TreeLoadMoreItem/TreeLoadMoreItem.js";
+const { list } = utilClasses;
+function TreeComponent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tree$1,
+    {
+      ...props,
+      className: composeRenderProps(
+        className,
+        (className2) => clsx("kbq-Tree", list, className2)
+      )
+    }
+  );
+}
+TreeComponent.displayName = "Tree";
+const Tree = TreeComponent;
+TreeComponent.Item = TreeItem;
+TreeComponent.ItemContent = TreeItemContent;
+TreeComponent.LoadMoreItem = TreeLoadMoreItem;
+export {
+  Tree,
+  TreeComponent
+};

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

@@ -0,0 +1,2 @@
+import type { TreeItemProps } from './types';
+export declare function TreeItem({ children, className, textValue, ...props }: TreeItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tree/components/TreeItem/TreeItem.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "@koobiq/react-core";
+import { TreeItem as TreeItem$1, composeRenderProps } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+const textVariant = utilClasses.typography;
+const { listItem } = utilClasses;
+function TreeItem({
+  children,
+  className,
+  textValue,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TreeItem$1,
+    {
+      ...props,
+      textValue: textValue ?? "",
+      className: composeRenderProps(
+        className,
+        (className2) => clsx("kbq-TreeItem", listItem, textVariant["text-normal"], className2)
+      ),
+      children
+    }
+  );
+}
+export {
+  TreeItem
+};

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

@@ -0,0 +1,2 @@
+export * from './TreeItem';
+export * from './types';

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

@@ -0,0 +1,3 @@
+import type { DataAttributeProps } from '@koobiq/react-core';
+import type { TreeItemProps as AriaTreeItemProps } from '@koobiq/react-primitives';
+export type TreeItemProps = Partial<AriaTreeItemProps> & DataAttributeProps;

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

@@ -0,0 +1,2 @@
+import type { TreeItemContentProps } from './types';
+export declare function TreeItemContent(props: TreeItemContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tree/components/TreeItemContent/TreeItemContent.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { mergeProps } from "@koobiq/react-core";
+import { IconChevronRightS16 } from "@koobiq/react-icons";
+import { TreeItemContent as TreeItemContent$1 } from "@koobiq/react-primitives";
+import { IconButton } from "../../../IconButton/IconButton.js";
+import { AnimatedIcon } from "../../../AnimatedIcon/AnimatedIcon.js";
+import { Checkbox } from "../../../Checkbox/Checkbox.js";
+function TreeItemContent(props) {
+  const { children, slotProps, ...other } = props;
+  return /* @__PURE__ */ jsx(TreeItemContent$1, { ...other, children: (renderProps) => {
+    const { selectionBehavior, selectionMode, isDisabled, isExpanded } = renderProps;
+    const chevronProps = mergeProps(
+      { variant: "fade-contrast", size: "l", isCompact: true, isDisabled },
+      slotProps?.chevron
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(IconButton, { slot: "chevron", "data-slot": "chevron", ...chevronProps, children: /* @__PURE__ */ jsx(
+        AnimatedIcon,
+        {
+          icons: [/* @__PURE__ */ jsx(IconChevronRightS16, {}, "chevron")],
+          directions: [0, 90],
+          activeIndex: +isExpanded
+        }
+      ) }),
+      selectionBehavior === "toggle" && selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { slot: "selection", ...slotProps?.checkbox }),
+      typeof children === "function" ? children(renderProps) : children
+    ] });
+  } });
+}
+export {
+  TreeItemContent
+};

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

@@ -0,0 +1,2 @@
+export * from './TreeItemContent';
+export * from './types';

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

@@ -0,0 +1,11 @@
+import type { DataAttributeProps } from '@koobiq/react-core';
+import type { TreeItemContentProps as AriaTreeItemContentProps } from '@koobiq/react-primitives';
+import type { CheckboxProps } from '../../../Checkbox';
+import type { IconButtonProps } from '../../../IconButton';
+export type TreeItemContentPropSlotProps = {
+    chevron?: Omit<IconButtonProps, 'slot' | 'children'> & DataAttributeProps;
+    checkbox?: Omit<CheckboxProps, 'slot'>;
+};
+export type TreeItemContentProps = AriaTreeItemContentProps & {
+    slotProps?: TreeItemContentPropSlotProps;
+} & DataAttributeProps;

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

@@ -0,0 +1,2 @@
+import { type TreeLoadMoreItemProps } from '@koobiq/react-primitives';
+export declare function TreeLoadMoreItem(props: TreeLoadMoreItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tree/components/TreeLoadMoreItem/TreeLoadMoreItem.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "@koobiq/react-core";
+import { TreeLoadMoreItem as TreeLoadMoreItem$1, composeRenderProps } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { ProgressSpinner } from "../../../ProgressSpinner/ProgressSpinner.js";
+import { Typography } from "../../../Typography/Typography.js";
+const { listItem } = utilClasses;
+function TreeLoadMoreItem(props) {
+  const { className, style, ...other } = props;
+  return /* @__PURE__ */ jsxs(
+    TreeLoadMoreItem$1,
+    {
+      ...other,
+      className: composeRenderProps(
+        className,
+        (className2) => clsx("kbq-TreeLoadMoreItem", listItem, className2)
+      ),
+      style: composeRenderProps(
+        style,
+        (style2, { level }) => ({
+          "--tree-item-level": level,
+          ...style2
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(ProgressSpinner, { isIndeterminate: true, "aria-label": "Loading more..." }),
+        /* @__PURE__ */ jsx(Typography, { children: "Loading more..." })
+      ]
+    }
+  );
+}
+export {
+  TreeLoadMoreItem
+};

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

@@ -0,0 +1 @@
+export * from './TreeLoadMoreItem';

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

@@ -0,0 +1,3 @@
+export * from './TreeLoadMoreItem';
+export * from './TreeItem';
+export * from './TreeItemContent';

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

@@ -0,0 +1,2 @@
+export * from './Tree';
+export * from './components';

package/dist/components/index.d.ts

@@ -47,6 +47,7 @@ export * from './Accordion';
 export * from './ContenPanel';
 export * from './Navbar';
 export * from './ActionsPanel';
+export * from './Tree';
 export * from './layout';
 export { useListData, useAsyncList, type ListData, type ListOptions, type AsyncListData, type AsyncListOptions, type AsyncListLoadFunction, type AsyncListLoadOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, useFilter, type Locale, type Key, type SortDescriptor, type Selection, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -118,6 +118,10 @@ import { navbarPropVariant } from "./components/Navbar/types.js";
 import { ActionsPanel } from "./components/ActionsPanel/ActionsPanel.js";
 import { ActionsPanelContainer } from "./components/ActionsPanel/components/ActionsPanelContainer/ActionsPanelContainer.js";
 import { ActionsPanelContext } from "./components/ActionsPanel/ActionsPanelContext.js";
+import { Tree, TreeComponent } from "./components/Tree/Tree.js";
+import { TreeLoadMoreItem } from "./components/Tree/components/TreeLoadMoreItem/TreeLoadMoreItem.js";
+import { TreeItem } from "./components/Tree/components/TreeItem/TreeItem.js";
+import { TreeItemContent } from "./components/Tree/components/TreeItemContent/TreeItemContent.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -220,6 +224,11 @@ export {
   ToastProvider,
   Toggle,
   Tooltip,
+  Tree,
+  TreeComponent,
+  TreeItem,
+  TreeItemContent,
+  TreeLoadMoreItem,
   Typography,
   alertPropStatus,
   autocompletePropLabelAlign,

package/dist/style.css

@@ -658,6 +658,10 @@
   display: inline-flex;
 }
 
+.kbq-iconbutton-0ff1bd > * {
+  flex-shrink: 0;
+}
+
 .kbq-iconbutton-l-2f8f66 {
   --icon-button-size: 24px;
   --icon-button-padding: var(--kbq-size-xxs);
@@ -4081,6 +4085,10 @@
 
 .kbq-tablecolumnheader-sortIcon-b98bf4 {
   visibility: hidden;
+  opacity: 1;
+  inline-size: var(--kbq-size-l);
+  justify-content: center;
+  align-items: center;
   display: flex;
 }
 
@@ -5704,6 +5712,74 @@ body[data-resizing="true"] .kbq-contentpanel-3541ee {
 .kbq-actionpanelcontainer-panel-0ab5be {
   position: absolute;
 }
+.kbq-Tree {
+  --tree-item-level: ;
+  --tree-item-padding: var(--kbq-size-m);
+  box-sizing: border-box;
+  forced-color-adjust: none;
+  outline: none;
+  flex-direction: column;
+  display: flex;
+  overflow: auto;
+}
+
+.kbq-Tree[data-empty] {
+  min-block-size: 100px;
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  justify-content: center;
+  align-items: center;
+}
+
+.kbq-TreeItem {
+  padding-inline-start: calc((var(--tree-item-level)) * var(--tree-item-padding));
+}
+
+.kbq-TreeItem:not([data-disabled], [data-has-child-items], [data-selection-mode]) {
+  cursor: default;
+}
+
+.kbq-TreeItem:not([data-disabled])[data-has-child-items], .kbq-TreeItem:not([data-disabled])[data-selection-mode], .kbq-TreeItem:not([data-disabled])[data-href] {
+  cursor: pointer;
+}
+
+.kbq-TreeItem[data-disabled]:not([data-has-child-items], [data-selection-mode]) {
+  cursor: default;
+}
+
+.kbq-TreeItem [data-slot="chevron"] {
+  visibility: hidden;
+  margin-block: var(--kbq-size-3xs);
+}
+
+.kbq-TreeItem[data-has-child-items] [data-slot="chevron"] {
+  visibility: visible;
+}
+
+.kbq-TreeLoader {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.kbq-TreeLoadMoreItem {
+  align-items: center;
+  gap: var(--kbq-size-m);
+  cursor: default;
+  padding-inline-start: calc((var(--tree-item-level)) * var(--tree-item-padding)  + 24px);
+  display: flex;
+}
+
+.kbq-TreeLoadMoreItem > * {
+  display: contents;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.27.1",
+  "version": "0.28.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.15.2",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.27.1",
-    "@koobiq/react-icons": "0.27.1",
-    "@koobiq/react-primitives": "0.27.1",
-    "@koobiq/react-core": "0.27.1"
+    "@koobiq/logger": "0.28.0",
+    "@koobiq/react-core": "0.28.0",
+    "@koobiq/react-icons": "0.28.0",
+    "@koobiq/react-primitives": "0.28.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.15.2",