@usefui/components 1.5.3 → 1.6.0

package/dist/index.js

@@ -70,6 +70,10 @@ __export(index_exports, {
   FieldMeta: () => FieldMeta,
   FieldRoot: () => FieldRoot,
   FieldWrapper: () => FieldWrapper,
+  MessageBubble: () => MessageBubble,
+  MessageBubbleContent: () => MessageBubbleContent,
+  MessageBubbleMeta: () => MessageBubbleMeta,
+  MessageBubbleRoot: () => MessageBubbleRoot,
   MetaVariantEnum: () => MetaVariantEnum,
   OTPField: () => OTPField,
   OTPFieldSlot: () => OTPFieldSlot,
@@ -88,6 +92,7 @@ __export(index_exports, {
   Sheet: () => Sheet,
   SheetRoot: () => SheetRoot,
   SheetTrigger: () => SheetTrigger,
+  Shimmer: () => Shimmer,
   Skeleton: () => Skeleton,
   Spinner: () => Spinner,
   Switch: () => Switch,
@@ -112,16 +117,24 @@ __export(index_exports, {
   ToolbarSection: () => ToolbarSection,
   ToolbarTrigger: () => ToolbarTrigger,
   Tooltip: () => Tooltip,
+  Tree: () => Tree,
+  TreeContent: () => TreeContent,
+  TreeNode: () => TreeNode,
+  TreeRoot: () => TreeRoot,
+  TreeTrigger: () => TreeTrigger,
   useAccordion: () => useAccordion,
   useCheckbox: () => useCheckbox,
   useCollapsible: () => useCollapsible,
   useDialog: () => useDialog,
   useDropdownMenu: () => useDropdownMenu,
   useField: () => useField,
+  useMessageBubble: () => useMessageBubble,
   useSheet: () => useSheet,
   useSwitch: () => useSwitch,
   useTabs: () => useTabs,
-  useToolbar: () => useToolbar
+  useToolbar: () => useToolbar,
+  useTree: () => useTree,
+  useTreeNode: () => useTreeNode
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1016,7 +1029,9 @@ var defaultComponentAPI2 = {
 };
 var CheckboxContext = (0, import_react8.createContext)(defaultComponentAPI2);
 var useCheckbox = () => (0, import_react8.useContext)(CheckboxContext);
-var CheckboxProvider = ({ children }) => {
+var CheckboxProvider = ({
+  children
+}) => {
   const context = useCheckboxProvider();
   return /* @__PURE__ */ import_react8.default.createElement(CheckboxContext.Provider, { value: context }, children);
 };
@@ -1460,7 +1475,9 @@ var defaultComponentAPI4 = {
 };
 var DialogContext = (0, import_react13.createContext)(defaultComponentAPI4);
 var useDialog = () => (0, import_react13.useContext)(DialogContext);
-var DialogProvider = ({ children }) => {
+var DialogProvider = ({
+  children
+}) => {
   const context = useDialogProvider();
   return /* @__PURE__ */ import_react13.default.createElement(DialogContext.Provider, { value: context }, children);
 };
@@ -1902,7 +1919,10 @@ var DropdownMenu = ({ children }) => {
   const handleClickOutside = () => {
     if (states.open && toggleOpen) toggleOpen();
   };
-  useClickOutside(DropdownContentRef, handleClickOutside);
+  useClickOutside(
+    DropdownContentRef,
+    handleClickOutside
+  );
   useDisabledScroll(Boolean(states.open));
   return /* @__PURE__ */ import_react19.default.createElement(RootWrapper, { ref: DropdownContentRef }, children);
 };
@@ -2078,7 +2098,9 @@ var defaultComponentAPI5 = {
 };
 var FieldContext = (0, import_react20.createContext)(defaultComponentAPI5);
 var useField = () => (0, import_react20.useContext)(FieldContext);
-var FieldProvider = ({ children }) => {
+var FieldProvider = ({
+  children
+}) => {
   const context = useFieldProvider();
   return /* @__PURE__ */ import_react20.default.createElement(FieldContext.Provider, { value: context }, children);
 };
@@ -2371,23 +2393,175 @@ Field.Wrapper = FieldWrapper;
 Field.Label = FieldLabel;
 Field.Meta = FieldMeta;
 
-// src/otp-field/index.tsx
+// src/message-bubble/index.tsx
 var import_react23 = __toESM(require("react"));
 
-// src/otp-field/hooks/index.tsx
+// src/message-bubble/hooks/index.tsx
 var import_react22 = __toESM(require("react"));
-var OTPFieldContext = import_react22.default.createContext(
+var defaultComponentAPI6 = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var MessageBubbleContext = (0, import_react22.createContext)(defaultComponentAPI6);
+var useMessageBubble = () => (0, import_react22.useContext)(MessageBubbleContext);
+var MessageBubbleProvider = ({
+  children
+}) => {
+  const context = useMessageBubbleProvider();
+  return /* @__PURE__ */ import_react22.default.createElement(MessageBubbleContext.Provider, { value: context }, children);
+};
+function useMessageBubbleProvider() {
+  const [side, setSide] = (0, import_react22.useState)(null);
+  const MessageBubbleId = import_react22.default.useId();
+  return {
+    id: MessageBubbleId,
+    states: {
+      side
+    },
+    methods: {
+      applySide: (side2) => setSide(side2)
+    }
+  };
+}
+
+// src/message-bubble/styles/index.ts
+var import_styled_components11 = __toESM(require("styled-components"));
+var MessageBubbleWrapper = import_styled_components11.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--measurement-medium-10);
+
+  &[data-side="right"] {
+    align-items: flex-end;
+  }
+
+  &[data-side="left"] {
+    align-items: flex-start;
+  }
+`;
+var MessageBubbleBadge = (0, import_styled_components11.default)(Badge)`
+  position: relative;
+  max-width: var(--measurement-large-90);
+  width: 100%;
+  justify-self: flex-end;
+  padding: var(--measurement-medium-30) var(--measurement-medium-50) !important;
+  border-radius: var(--measurement-medium-60) !important;
+
+  &[data-side="left"] {
+    background-color: var(--contrast-color) !important;
+    border-bottom-left-radius: 0 !important;
+  }
+
+  &[data-side="right"] {
+    background-color: var(--font-color-alpha-10) !important;
+    border-bottom-right-radius: 0 !important;
+  }
+`;
+var MessageBubbleContentWrapper = import_styled_components11.default.div`
+  line-height: 1.5;
+  font-weight: 500;
+  word-break: keep-all;
+  width: 100%;
+
+  * {
+    font-size: var(--fontsize-medium-10) !important;
+  }
+`;
+var MessageBubbleMetaWrapper = import_styled_components11.default.div`
+  display: flex;
+  align-items: center;
+  gap: var(--measurement-medium-10);
+  width: 100%;
+
+  &[data-side="right"] {
+    justify-content: flex-end;
+  }
+
+  &[data-side="left"] {
+    justify-content: flex-start;
+  }
+`;
+
+// src/message-bubble/index.tsx
+var MessageBubbleRoot = ({ children }) => {
+  return /* @__PURE__ */ import_react23.default.createElement(MessageBubbleProvider, null, children);
+};
+MessageBubbleRoot.displayName = "MessageBubble.Root";
+var MessageBubble = (props) => {
+  const { side, raw, children, ...restProps } = props;
+  const { methods } = useMessageBubble();
+  import_react23.default.useEffect(() => {
+    if (side && methods?.applySide) methods.applySide(side);
+  }, [side]);
+  return /* @__PURE__ */ import_react23.default.createElement(
+    MessageBubbleWrapper,
+    {
+      "data-raw": Boolean(raw),
+      "data-side": side,
+      "aria-label": restProps["aria-label"] ?? `message-bubble-${side}`,
+      ...restProps
+    },
+    children
+  );
+};
+MessageBubble.displayName = "MessageBubble";
+var MessageBubbleContent = (props) => {
+  const { children, raw, ...restProps } = props;
+  const { id, states } = useMessageBubble();
+  return /* @__PURE__ */ import_react23.default.createElement(
+    MessageBubbleBadge,
+    {
+      variant: "secondary",
+      "data-raw": Boolean(raw),
+      "data-side": states?.side,
+      "aria-label": `message-bubble-content-${id}`,
+      ...restProps
+    },
+    /* @__PURE__ */ import_react23.default.createElement(MessageBubbleContentWrapper, null, children)
+  );
+};
+MessageBubbleContent.displayName = "MessageBubble.Content";
+var MessageBubbleMeta = (props) => {
+  const { createdAt, raw, ...restProps } = props;
+  const { states } = useMessageBubble();
+  const formattedDate = new Intl.DateTimeFormat("en-US", {
+    dateStyle: "medium",
+    timeStyle: "short"
+  }).format(createdAt);
+  return /* @__PURE__ */ import_react23.default.createElement(
+    MessageBubbleMetaWrapper,
+    {
+      "data-raw": Boolean(raw),
+      "data-side": states?.side,
+      "aria-label": `message-bubble-meta-${states?.side}`,
+      ...restProps
+    },
+    formattedDate
+  );
+};
+MessageBubbleMeta.displayName = "MessageBubble.Meta";
+MessageBubble.Root = MessageBubbleRoot;
+MessageBubble.Content = MessageBubbleContent;
+MessageBubble.Meta = MessageBubbleMeta;
+
+// src/otp-field/index.tsx
+var import_react25 = __toESM(require("react"));
+
+// src/otp-field/hooks/index.tsx
+var import_react24 = __toESM(require("react"));
+var OTPFieldContext = import_react24.default.createContext(
   null
 );
 var useOTPField = () => {
-  const context = import_react22.default.useContext(OTPFieldContext);
+  const context = import_react24.default.useContext(OTPFieldContext);
   if (!context) return null;
   return context;
 };
 
 // src/otp-field/styles/index.ts
-var import_styled_components11 = __toESM(require("styled-components"));
-var OTPCell = import_styled_components11.default.input`
+var import_styled_components12 = __toESM(require("styled-components"));
+var OTPCell = import_styled_components12.default.input`
   width: var(--measurement-medium-90);
   height: var(--measurement-medium-90);
   border: var(--measurement-small-10) solid var(--font-color-alpha-10);
@@ -2422,11 +2596,11 @@ var OTPCell = import_styled_components11.default.input`
 // src/otp-field/index.tsx
 var OTPField = ({ children, length, onComplete }) => {
   const defaultLength = length ?? 6;
-  const inputRefs = import_react23.default.useRef([]);
-  const [otp, setOtp] = import_react23.default.useState(
+  const inputRefs = import_react25.default.useRef([]);
+  const [otp, setOtp] = import_react25.default.useState(
     Array.from({ length: defaultLength }, () => "")
   );
-  const [activeIndex, setActiveIndex] = import_react23.default.useState(0);
+  const [activeIndex, setActiveIndex] = import_react25.default.useState(0);
   const handleChange = (index, value) => {
     const newOtp = [...otp];
     newOtp[index] = value.substring(value.length - 1);
@@ -2487,13 +2661,13 @@ var OTPField = ({ children, length, onComplete }) => {
     );
     return () => clearTimeout(timeout);
   };
-  import_react23.default.useEffect(() => {
+  import_react25.default.useEffect(() => {
     const otpString = otp.join("");
     if (otpString.length === defaultLength && onComplete) {
       onComplete(otpString);
     }
   }, [otp, defaultLength, onComplete]);
-  const contextValue = import_react23.default.useMemo(() => {
+  const contextValue = import_react25.default.useMemo(() => {
     return {
       otp,
       activeIndex,
@@ -2516,11 +2690,11 @@ var OTPField = ({ children, length, onComplete }) => {
     handleClick,
     handlePaste
   ]);
-  return /* @__PURE__ */ import_react23.default.createElement(OTPFieldContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ import_react25.default.createElement(OTPFieldContext.Provider, { value: contextValue }, children);
 };
 OTPField.displayName = "OTPField";
-var OTPFieldGroup = import_react23.default.forwardRef(({ ...props }, ref) => {
-  return /* @__PURE__ */ import_react23.default.createElement("span", { ref, className: "flex g-medium-10 align-center", ...props });
+var OTPFieldGroup = import_react25.default.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ import_react25.default.createElement("span", { ref, className: "flex g-medium-10 align-center", ...props });
 });
 OTPFieldGroup.displayName = "OTPField.Group";
 var OTPFieldSlot = ({
@@ -2539,10 +2713,12 @@ var OTPFieldSlot = ({
     handleClick,
     handlePaste
   } = context;
-  return /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(
     OTPCell,
     {
-      ref: (el) => inputRefs.current[index] = el,
+      ref: (el) => {
+        inputRefs.current[index] = el;
+      },
       type: "text",
       "data-testid": "otp-field-slot",
       "data-active": activeIndex === index,
@@ -2565,11 +2741,11 @@ OTPField.Group = OTPFieldGroup;
 OTPField.Slot = OTPFieldSlot;
 
 // src/overlay/index.tsx
-var import_react24 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 
 // src/overlay/styles/index.ts
-var import_styled_components12 = __toESM(require("styled-components"));
-var OverlayWrapper = import_styled_components12.default.div`
+var import_styled_components13 = __toESM(require("styled-components"));
+var OverlayWrapper = import_styled_components13.default.div`
   @keyframes animate-fade {
     0% {
       opacity: 0;
@@ -2597,15 +2773,15 @@ var OverlayWrapper = import_styled_components12.default.div`
 // src/overlay/index.tsx
 var Overlay = (props) => {
   const { raw, visible, closeOnInteract, onClick, ...restProps } = props;
-  const [mounted, setMounted] = import_react24.default.useState(Boolean(visible));
+  const [mounted, setMounted] = import_react26.default.useState(Boolean(visible));
   const handleClick = (event) => {
     if (onClick) onClick(event);
     if (closeOnInteract) setMounted(false);
   };
-  import_react24.default.useEffect(() => {
+  import_react26.default.useEffect(() => {
     if (visible !== mounted) setMounted(Boolean(visible));
   }, [visible]);
-  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, mounted && /* @__PURE__ */ import_react24.default.createElement(
+  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, mounted && /* @__PURE__ */ import_react26.default.createElement(
     OverlayWrapper,
     {
       tabIndex: -1,
@@ -2619,14 +2795,14 @@ var Overlay = (props) => {
 Overlay.displayName = "Overlay";
 
 // src/page/index.tsx
-var import_react25 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 
 // src/page/styles/index.ts
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/scrollarea/styles/index.ts
-var import_styled_components13 = __toESM(require("styled-components"));
-var HiddenScrollbar = import_styled_components13.css`
+var import_styled_components14 = __toESM(require("styled-components"));
+var HiddenScrollbar = import_styled_components14.css`
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -2638,7 +2814,7 @@ var HiddenScrollbar = import_styled_components13.css`
     display: none;
   }
 `;
-var CustomScrollbar = import_styled_components13.css`
+var CustomScrollbar = import_styled_components14.css`
   height: ${({ $height }) => $height || "100%"};
   width: ${({ $width }) => $width || "100%"};
   overflow-y: auto;
@@ -2670,7 +2846,7 @@ var CustomScrollbar = import_styled_components13.css`
   scrollbar-width: thin;
   scrollbar-color: ${({ $thumbColor, $trackColor }) => `${$thumbColor || "var(--font-color-alpha-10)"} ${$trackColor || "transparent"}`};
 `;
-var ScrollAreaWrapper = import_styled_components13.default.div`
+var ScrollAreaWrapper = import_styled_components14.default.div`
   overflow: scroll;
 
   &[data-scrollbar="true"] {
@@ -2682,11 +2858,11 @@ var ScrollAreaWrapper = import_styled_components13.default.div`
 `;
 
 // src/page/styles/index.ts
-var PageRootWrapper = import_styled_components14.default.div`
+var PageRootWrapper = import_styled_components15.default.div`
   height: 100dvh;
   width: 100%;
 `;
-var PageNavWrapper = import_styled_components14.default.nav`
+var PageNavWrapper = import_styled_components15.default.nav`
   background-color: var(--body-color);
   border: var(--measurement-small-10) solid transparent;
   border-bottom-color: var(--font-color-alpha-10);
@@ -2695,7 +2871,7 @@ var PageNavWrapper = import_styled_components14.default.nav`
   max-height: var(--measurement-large-20);
   padding: var(--measurement-medium-30);
 `;
-var PageMenuWrapper = import_styled_components14.default.menu`
+var PageMenuWrapper = import_styled_components15.default.menu`
   background-color: var(--body-color);
   border: var(--measurement-small-10) solid transparent;
   border-bottom-color: var(--font-color-alpha-10);
@@ -2705,19 +2881,19 @@ var PageMenuWrapper = import_styled_components14.default.menu`
   margin: 0;
   padding: var(--measurement-medium-60) var(--measurement-medium-30);
 `;
-var PagePanelWrapper = import_styled_components14.default.aside`
+var PagePanelWrapper = import_styled_components15.default.aside`
   position: absolute;
   bottom: 0;
   width: 100%;
   overflow: scroll;
   ${HiddenScrollbar}
 `;
-var PageSectionWrapper = import_styled_components14.default.div`
+var PageSectionWrapper = import_styled_components15.default.div`
   background: var(--body-color);
   width: 100%;
   height: 100%;
 `;
-var PageBodyWrapper = import_styled_components14.default.div`
+var PageBodyWrapper = import_styled_components15.default.div`
   --menus-height: calc(
     var(--measurement-large-30) *
       ${({ $menus }) => $menus ? Number($menus) : 0}
@@ -2742,12 +2918,12 @@ var PageBodyWrapper = import_styled_components14.default.div`
 // src/page/index.tsx
 var Page = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ import_react25.default.createElement(PageRootWrapper, { className: "flex", ...props }, children);
+  return /* @__PURE__ */ import_react27.default.createElement(PageRootWrapper, { className: "flex", ...props }, children);
 };
 Page.displayName = "Page";
 var PageNavigation = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ import_react25.default.createElement(PageNavWrapper, { ...props }, children);
+  return /* @__PURE__ */ import_react27.default.createElement(PageNavWrapper, { ...props }, children);
 };
 PageNavigation.displayName = "Page.Navigation";
 var PageTools = (props) => {
@@ -2769,7 +2945,7 @@ var PageTools = (props) => {
   const handleClick = (event) => {
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react25.default.createElement(Toolbar.Root, null, /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react27.default.createElement(Toolbar.Root, null, /* @__PURE__ */ import_react27.default.createElement(
     Toolbar,
     {
       raw,
@@ -2781,27 +2957,27 @@ var PageTools = (props) => {
       defaultOpen,
       ...props
     },
-    /* @__PURE__ */ import_react25.default.createElement(Toolbar.Section, { showoncollapse }, children),
-    !fixed && /* @__PURE__ */ import_react25.default.createElement(
+    /* @__PURE__ */ import_react27.default.createElement(Toolbar.Section, { showoncollapse }, children),
+    !fixed && /* @__PURE__ */ import_react27.default.createElement(
       Toolbar.Trigger,
       {
         title: shortcut ? `${bindkey ?? "ctrl"} + ${hotkey}` : "toolbar-trigger",
         onClick: handleClick,
         ...triggerProps
       },
-      trigger ?? /* @__PURE__ */ import_react25.default.createElement("span", null, "\u2194")
+      trigger ?? /* @__PURE__ */ import_react27.default.createElement("span", null, "\u2194")
     )
   ));
 };
 PageTools.displayName = "Page.Tools";
 var PageContent = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ import_react25.default.createElement(ScrollArea, { as: PageSectionWrapper, ...props }, children);
+  return /* @__PURE__ */ import_react27.default.createElement(ScrollArea, { as: PageSectionWrapper, ...props }, children);
 };
 PageContent.displayName = "Page.Content";
 var PageWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ import_react25.default.createElement(PageBodyWrapper, { ...props }, children);
+  return /* @__PURE__ */ import_react27.default.createElement(PageBodyWrapper, { ...props }, children);
 };
 PageWrapper.displayName = "Page.Wrapper";
 var PagePanel = (props) => {
@@ -2824,7 +3000,7 @@ var PagePanel = (props) => {
   const handleClick = (event) => {
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react25.default.createElement(Toolbar.Root, null, /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react27.default.createElement(Toolbar.Root, null, /* @__PURE__ */ import_react27.default.createElement(
     PagePanelWrapper,
     {
       as: Toolbar,
@@ -2838,22 +3014,22 @@ var PagePanel = (props) => {
       defaultOpen,
       "aria-label": props["aria-label"]
     },
-    !fixed && /* @__PURE__ */ import_react25.default.createElement(
+    !fixed && /* @__PURE__ */ import_react27.default.createElement(
       Toolbar.Trigger,
       {
         title: shortcut ? `${bindkey ?? "ctrl"} + ${hotkey}` : "toolbar-trigger",
         onClick: handleClick,
         ...triggerProps
       },
-      trigger ?? /* @__PURE__ */ import_react25.default.createElement("span", { style: { transform: "rotate(90deg)" } }, "\u2194")
+      trigger ?? /* @__PURE__ */ import_react27.default.createElement("span", { style: { transform: "rotate(90deg)" } }, "\u2194")
     ),
-    /* @__PURE__ */ import_react25.default.createElement(Toolbar.Section, { showoncollapse }, children)
+    /* @__PURE__ */ import_react27.default.createElement(Toolbar.Section, { showoncollapse }, children)
   ));
 };
 PagePanel.displayName = "Page.Panel";
 var PageMenu = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ import_react25.default.createElement(PageMenuWrapper, { ...props }, children);
+  return /* @__PURE__ */ import_react27.default.createElement(PageMenuWrapper, { ...props }, children);
 };
 PageMenu.displayName = "Page.Menu";
 Page.Navigation = PageNavigation;
@@ -2864,14 +3040,14 @@ Page.Panel = PagePanel;
 Page.Menu = PageMenu;
 
 // src/portal/index.tsx
-var import_react26 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var Portal = (props) => {
   if (typeof document === "undefined") return null;
   const { container, children } = props;
-  const [hasMounted, setHasMounted] = import_react26.default.useState(false);
-  const [portalRoot, setPortalRoot] = import_react26.default.useState(null);
-  import_react26.default.useEffect(() => {
+  const [hasMounted, setHasMounted] = import_react28.default.useState(false);
+  const [portalRoot, setPortalRoot] = import_react28.default.useState(null);
+  import_react28.default.useEffect(() => {
     setHasMounted(true);
     setPortalRoot(document.querySelector(`#${container}`));
   }, [container]);
@@ -2881,18 +3057,18 @@ var Portal = (props) => {
 Portal.displayName = "Portal";
 
 // src/privacy-field/index.tsx
-var import_react27 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 
 // src/privacy-field/styles/index.ts
-var import_styled_components15 = __toESM(require("styled-components"));
-var Wrapper = (0, import_styled_components15.default)(Field.Wrapper)`
+var import_styled_components16 = __toESM(require("styled-components"));
+var Wrapper = (0, import_styled_components16.default)(Field.Wrapper)`
   position: relative;
 
   input {
     width: 100% !important;
   }
 `;
-var Trigger = (0, import_styled_components15.default)(Button)`
+var Trigger = (0, import_styled_components16.default)(Button)`
   position: absolute !important;
   right: var(--measurement-medium-50);
   top: calc(var(--measurement-medium-50));
@@ -2905,30 +3081,30 @@ var PrivacyField = ({
   passwordIcon,
   ...restProps
 }) => {
-  const [type, setType] = import_react27.default.useState(
+  const [type, setType] = import_react29.default.useState(
     defaultType ?? "password"
   );
-  const handleChangeType = import_react27.default.useCallback(() => {
+  const handleChangeType = import_react29.default.useCallback(() => {
     if (type === "text") setType("password");
     if (type === "password") setType("text");
   }, [type, setType]);
-  return /* @__PURE__ */ import_react27.default.createElement(Wrapper, { className: "flex" }, /* @__PURE__ */ import_react27.default.createElement(Field, { autoComplete: "off", type, ...restProps }), /* @__PURE__ */ import_react27.default.createElement(Trigger, { variant: "ghost", sizing: "small", onClick: handleChangeType }, type === "text" && textIcon, type === "password" && passwordIcon));
+  return /* @__PURE__ */ import_react29.default.createElement(Wrapper, { className: "flex" }, /* @__PURE__ */ import_react29.default.createElement(Field, { autoComplete: "off", type, ...restProps }), /* @__PURE__ */ import_react29.default.createElement(Trigger, { variant: "ghost", sizing: "small", onClick: handleChangeType }, type === "text" && textIcon, type === "password" && passwordIcon));
 };
 PrivacyField.displayName = "PrivacyField";
 
 // src/resizable/index.tsx
-var import_react28 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 
 // src/resizable/styles/index.ts
-var import_styled_components16 = __toESM(require("styled-components"));
-var SplitContainer = import_styled_components16.default.div`
+var import_styled_components17 = __toESM(require("styled-components"));
+var SplitContainer = import_styled_components17.default.div`
   position: relative;
 `;
-var Panel = import_styled_components16.default.div`
+var Panel = import_styled_components17.default.div`
   overflow: hidden;
   width: ${(props) => props.width}%;
 `;
-var Divider2 = import_styled_components16.default.div`
+var Divider2 = import_styled_components17.default.div`
   width: var(--measurement-medium-10);
   height: 100%;
   top: 0;
@@ -2952,14 +3128,14 @@ var Divider2 = import_styled_components16.default.div`
     height: ${(props) => props.$dragging ? "var(--measurement-large-10)" : "var(--measurement-medium-60)"};
   }
 `;
-var DragHandle = import_styled_components16.default.div`
+var DragHandle = import_styled_components17.default.div`
   position: absolute;
   top: 0;
   bottom: 0;
   left: calc(var(--measurement-medium-10) * -1);
   right: calc(var(--measurement-medium-10) * -1);
 `;
-var DragIndicator = import_styled_components16.default.div`
+var DragIndicator = import_styled_components17.default.div`
   position: fixed;
   width: var(--measurement-medium-10);
   /* height: var(--measurement-medium-60); */
@@ -2969,7 +3145,7 @@ var DragIndicator = import_styled_components16.default.div`
   opacity: 0;
   transition: all 0.2s;
 `;
-var DragOverlay = import_styled_components16.default.div`
+var DragOverlay = import_styled_components17.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -2985,12 +3161,12 @@ var Resizable = ({
   left,
   right
 }) => {
-  const containerRef = import_react28.default.useRef(null);
-  const [leftWidth, setLeftWidth] = import_react28.default.useState(defaultWidth ?? 50);
-  const [isDragging, setIsDragging] = import_react28.default.useState(false);
-  const handleMouseDown = import_react28.default.useCallback(() => setIsDragging(true), []);
-  const handleMouseUp = import_react28.default.useCallback(() => setIsDragging(false), []);
-  const handleMouseMove = import_react28.default.useCallback(
+  const containerRef = import_react30.default.useRef(null);
+  const [leftWidth, setLeftWidth] = import_react30.default.useState(defaultWidth ?? 50);
+  const [isDragging, setIsDragging] = import_react30.default.useState(false);
+  const handleMouseDown = import_react30.default.useCallback(() => setIsDragging(true), []);
+  const handleMouseUp = import_react30.default.useCallback(() => setIsDragging(false), []);
+  const handleMouseMove = import_react30.default.useCallback(
     (e) => {
       if (!isDragging || !containerRef.current) return;
       const containerRect = containerRef.current.getBoundingClientRect();
@@ -3004,7 +3180,7 @@ var Resizable = ({
     },
     [isDragging]
   );
-  import_react28.default.useEffect(() => {
+  import_react30.default.useEffect(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -3023,45 +3199,47 @@ var Resizable = ({
       document.body.style.userSelect = "";
     };
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement(SplitContainer, { ref: containerRef, className: "h-100 flex" }, /* @__PURE__ */ import_react28.default.createElement(Panel, { width: leftWidth }, left), /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(SplitContainer, { ref: containerRef, className: "h-100 flex" }, /* @__PURE__ */ import_react30.default.createElement(Panel, { width: leftWidth }, left), /* @__PURE__ */ import_react30.default.createElement(
     Divider2,
     {
       $dragging: isDragging,
       onMouseDown: handleMouseDown,
       onTouchStart: handleMouseDown
     },
-    /* @__PURE__ */ import_react28.default.createElement(
+    /* @__PURE__ */ import_react30.default.createElement(
       DragHandle,
       {
         className: "flex align-center justify-center",
         id: "drag-handle"
       },
-      /* @__PURE__ */ import_react28.default.createElement(DragIndicator, { className: "drag-indicator-handle" })
+      /* @__PURE__ */ import_react30.default.createElement(DragIndicator, { className: "drag-indicator-handle" })
     )
-  ), /* @__PURE__ */ import_react28.default.createElement(Panel, { width: 100 - leftWidth }, right)), isDragging && /* @__PURE__ */ import_react28.default.createElement(DragOverlay, null));
+  ), /* @__PURE__ */ import_react30.default.createElement(Panel, { width: 100 - leftWidth }, right)), isDragging && /* @__PURE__ */ import_react30.default.createElement(DragOverlay, null));
 };
 Resizable.displayName = "Resizable";
 
 // src/sheet/index.tsx
-var import_react30 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 
 // src/sheet/hooks/index.tsx
-var import_react29 = __toESM(require("react"));
-var SheetContext = import_react29.default.createContext({
+var import_react31 = __toESM(require("react"));
+var SheetContext = import_react31.default.createContext({
   id: {},
   states: {},
   methods: {}
 });
-var useSheet = () => import_react29.default.useContext(SheetContext);
-var SheetProvider = ({ children }) => {
+var useSheet = () => import_react31.default.useContext(SheetContext);
+var SheetProvider = ({
+  children
+}) => {
   const context = useSheetProvider();
-  return /* @__PURE__ */ import_react29.default.createElement(SheetContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react31.default.createElement(SheetContext.Provider, { value: context }, children);
 };
 function useSheetProvider() {
-  const containerId = import_react29.default.useId();
-  const triggerId = import_react29.default.useId();
-  const controlId = import_react29.default.useId();
-  const [open, setOpen] = import_react29.default.useState(false);
+  const containerId = import_react31.default.useId();
+  const triggerId = import_react31.default.useId();
+  const controlId = import_react31.default.useId();
+  const [open, setOpen] = import_react31.default.useState(false);
   return {
     id: {
       containerId,
@@ -3079,8 +3257,8 @@ function useSheetProvider() {
 }
 
 // src/sheet/styles/index.ts
-var import_styled_components17 = __toESM(require("styled-components"));
-var SheetStyles = import_styled_components17.css`
+var import_styled_components18 = __toESM(require("styled-components"));
+var SheetStyles = import_styled_components18.css`
   all: unset;
   position: fixed;
   background-color: var(--body-color);
@@ -3111,7 +3289,7 @@ var SheetStyles = import_styled_components17.css`
   animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
   animation-fill-mode: backwards;
 `;
-var SheetSizeStyles = import_styled_components17.css`
+var SheetSizeStyles = import_styled_components18.css`
   &[data-size="small"] {
     width: var(--measurement-large-80);
   }
@@ -3124,7 +3302,7 @@ var SheetSizeStyles = import_styled_components17.css`
     width: calc(var(--measurement-large-90) * 1.5);
   }
 `;
-var SheetSideStyles = import_styled_components17.css`
+var SheetSideStyles = import_styled_components18.css`
   top: 0;
 
   &[data-side="right"] {
@@ -3139,7 +3317,7 @@ var SheetSideStyles = import_styled_components17.css`
     animation-name: slide-left;
   }
 `;
-var SheetWrapper = import_styled_components17.default.dialog`
+var SheetWrapper = import_styled_components18.default.dialog`
   &[data-raw="false"] {
     ${SheetStyles}
     ${SheetSideStyles}
@@ -3149,7 +3327,7 @@ var SheetWrapper = import_styled_components17.default.dialog`
 
 // src/sheet/index.tsx
 var SheetRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react30.default.createElement(SheetProvider, null, children);
+  return /* @__PURE__ */ import_react32.default.createElement(SheetProvider, null, children);
 };
 SheetRoot.displayName = "Sheet.Root";
 var Sheet = (props) => {
@@ -3170,16 +3348,16 @@ var Sheet = (props) => {
   const { id, states, methods } = useSheet();
   const { toggle } = methods;
   const shortcutControls = useKeyPress(String(hotkey), true, bindkey);
-  import_react30.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (open && toggle) return toggle();
   }, [open]);
-  import_react30.default.useEffect(() => {
+  import_react32.default.useEffect(() => {
     if (shortcut && shortcutControls && toggle) {
       return toggle();
     }
   }, [shortcutControls]);
   useDisabledScroll(lock && Boolean(states.open));
-  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, states.open && /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, states.open && /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, /* @__PURE__ */ import_react32.default.createElement(
     SheetWrapper,
     {
       role: "dialog",
@@ -3196,7 +3374,7 @@ var Sheet = (props) => {
       ...restProps
     },
     children
-  ), overlay && /* @__PURE__ */ import_react30.default.createElement(
+  ), overlay && /* @__PURE__ */ import_react32.default.createElement(
     Overlay,
     {
       onClick: () => toggle && toggle(!states.open),
@@ -3222,7 +3400,7 @@ var SheetTrigger = (props) => {
     if (onClick) onClick(event);
     if (toggle) toggle(!states.open);
   };
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(
     Button,
     {
       id: id.triggerId,
@@ -3241,14 +3419,76 @@ SheetTrigger.displayName = "Sheet.Trigger";
 Sheet.Root = SheetRoot;
 Sheet.Trigger = SheetTrigger;
 
+// src/shimmer/index.tsx
+var import_react33 = __toESM(require("react"));
+
+// src/shimmer/styles/index.ts
+var import_styled_components19 = __toESM(require("styled-components"));
+var shimmer = import_styled_components19.keyframes`
+  0% {
+    background-position: 200% center;
+  }
+  100% {
+    background-position: -200% center;
+  }
+`;
+var TextShimmerWrapper = import_styled_components19.default.span`
+  background: linear-gradient(
+    90deg,
+    ${({ "data-base-color": baseColor }) => baseColor} 0%,
+    ${({ "data-shimmer-color": shimmerColor }) => shimmerColor} 40%,
+    ${({ "data-base-color": baseColor }) => baseColor} 60%,
+    ${({ "data-base-color": baseColor }) => baseColor} 100%
+  );
+  background-size: ${({ "data-spread": spread }) => spread}% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: ${shimmer} ${({ "data-duration": duration }) => duration}s linear
+    infinite;
+  display: inline-block;
+`;
+
+// src/shimmer/index.tsx
+var DEFAULT_DURATION = 2;
+var DEFAULT_SPREAD = 200;
+var DEFAULT_SHIMMER_COLOR = "var(--font-color-alpha-60)";
+var DEFAULT_BASE_COLOR = "var(--font-color-alpha-30)";
+var Shimmer = (props) => {
+  const {
+    children,
+    raw,
+    duration = DEFAULT_DURATION,
+    spread = DEFAULT_SPREAD,
+    shimmerColor = DEFAULT_SHIMMER_COLOR,
+    baseColor = DEFAULT_BASE_COLOR,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ import_react33.default.createElement(
+    TextShimmerWrapper,
+    {
+      "data-raw": Boolean(raw),
+      "data-duration": duration,
+      "data-spread": spread,
+      "data-shimmer-color": shimmerColor,
+      "data-base-color": baseColor,
+      "aria-label": restProps["aria-label"] ?? "shimmer-text",
+      ...restProps
+    },
+    children
+  );
+};
+Shimmer.displayName = "Shimmer";
+
 // src/scrollarea/index.tsx
-var import_react31 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var ScrollArea = ({
   scrollbar = false,
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement(
     ScrollAreaWrapper,
     {
       "aria-hidden": "true",
@@ -3260,11 +3500,11 @@ var ScrollArea = ({
 };
 
 // src/spinner/index.tsx
-var import_react32 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 
 // src/spinner/styles/index.ts
-var import_styled_components18 = __toESM(require("styled-components"));
-var Rotate = import_styled_components18.keyframes`
+var import_styled_components20 = __toESM(require("styled-components"));
+var Rotate = import_styled_components20.keyframes`
     0% {
         transform: rotate(0deg);
     }
@@ -3272,7 +3512,7 @@ var Rotate = import_styled_components18.keyframes`
         transform: rotate(360deg);
     }
 `;
-var FieldSizeStyles2 = import_styled_components18.css`
+var FieldSizeStyles2 = import_styled_components20.css`
   &[data-size="small"] {
     width: var(--measurement-medium-40);
     height: var(--measurement-medium-40);
@@ -3286,7 +3526,7 @@ var FieldSizeStyles2 = import_styled_components18.css`
     height: var(--measurement-medium-60);
   }
 `;
-var RotatingSpinner = import_styled_components18.default.span`
+var RotatingSpinner = import_styled_components20.default.span`
   padding: 0;
   margin: 0;
 
@@ -3304,15 +3544,15 @@ var RotatingSpinner = import_styled_components18.default.span`
 
 // src/spinner/index.tsx
 var Spinner = (props) => {
-  return /* @__PURE__ */ import_react32.default.createElement(RotatingSpinner, { "data-size": props.sizing ?? "medium" });
+  return /* @__PURE__ */ import_react35.default.createElement(RotatingSpinner, { "data-size": props.sizing ?? "medium" });
 };
 
 // src/skeleton/index.tsx
-var import_react33 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 
 // src/skeleton/styles/index.ts
-var import_styled_components19 = __toESM(require("styled-components"));
-var SkeletonBlink = import_styled_components19.keyframes`
+var import_styled_components21 = __toESM(require("styled-components"));
+var SkeletonBlink = import_styled_components21.keyframes`
     0% {
       opacity: 0.3;
     }
@@ -3320,7 +3560,7 @@ var SkeletonBlink = import_styled_components19.keyframes`
       opacity: 0.1;
     }
 `;
-var SkeletonBaseStyles = import_styled_components19.css`
+var SkeletonBaseStyles = import_styled_components21.css`
   background: linear-gradient(
     45deg,
     var(--font-color-alpha-10),
@@ -3328,7 +3568,7 @@ var SkeletonBaseStyles = import_styled_components19.css`
   );
   animation: ${SkeletonBlink} 1s ease-in-out alternate-reverse infinite;
 `;
-var SkeletonSizeStyles = import_styled_components19.css`
+var SkeletonSizeStyles = import_styled_components21.css`
   &[data-size="small"] {
     width: 100%;
 
@@ -3346,7 +3586,7 @@ var SkeletonSizeStyles = import_styled_components19.css`
     min-height: var(--measurement-medium-90);
   }
 `;
-var SkeletonShapeStyles = import_styled_components19.css`
+var SkeletonShapeStyles = import_styled_components21.css`
   &[data-shape="square"] {
     border-radius: 0;
   }
@@ -3357,7 +3597,7 @@ var SkeletonShapeStyles = import_styled_components19.css`
     border-radius: var(--measurement-large-90);
   }
 `;
-var SkeletonLoader = import_styled_components19.default.span`
+var SkeletonLoader = import_styled_components21.default.span`
   ${SkeletonBaseStyles}
   ${SkeletonSizeStyles}
   ${SkeletonShapeStyles}
@@ -3370,7 +3610,7 @@ var Skeleton = (props) => {
     shape = "smooth",
     ...restProps
   } = props;
-  return /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement(
     SkeletonLoader,
     {
       "data-size": sizing,
@@ -3383,24 +3623,26 @@ var Skeleton = (props) => {
 Skeleton.displayName = "Skeleton";
 
 // src/switch/index.tsx
-var import_react35 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 
 // src/switch/hooks/index.tsx
-var import_react34 = __toESM(require("react"));
-var defaultComponentAPI6 = {
+var import_react37 = __toESM(require("react"));
+var defaultComponentAPI7 = {
   id: "",
   states: {},
   methods: {}
 };
-var SwitchContext = (0, import_react34.createContext)(defaultComponentAPI6);
-var useSwitch = () => (0, import_react34.useContext)(SwitchContext);
-var SwitchProvider = ({ children }) => {
+var SwitchContext = (0, import_react37.createContext)(defaultComponentAPI7);
+var useSwitch = () => (0, import_react37.useContext)(SwitchContext);
+var SwitchProvider = ({
+  children
+}) => {
   const context = useSwitchProvider();
-  return /* @__PURE__ */ import_react34.default.createElement(SwitchContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react37.default.createElement(SwitchContext.Provider, { value: context }, children);
 };
 function useSwitchProvider() {
-  const [checked, setChecked] = (0, import_react34.useState)(false);
-  const switchId = import_react34.default.useId();
+  const [checked, setChecked] = (0, import_react37.useState)(false);
+  const switchId = import_react37.default.useId();
   return {
     id: switchId,
     states: {
@@ -3413,8 +3655,8 @@ function useSwitchProvider() {
 }
 
 // src/switch/styles/index.ts
-var import_styled_components20 = __toESM(require("styled-components"));
-var SwitchDefaultStyles = import_styled_components20.css`
+var import_styled_components22 = __toESM(require("styled-components"));
+var SwitchDefaultStyles = import_styled_components22.css`
   all: unset;
 
   border: var(--measurement-small-10) solid transparent;
@@ -3428,7 +3670,7 @@ var SwitchDefaultStyles = import_styled_components20.css`
     opacity: 0.6;
   }
 `;
-var SwitchVariantsStyles = import_styled_components20.css`
+var SwitchVariantsStyles = import_styled_components22.css`
   &[data-variant="primary"] {
     &[aria-checked="true"] {
       background-color: var(--color-green);
@@ -3459,7 +3701,7 @@ var SwitchVariantsStyles = import_styled_components20.css`
     }
   }
 `;
-var SwitchSizeStyles = import_styled_components20.css`
+var SwitchSizeStyles = import_styled_components22.css`
   &[data-size="small"] {
     width: calc(var(--measurement-medium-60) * 1.33);
     height: var(--measurement-medium-50);
@@ -3508,14 +3750,14 @@ var SwitchSizeStyles = import_styled_components20.css`
     }
   }
 `;
-var TriggerWrapper = import_styled_components20.default.button`
+var TriggerWrapper = import_styled_components22.default.button`
   &[data-raw="false"] {
     ${SwitchDefaultStyles}
     ${SwitchVariantsStyles}
     ${SwitchSizeStyles}
   }
 `;
-var Thumb = import_styled_components20.default.span`
+var Thumb = import_styled_components22.default.span`
   &[data-raw="false"] {
     all: unset;
     display: block;
@@ -3549,10 +3791,10 @@ var Switch = (props) => {
     if (onClick) onClick(event);
     if (toggleSwitch) toggleSwitch();
   };
-  import_react35.default.useEffect(() => {
+  import_react38.default.useEffect(() => {
     if (defaultChecked && toggleSwitch) toggleSwitch();
   }, [defaultChecked]);
-  return /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(
     TriggerWrapper,
     {
       type: "button",
@@ -3568,19 +3810,19 @@ var Switch = (props) => {
       "data-raw": Boolean(raw),
       ...restProps
     },
-    /* @__PURE__ */ import_react35.default.createElement("title", null, "Switch"),
+    /* @__PURE__ */ import_react38.default.createElement("title", null, "Switch"),
     children
   );
 };
 Switch.displayName = "Switch";
 var SwitchRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react35.default.createElement(SwitchProvider, null, children);
+  return /* @__PURE__ */ import_react38.default.createElement(SwitchProvider, null, children);
 };
 SwitchRoot.displayName = "Switch.Root";
 var SwitchThumb = (props) => {
   const { raw, sizing } = props;
   const { id, states } = useSwitch();
-  return /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(
     Thumb,
     {
       role: "presentation",
@@ -3600,11 +3842,11 @@ Switch.Root = SwitchRoot;
 Switch.Thumb = SwitchThumb;
 
 // src/table/index.tsx
-var import_react36 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 
 // src/table/styles/index.ts
-var import_styled_components21 = __toESM(require("styled-components"));
-var CellStyles = import_styled_components21.css`
+var import_styled_components23 = __toESM(require("styled-components"));
+var CellStyles = import_styled_components23.css`
   box-sizing: border-box;
   border: none;
   line-height: 1;
@@ -3614,11 +3856,11 @@ var CellStyles = import_styled_components21.css`
     var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
   );
 `;
-var TableLayer = import_styled_components21.default.div`
+var TableLayer = import_styled_components23.default.div`
   border-radius: var(--measurement-medium-30);
   border: var(--measurement-small-10) solid var(--font-color-alpha-10);
 `;
-var TableWrapper = import_styled_components21.default.table`
+var TableWrapper = import_styled_components23.default.table`
   border-collapse: collapse;
 
   tbody {
@@ -3629,7 +3871,7 @@ var TableWrapper = import_styled_components21.default.table`
     }
   }
 `;
-var RowWrapper = import_styled_components21.default.tr`
+var RowWrapper = import_styled_components23.default.tr`
   border-bottom: var(--measurement-small-10) solid var(--font-color-alpha-10);
 
   transition: background-color linear 0.1s;
@@ -3638,7 +3880,7 @@ var RowWrapper = import_styled_components21.default.tr`
     background-color: var(--font-color-alpha-10);
   }
 `;
-var HeadCellWrapper = import_styled_components21.default.th`
+var HeadCellWrapper = import_styled_components23.default.th`
   font-size: var(--fontsize-medium-10);
   ${CellStyles}
 
@@ -3646,7 +3888,7 @@ var HeadCellWrapper = import_styled_components21.default.th`
     color: var(--font-color-alpha-60);
   }
 `;
-var CellWrapper = import_styled_components21.default.td`
+var CellWrapper = import_styled_components23.default.td`
   ${CellStyles}
 `;
 
@@ -3655,43 +3897,43 @@ var Table = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react36.default.createElement(ScrollArea, { as: TableLayer, role: "presentation", tabIndex: -1 }, /* @__PURE__ */ import_react36.default.createElement(TableWrapper, { ...restProps, cellSpacing: "0", cellPadding: "0" }, children));
+  return /* @__PURE__ */ import_react39.default.createElement(ScrollArea, { as: TableLayer, role: "presentation", tabIndex: -1 }, /* @__PURE__ */ import_react39.default.createElement(TableWrapper, { ...restProps, cellSpacing: "0", cellPadding: "0" }, children));
 };
 Table.displayName = "Table";
 var TableHead = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react36.default.createElement("thead", { ...restProps }, children);
+  return /* @__PURE__ */ import_react39.default.createElement("thead", { ...restProps }, children);
 };
 TableHead.displayName = "Table.Head";
 var TableBody = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react36.default.createElement("tbody", { ...restProps }, children);
+  return /* @__PURE__ */ import_react39.default.createElement("tbody", { ...restProps }, children);
 };
 TableBody.displayName = "Table.Body";
 var TableHeadCell = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react36.default.createElement(HeadCellWrapper, { colSpan: 1, ...restProps }, /* @__PURE__ */ import_react36.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
+  return /* @__PURE__ */ import_react39.default.createElement(HeadCellWrapper, { colSpan: 1, ...restProps }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
 };
 TableHeadCell.displayName = "Table.HeadCell";
 var TableRow = ({ children, ...restProps }) => {
-  return /* @__PURE__ */ import_react36.default.createElement(RowWrapper, { className: "p-medium-30", ...restProps }, children);
+  return /* @__PURE__ */ import_react39.default.createElement(RowWrapper, { className: "p-medium-30", ...restProps }, children);
 };
 TableRow.displayName = "Table.Row";
 var TableCell = ({ children, ...restProps }) => {
-  return /* @__PURE__ */ import_react36.default.createElement(CellWrapper, { ...restProps }, /* @__PURE__ */ import_react36.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
+  return /* @__PURE__ */ import_react39.default.createElement(CellWrapper, { ...restProps }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex align-center g-medium-30" }, children));
 };
 TableCell.displayName = "Table.Cell";
 var TableFooter = ({
   children,
   ...restProps
 }) => {
-  return /* @__PURE__ */ import_react36.default.createElement("tfoot", { ...restProps }, children);
+  return /* @__PURE__ */ import_react39.default.createElement("tfoot", { ...restProps }, children);
 };
 TableFooter.displayName = "Table.Footer";
 Table.Head = TableHead;
@@ -3702,24 +3944,26 @@ Table.Cell = TableCell;
 Table.Footer = TableFooter;
 
 // src/tabs/index.tsx
-var import_react38 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 
 // src/tabs/hooks/index.tsx
-var import_react37 = __toESM(require("react"));
-var defaultComponentAPI7 = {
+var import_react40 = __toESM(require("react"));
+var defaultComponentAPI8 = {
   id: "",
   states: {},
   methods: {}
 };
-var TabsContext = (0, import_react37.createContext)(defaultComponentAPI7);
-var useTabs = () => (0, import_react37.useContext)(TabsContext);
-var TabsProvider = ({ children }) => {
+var TabsContext = (0, import_react40.createContext)(defaultComponentAPI8);
+var useTabs = () => (0, import_react40.useContext)(TabsContext);
+var TabsProvider = ({
+  children
+}) => {
   const context = useTabsProvider();
-  return /* @__PURE__ */ import_react37.default.createElement(TabsContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react40.default.createElement(TabsContext.Provider, { value: context }, children);
 };
 function useTabsProvider() {
-  const [value, setValue] = (0, import_react37.useState)(null);
-  const tabsId = import_react37.default.useId();
+  const [value, setValue] = (0, import_react40.useState)(null);
+  const tabsId = import_react40.default.useId();
   return {
     id: tabsId,
     states: {
@@ -3733,8 +3977,8 @@ function useTabsProvider() {
 }
 
 // src/tabs/styles/index.ts
-var import_styled_components22 = __toESM(require("styled-components"));
-var TabWrapper = import_styled_components22.default.div`
+var import_styled_components24 = __toESM(require("styled-components"));
+var TabWrapper = import_styled_components24.default.div`
   button {
     &[aria-selected="true"] {
       color: var(--font-color) !important;
@@ -3747,22 +3991,22 @@ var Tabs = (props) => {
   const { defaultOpen, children, ...restProps } = props;
   const { methods } = useTabs();
   const { applyValue } = methods;
-  const childArray = import_react38.Children.toArray(children);
+  const childArray = import_react41.Children.toArray(children);
   const firstChild = childArray[0];
-  import_react38.default.useEffect(() => {
-    if (import_react38.default.isValidElement(firstChild)) {
+  import_react41.default.useEffect(() => {
+    if (import_react41.default.isValidElement(firstChild)) {
       if (childArray.length > 0 && applyValue)
         applyValue(firstChild.props.value);
     }
   }, []);
-  import_react38.default.useEffect(() => {
+  import_react41.default.useEffect(() => {
     if (defaultOpen && applyValue) applyValue(defaultOpen);
   }, []);
-  return /* @__PURE__ */ import_react38.default.createElement(TabWrapper, { role: "tablist", ...restProps }, children);
+  return /* @__PURE__ */ import_react41.default.createElement(TabWrapper, { role: "tablist", ...restProps }, children);
 };
 Tabs.displayName = "Tabs";
 var TabsRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react38.default.createElement(TabsProvider, null, children);
+  return /* @__PURE__ */ import_react41.default.createElement(TabsProvider, null, children);
 };
 TabsRoot.displayName = "Tabs.Root";
 var TabsTrigger = (props) => {
@@ -3778,7 +4022,7 @@ var TabsTrigger = (props) => {
     if (applyValue) applyValue(value);
     if (onClick) onClick(event);
   };
-  return /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(
     Button,
     {
       type: "button",
@@ -3806,7 +4050,7 @@ var TabsContent = (props) => {
     trigger: getTabsId && getTabsId({ value, type: "trigger" }),
     content: getTabsId && getTabsId({ value, type: "content" })
   };
-  return /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(
     "div",
     {
       tabIndex: 0,
@@ -3827,11 +4071,11 @@ Tabs.Trigger = TabsTrigger;
 Tabs.Content = TabsContent;
 
 // src/text-area/index.tsx
-var import_react39 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 
 // src/text-area/styles/index.ts
-var import_styled_components23 = __toESM(require("styled-components"));
-var CustomScrollbar2 = import_styled_components23.css`
+var import_styled_components25 = __toESM(require("styled-components"));
+var CustomScrollbar2 = import_styled_components25.css`
   height: ${({ $height }) => $height ?? "100%"};
   width: ${({ $width }) => $width ?? "100%"};
   overflow-y: auto;
@@ -3863,7 +4107,7 @@ var CustomScrollbar2 = import_styled_components23.css`
   scrollbar-width: thin;
   scrollbar-color: ${({ $thumbColor, $trackColor }) => `${$thumbColor ?? "var(--font-color-alpha-10)"} ${$trackColor ?? "transparent"}`};
 `;
-var TextareaSizeStyles = import_styled_components23.css`
+var TextareaSizeStyles = import_styled_components25.css`
   padding: var(--measurement-medium-30);
   max-height: var(--measurement-large-60);
 
@@ -3878,7 +4122,7 @@ var TextareaSizeStyles = import_styled_components23.css`
     max-height: var(--measurement-large-80);
   }
 `;
-var TextareaResizableStyles = import_styled_components23.css`
+var TextareaResizableStyles = import_styled_components25.css`
   &[data-resizable="true"] {
     resize: vertical;
   }
@@ -3886,7 +4130,7 @@ var TextareaResizableStyles = import_styled_components23.css`
     resize: none;
   }
 `;
-var TextAreaContainer = import_styled_components23.default.textarea`
+var TextAreaContainer = import_styled_components25.default.textarea`
   &[data-raw="false"] {
     ${FieldDefaultStyles}
     ${FieldShapeStyles}
@@ -3902,7 +4146,7 @@ var TextAreaContainer = import_styled_components23.default.textarea`
 // src/text-area/index.tsx
 var Textarea = (props) => {
   const { raw, shape, sizing, variant, resizable, onChange } = props;
-  const textareaRef = import_react39.default.useRef(null);
+  const textareaRef = import_react42.default.useRef(null);
   const adjustHeight = () => {
     const textarea = textareaRef.current;
     if (textarea) {
@@ -3917,8 +4161,8 @@ var Textarea = (props) => {
     adjustHeight();
     onChange?.(e);
   };
-  import_react39.default.useEffect(() => adjustHeight(), [props.value]);
-  return /* @__PURE__ */ import_react39.default.createElement(
+  import_react42.default.useEffect(() => adjustHeight(), [props.value]);
+  return /* @__PURE__ */ import_react42.default.createElement(
     TextAreaContainer,
     {
       ref: textareaRef,
@@ -3935,22 +4179,22 @@ var Textarea = (props) => {
 Textarea.displayName = "Textarea";
 
 // src/toggle/index.tsx
-var import_react40 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var Toggle = (props) => {
   const { defaultChecked, onClick, disabled, children, ...restProps } = props;
-  const [checked, setChecked] = import_react40.default.useState(
+  const [checked, setChecked] = import_react43.default.useState(
     defaultChecked ?? false
   );
   const handleClick = (event) => {
     if (onClick) onClick(event);
     if (!disabled) setChecked((prevChecked) => !prevChecked);
   };
-  import_react40.default.useEffect(() => {
+  import_react43.default.useEffect(() => {
     if (defaultChecked !== void 0) {
       setChecked(Boolean(defaultChecked));
     }
   }, [defaultChecked]);
-  return /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react43.default.createElement(
     Button,
     {
       role: "switch",
@@ -3968,24 +4212,26 @@ var Toggle = (props) => {
 Toggle.displayName = "Toggle";
 
 // src/toolbar/index.tsx
-var import_react42 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 
 // src/toolbar/hooks/index.tsx
-var import_react41 = __toESM(require("react"));
-var defaultComponentAPI8 = {
+var import_react44 = __toESM(require("react"));
+var defaultComponentAPI9 = {
   id: "",
   states: {},
   methods: {}
 };
-var ToolbarContext = (0, import_react41.createContext)(defaultComponentAPI8);
-var useToolbar = () => (0, import_react41.useContext)(ToolbarContext);
-var ToolbarProvider = ({ children }) => {
+var ToolbarContext = (0, import_react44.createContext)(defaultComponentAPI9);
+var useToolbar = () => (0, import_react44.useContext)(ToolbarContext);
+var ToolbarProvider = ({
+  children
+}) => {
   const context = useToolbarProvider();
-  return /* @__PURE__ */ import_react41.default.createElement(ToolbarContext.Provider, { value: context }, children);
+  return /* @__PURE__ */ import_react44.default.createElement(ToolbarContext.Provider, { value: context }, children);
 };
 function useToolbarProvider() {
-  const [expanded, setExpanded] = (0, import_react41.useState)(false);
-  const toolbarId = import_react41.default.useId();
+  const [expanded, setExpanded] = (0, import_react44.useState)(false);
+  const toolbarId = import_react44.default.useId();
   return {
     id: toolbarId,
     states: {
@@ -3998,8 +4244,8 @@ function useToolbarProvider() {
 }
 
 // src/toolbar/styles/index.ts
-var import_styled_components24 = __toESM(require("styled-components"));
-var ToolbarDefaultStyles = import_styled_components24.css`
+var import_styled_components26 = __toESM(require("styled-components"));
+var ToolbarDefaultStyles = import_styled_components26.css`
   margin: 0;
   display: grid;
   grid-template-rows: min-content;
@@ -4033,7 +4279,7 @@ var ToolbarDefaultStyles = import_styled_components24.css`
     }
   }
 `;
-var ToolbarSizeStyles = import_styled_components24.css`
+var ToolbarSizeStyles = import_styled_components26.css`
   &[data-size="small"] {
     &[aria-orientation="vertical"] {
       max-width: var(--measurement-large-70);
@@ -4079,7 +4325,7 @@ var ToolbarSizeStyles = import_styled_components24.css`
     }
   }
 `;
-var ToolbarSideStyles = import_styled_components24.css`
+var ToolbarSideStyles = import_styled_components26.css`
   &[data-side="top"] {
     border-bottom-color: var(--font-color-alpha-10);
   }
@@ -4111,7 +4357,7 @@ var ToolbarSideStyles = import_styled_components24.css`
     }
   }
 `;
-var ToolbarWrapper = import_styled_components24.default.menu`
+var ToolbarWrapper = import_styled_components26.default.menu`
   &[data-raw="false"] {
     ${ToolbarDefaultStyles}
     ${ToolbarSizeStyles}
@@ -4119,7 +4365,7 @@ var ToolbarWrapper = import_styled_components24.default.menu`
     ${ToolbarSideStyles}
   }
 `;
-var ToolbarTriggerWrapper = import_styled_components24.default.menu`
+var ToolbarTriggerWrapper = import_styled_components26.default.menu`
   &[data-raw="false"] {
     all: unset;
     align-self: flex-end;
@@ -4144,13 +4390,13 @@ var Toolbar = (props) => {
   const { toggleToolbar } = methods;
   const shortcutControls = useKeyPress(String(hotkey), true, bindkey);
   const orientation = side && ["left", "right"].includes(side) ? "vertical" : "horizontal";
-  import_react42.default.useEffect(() => {
+  import_react45.default.useEffect(() => {
     if (defaultOpen && toggleToolbar) return toggleToolbar(true);
   }, [defaultOpen]);
-  import_react42.default.useEffect(() => {
+  import_react45.default.useEffect(() => {
     if (shortcut && shortcutControls && toggleToolbar) toggleToolbar();
   }, [shortcutControls]);
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     ToolbarWrapper,
     {
       id,
@@ -4170,7 +4416,7 @@ var Toolbar = (props) => {
 };
 Toolbar.displayName = "Toolbar";
 var ToolbarRoot = ({ children }) => {
-  return /* @__PURE__ */ import_react42.default.createElement(ToolbarProvider, null, children);
+  return /* @__PURE__ */ import_react45.default.createElement(ToolbarProvider, null, children);
 };
 ToolbarRoot.displayName = "Toolbar.Root";
 var ToolbarTrigger = (props) => {
@@ -4188,7 +4434,7 @@ var ToolbarTrigger = (props) => {
     if (onClick) onClick(event);
     if (toggleToolbar) toggleToolbar(!states.expanded);
   };
-  return /* @__PURE__ */ import_react42.default.createElement(ToolbarTriggerWrapper, { "data-raw": Boolean(raw) }, /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(ToolbarTriggerWrapper, { "data-raw": Boolean(raw) }, /* @__PURE__ */ import_react45.default.createElement(
     Button,
     {
       id: `${id}-trigger`,
@@ -4206,13 +4452,13 @@ var ToolbarSection = (props) => {
   const { showoncollapse, children, ...restProps } = props;
   const { states } = useToolbar();
   const { expanded } = states;
-  if (showoncollapse) return /* @__PURE__ */ import_react42.default.createElement("section", { ...restProps }, children);
-  return /* @__PURE__ */ import_react42.default.createElement("section", { ...restProps }, expanded && children);
+  if (showoncollapse) return /* @__PURE__ */ import_react45.default.createElement("section", { ...restProps }, children);
+  return /* @__PURE__ */ import_react45.default.createElement("section", { ...restProps }, expanded && children);
 };
 ToolbarSection.displayName = "Toolbar.Section";
 var ToolbarItem = (props) => {
   const { showfirstchild, onClick, children, ...restProps } = props;
-  const childArray = import_react42.default.Children.toArray(children);
+  const childArray = import_react45.default.Children.toArray(children);
   const { id, states, methods } = useToolbar();
   const { expanded } = states;
   const { toggleToolbar } = methods;
@@ -4221,7 +4467,7 @@ var ToolbarItem = (props) => {
     if (onClick) onClick(event);
     if (toggleToolbar && !expanded) toggleToolbar(true);
   };
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(
     "div",
     {
       tabIndex: -1,
@@ -4242,11 +4488,11 @@ Toolbar.Item = ToolbarItem;
 Toolbar.Section = ToolbarSection;
 
 // src/tooltip/index.tsx
-var import_react43 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 
 // src/tooltip/styles/index.ts
-var import_styled_components25 = __toESM(require("styled-components"));
-var FadeIn2 = import_styled_components25.keyframes`
+var import_styled_components27 = __toESM(require("styled-components"));
+var FadeIn2 = import_styled_components27.keyframes`
   0% {
     opacity: 0;
   }
@@ -4254,11 +4500,11 @@ var FadeIn2 = import_styled_components25.keyframes`
     opacity: 1;
   }
 `;
-var ContentBox = import_styled_components25.default.div`
+var ContentBox = import_styled_components27.default.div`
   display: inline-block;
   position: relative;
 `;
-var ContentWrapper2 = import_styled_components25.default.span`
+var ContentWrapper2 = import_styled_components27.default.span`
   &[data-raw="false"] {
     width: fit-content;
     max-width: var(--measurement-large-60);
@@ -4289,13 +4535,13 @@ var Tooltip = ({
   children,
   ...restProps
 }) => {
-  const [visible, setVisible] = import_react43.default.useState(false);
-  const [triggerProps, setTriggerProps] = import_react43.default.useState(null);
-  const [contentProps, setContentProps] = import_react43.default.useState(null);
-  const mounted = import_react43.default.useRef(false);
-  const containerRef = import_react43.default.useRef(null);
-  const contentRef = import_react43.default.useRef(null);
-  const timeoutRef = import_react43.default.useRef(null);
+  const [visible, setVisible] = import_react46.default.useState(false);
+  const [triggerProps, setTriggerProps] = import_react46.default.useState(null);
+  const [contentProps, setContentProps] = import_react46.default.useState(null);
+  const mounted = import_react46.default.useRef(false);
+  const containerRef = import_react46.default.useRef(null);
+  const contentRef = import_react46.default.useRef(null);
+  const timeoutRef = import_react46.default.useRef(null);
   const contentRect = () => contentRef?.current?.getBoundingClientRect();
   const bodyRect = () => {
     if (typeof document !== "undefined") {
@@ -4319,14 +4565,14 @@ var Tooltip = ({
   };
   const hasEnoughHorizontalSpace = Number(dimensions.body_width) - Number(dimensions.content_left) > Number(dimensions.content_width) * 1.1;
   const hasEnoughVerticalSpace = Number(dimensions.body_height) - Number(dimensions.content_bottom) > Number(dimensions.content_height) * 0.9;
-  const showTooltip = import_react43.default.useCallback(() => {
+  const showTooltip = import_react46.default.useCallback(() => {
     timeoutRef.current = setTimeout(() => setVisible(true), delay);
   }, [delay]);
-  const hideTooltip = import_react43.default.useCallback(() => {
+  const hideTooltip = import_react46.default.useCallback(() => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setVisible(false);
   }, []);
-  const handleMouseEnter = import_react43.default.useCallback(() => {
+  const handleMouseEnter = import_react46.default.useCallback(() => {
     const rect = containerRef.current?.getBoundingClientRect();
     if (rect) {
       setTriggerProps({
@@ -4340,11 +4586,11 @@ var Tooltip = ({
       showTooltip();
     }
   }, [showTooltip]);
-  const handleMouseLeave = import_react43.default.useCallback(
+  const handleMouseLeave = import_react46.default.useCallback(
     () => hideTooltip(),
     [hideTooltip]
   );
-  import_react43.default.useEffect(() => {
+  import_react46.default.useEffect(() => {
     mounted.current = true;
     setContentProps && setContentProps({
       top: Number(contentRect()?.top),
@@ -4358,7 +4604,7 @@ var Tooltip = ({
       mounted.current = false;
     };
   }, [visible]);
-  return /* @__PURE__ */ import_react43.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     ContentBox,
     {
       ref: containerRef,
@@ -4368,7 +4614,7 @@ var Tooltip = ({
       ...restProps
     },
     children,
-    visible && /* @__PURE__ */ import_react43.default.createElement(
+    visible && /* @__PURE__ */ import_react46.default.createElement(
       ContentWrapper2,
       {
         ref: contentRef,
@@ -4383,11 +4629,223 @@ var Tooltip = ({
         "data-side": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */,
         "data-align": hasEnoughHorizontalSpace ? "left" /* Left */ : "right" /* Right */
       },
-      /* @__PURE__ */ import_react43.default.createElement("div", null, content)
+      /* @__PURE__ */ import_react46.default.createElement("div", null, content)
     )
   );
 };
 Tooltip.displayName = "Tooltip";
+
+// src/tree/index.tsx
+var import_react49 = __toESM(require("react"));
+
+// src/tree/hooks/tree-provider.tsx
+var import_react47 = __toESM(require("react"));
+var defaultTreeAPI = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var TreeContext = (0, import_react47.createContext)(defaultTreeAPI);
+var useTree = () => (0, import_react47.useContext)(TreeContext);
+var TreeProvider = ({
+  children,
+  defaultExpandedIds = [],
+  onSelectionChange
+}) => {
+  const context = useTreeProviderContext({
+    defaultExpandedIds,
+    onSelectionChange
+  });
+  return /* @__PURE__ */ import_react47.default.createElement(TreeContext.Provider, { value: context }, children);
+};
+function useTreeProviderContext({
+  defaultExpandedIds,
+  onSelectionChange
+}) {
+  const treeId = import_react47.default.useId();
+  const [expandedIds, setExpandedIds] = (0, import_react47.useState)(
+    () => new Set(defaultExpandedIds)
+  );
+  const [selectedIds, setSelectedIds] = (0, import_react47.useState)(() => /* @__PURE__ */ new Set());
+  return {
+    id: treeId,
+    states: {
+      expandedIds,
+      selectedIds
+    },
+    methods: {
+      isExpanded: (id) => expandedIds.has(id),
+      isSelected: (id) => selectedIds.has(id),
+      toggleExpanded: (id) => {
+        setExpandedIds((prev) => {
+          const next = new Set(prev);
+          next.has(id) ? next.delete(id) : next.add(id);
+          return next;
+        });
+      },
+      toggleSelected: (id) => {
+        setSelectedIds((prev) => {
+          const next = new Set(prev);
+          next.has(id) ? next.delete(id) : next.add(id);
+          onSelectionChange?.(Array.from(next));
+          return next;
+        });
+      },
+      getTreeId: ({ nodeId, type }) => `${treeId}-${type}-${nodeId}`
+    }
+  };
+}
+
+// src/tree/hooks/tree-node-provider.tsx
+var import_react48 = __toESM(require("react"));
+var defaultTreeNodeAPI = {
+  id: "",
+  states: {},
+  methods: {}
+};
+var TreeNodeContext = (0, import_react48.createContext)(defaultTreeNodeAPI);
+var useTreeNode = () => (0, import_react48.useContext)(TreeNodeContext);
+var TreeNodeProvider = ({
+  children,
+  nodeId,
+  level,
+  isLast
+}) => {
+  const context = useTreeNodeProviderContext({ nodeId, level, isLast });
+  return /* @__PURE__ */ import_react48.default.createElement(TreeNodeContext.Provider, { value: context }, children);
+};
+function useTreeNodeProviderContext({
+  nodeId,
+  level,
+  isLast
+}) {
+  return {
+    id: nodeId,
+    states: {
+      nodeId,
+      level,
+      isLast
+    },
+    methods: {}
+  };
+}
+
+// src/tree/styles/index.ts
+var import_styled_components28 = __toESM(require("styled-components"));
+var TreeView = import_styled_components28.default.ul`
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+var TreeItem = import_styled_components28.default.li`
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+`;
+var TreeNodeContent = import_styled_components28.default.ul`
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
+// src/tree/index.tsx
+var Tree = (props) => {
+  const { children, ...restProps } = props;
+  const { id } = useTree();
+  return /* @__PURE__ */ import_react49.default.createElement(TreeView, { id, role: "tree", ...restProps }, children);
+};
+Tree.displayName = "Tree";
+var TreeRoot = ({
+  children,
+  defaultExpandedIds,
+  onSelectionChange
+}) => {
+  return /* @__PURE__ */ import_react49.default.createElement(
+    TreeProvider,
+    {
+      defaultExpandedIds,
+      onSelectionChange
+    },
+    children
+  );
+};
+TreeRoot.displayName = "Tree.Root";
+var TreeNode = (props) => {
+  const { nodeId, level = 0, isLast = false, children, ...restProps } = props;
+  return /* @__PURE__ */ import_react49.default.createElement(TreeNodeProvider, { nodeId, level, isLast }, /* @__PURE__ */ import_react49.default.createElement(TreeItem, { role: "treeitem", "aria-level": level + 1, ...restProps }, children));
+};
+TreeNode.displayName = "Tree.Node";
+var TreeTrigger = (props) => {
+  const { nodeId, disabled, onClick, children, ...restProps } = props;
+  const { methods } = useTree();
+  const { getTreeId, toggleExpanded, toggleSelected } = methods;
+  const isExpanded = methods.isExpanded && methods.isExpanded(nodeId);
+  const isSelected = methods.isSelected && methods.isSelected(nodeId);
+  const IdHandler = {
+    trigger: getTreeId && getTreeId({ nodeId, type: "trigger" }),
+    content: getTreeId && getTreeId({ nodeId, type: "content" })
+  };
+  const { states: nodeStates } = useTreeNode();
+  const level = nodeStates.level ?? 0;
+  const handleClick = (event) => {
+    if (!disabled) {
+      onClick && onClick(event);
+      toggleExpanded && toggleExpanded(nodeId);
+      toggleSelected && toggleSelected(nodeId);
+    }
+  };
+  return /* @__PURE__ */ import_react49.default.createElement(
+    Button,
+    {
+      id: String(IdHandler.trigger),
+      disabled: disabled ?? false,
+      onClick: handleClick,
+      "data-state": isExpanded ? "expanded" : "collapsed",
+      "data-selected": isSelected || void 0,
+      variant: props.variant ?? "ghost" /* Ghost */,
+      style: { paddingLeft: `calc(${level} * 1rem + 0.5rem)` },
+      rawicon: true,
+      ...restProps
+    },
+    children
+  );
+};
+TreeTrigger.displayName = "Tree.Trigger";
+var TreeContent = (props) => {
+  const { nodeId, defaultOpen = false, children, ...restProps } = props;
+  const { methods } = useTree();
+  const { getTreeId, toggleExpanded } = methods;
+  const isExpanded = methods.isExpanded && methods.isExpanded(nodeId);
+  const IdHandler = {
+    trigger: getTreeId && getTreeId({ nodeId, type: "trigger" }),
+    content: getTreeId && getTreeId({ nodeId, type: "content" })
+  };
+  import_react49.default.useEffect(() => {
+    if (defaultOpen && !isExpanded && toggleExpanded) toggleExpanded(nodeId);
+  }, []);
+  if (isExpanded)
+    return /* @__PURE__ */ import_react49.default.createElement(
+      TreeNodeContent,
+      {
+        role: "group",
+        id: String(IdHandler.content),
+        "aria-labelledby": String(IdHandler.trigger),
+        "data-nodeId": nodeId,
+        ...restProps
+      },
+      children
+    );
+  return /* @__PURE__ */ import_react49.default.createElement(import_react49.default.Fragment, null);
+};
+TreeContent.displayName = "Tree.Content";
+Tree.Root = TreeRoot;
+Tree.Node = TreeNode;
+Tree.Trigger = TreeTrigger;
+Tree.Content = TreeContent;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4430,6 +4888,10 @@ Tooltip.displayName = "Tooltip";
   FieldMeta,
   FieldRoot,
   FieldWrapper,
+  MessageBubble,
+  MessageBubbleContent,
+  MessageBubbleMeta,
+  MessageBubbleRoot,
   MetaVariantEnum,
   OTPField,
   OTPFieldSlot,
@@ -4448,6 +4910,7 @@ Tooltip.displayName = "Tooltip";
   Sheet,
   SheetRoot,
   SheetTrigger,
+  Shimmer,
   Skeleton,
   Spinner,
   Switch,
@@ -4472,14 +4935,22 @@ Tooltip.displayName = "Tooltip";
   ToolbarSection,
   ToolbarTrigger,
   Tooltip,
+  Tree,
+  TreeContent,
+  TreeNode,
+  TreeRoot,
+  TreeTrigger,
   useAccordion,
   useCheckbox,
   useCollapsible,
   useDialog,
   useDropdownMenu,
   useField,
+  useMessageBubble,
   useSheet,
   useSwitch,
   useTabs,
-  useToolbar
+  useToolbar,
+  useTree,
+  useTreeNode
 });