@cccsaurora/howler-ui 2.14.0-dev.257 → 2.14.0-dev.263

package/components/elements/ThemedEditor.js

@@ -0,0 +1,119 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useMonaco, Editor } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@monaco-editor+react@4.7.0_monaco-editor@0.49.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@monaco-editor/react/dist/index.mjs";
+import { useTheme } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import useThemeBuilder from "../../commons/components/utils/hooks/useThemeBuilder.js";
+import useMyTheme from "../hooks/useMyTheme.js";
+import { memo, useCallback, useEffect, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const ThemedEditor = ({ beforeMount, options = {}, ...otherProps }) => {
+  const myTheme = useMyTheme();
+  const themeBuilder = useThemeBuilder(myTheme);
+  const theme = useTheme();
+  const monaco = useMonaco();
+  const _beforeMount = useCallback(
+    (_monaco) => {
+      let lightBackground = themeBuilder.lightTheme.palette.background.paper;
+      if (lightBackground.startsWith("#") && lightBackground.length < 7) {
+        lightBackground = lightBackground.replace(/(\w)/g, "$1$1");
+      }
+      _monaco.editor.defineTheme("howler", {
+        base: "vs",
+        inherit: true,
+        rules: [
+          {
+            token: "handlebars",
+            foreground: themeBuilder.lightTheme.palette.warning.dark.toUpperCase().replaceAll("#", "")
+          },
+          {
+            token: "operator",
+            foreground: themeBuilder.lightTheme.palette.warning.light.toUpperCase().replaceAll("#", "")
+          },
+          {
+            token: "string.invalid",
+            foreground: themeBuilder.lightTheme.palette.error.main.toUpperCase().replaceAll("#", "")
+          },
+          {
+            token: "invalid",
+            foreground: themeBuilder.lightTheme.palette.error.main.toUpperCase().replaceAll("#", "")
+          },
+          {
+            token: "boolean",
+            foreground: themeBuilder.lightTheme.palette.success.main.toUpperCase().replaceAll("#", "")
+          }
+        ],
+        colors: {
+          "editor.background": lightBackground
+        }
+      });
+      let darkBackground = themeBuilder.darkTheme.palette.background.paper;
+      if (darkBackground.startsWith("#") && darkBackground.length < 7) {
+        darkBackground = darkBackground.replace(/(\w)/g, "$1$1");
+      }
+      _monaco.editor.defineTheme("howler-dark", {
+        base: "vs-dark",
+        inherit: true,
+        rules: [
+          {
+            token: "handlebars",
+            foreground: themeBuilder.darkTheme.palette.warning.dark.toUpperCase().replaceAll("#", "")
+          },
+          {
+            token: "operator",
+            foreground: themeBuilder.darkTheme.palette.warning.light.toUpperCase().replaceAll("#", "")
+          },
+          {
+            token: "string.invalid",
+            foreground: themeBuilder.darkTheme.palette.error.main.toUpperCase().replaceAll("#", "")
+          },
+          {
+            token: "invalid",
+            foreground: themeBuilder.darkTheme.palette.error.main.toUpperCase().replaceAll("#", "")
+          },
+          {
+            token: "boolean",
+            foreground: themeBuilder.darkTheme.palette.success.main.toUpperCase().replaceAll("#", "")
+          }
+        ],
+        colors: {
+          "editor.background": darkBackground
+        }
+      });
+      _monaco.languages.register({ id: "lucene" });
+      _monaco.languages.register({ id: "eql" });
+      beforeMount == null ? void 0 : beforeMount(_monaco);
+    },
+    [beforeMount, themeBuilder]
+  );
+  useEffect(() => {
+    if (!monaco) {
+      return;
+    }
+    monaco.editor.setTheme(theme.palette.mode === "light" ? "howler" : "howler-dark");
+  }, [monaco, theme.palette.background.paper, theme.palette.mode]);
+  const _options = useMemo(
+    () => ({
+      automaticLayout: true,
+      minimap: { enabled: false },
+      overviewRulerBorder: false,
+      renderLineHighlight: "gutter",
+      autoClosingBrackets: "always",
+      scrollbar: {
+        horizontal: "hidden"
+      },
+      ...options
+    }),
+    [options]
+  );
+  return /* @__PURE__ */ jsx(
+    Editor,
+    {
+      ...otherProps,
+      theme: theme.palette.mode === "light" ? "howler" : "howler-dark",
+      beforeMount: _beforeMount,
+      options: _options
+    }
+  );
+};
+const ThemedEditor$1 = memo(ThemedEditor);
+export {
+  ThemedEditor$1 as default
+};

package/components/elements/UserList.d.ts

@@ -0,0 +1,9 @@
+import { SxProps, Theme } from '@mui/material';
+import { FC } from 'react';
+declare const UserList: FC<{
+    buttonSx?: SxProps<Theme>;
+    userId: string;
+    onChange: (userId: string) => void;
+    i18nLabel: string;
+}>;
+export default UserList;

package/components/elements/UserList.js

@@ -0,0 +1,67 @@
+import { jsxs, Fragment, jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { IconButton, Popover, Box, Autocomplete, Typography, TextField } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { UserListContext } from "../app/providers/UserListProvider.js";
+import { useState, useContext, useMemo, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useTranslation } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-i18next@14.1.3_i18next@23.16.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/index.js";
+import HowlerAvatar from "./display/HowlerAvatar.js";
+const UserList = ({ buttonSx = {}, userId, onChange, i18nLabel }) => {
+  const { t } = useTranslation();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const { users, searchUsers } = useContext(UserListContext);
+  const userIds = useMemo(() => Object.keys(users), [users]);
+  useEffect(() => {
+    searchUsers("uname:*");
+  }, [searchUsers]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(IconButton, { sx: buttonSx, onClick: (e) => setAnchorEl(e.currentTarget), children: /* @__PURE__ */ jsx(HowlerAvatar, { userId }) }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: !!anchorEl,
+        onClose: () => setAnchorEl(null),
+        anchorEl,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        children: /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsx(
+          Autocomplete,
+          {
+            sx: { minWidth: "300px" },
+            options: userIds,
+            renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label: t(i18nLabel), size: "small" }),
+            renderOption: (props, _userId) => {
+              const user = users[_userId];
+              return /* @__PURE__ */ jsx("li", { ...props, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    display: "grid",
+                    gridTemplateColumns: "auto 1fr",
+                    gridTemplateRows: "auto auto",
+                    gridTemplateAreas: `"profile name"
+"profile email"`,
+                    columnGap: 1.5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      HowlerAvatar,
+                      {
+                        sx: { gridArea: "profile", alignSelf: "center", height: "32px", width: "32px" },
+                        userId: user.username
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Typography, { sx: { gridArea: "name" }, variant: "body1", children: user.name }),
+                    /* @__PURE__ */ jsx(Typography, { sx: { gridArea: "email" }, variant: "caption", children: user.email })
+                  ]
+                }
+              ) });
+            },
+            value: userId,
+            onChange: (__, option) => onChange(option)
+          }
+        ) })
+      }
+    )
+  ] });
+};
+export {
+  UserList as default
+};

package/components/elements/addons/buttons/CustomButton.d.ts

@@ -0,0 +1,12 @@
+import { ButtonProps } from '@mui/material';
+import { ReactNode } from 'react';
+export type TuiButtonProps = Omit<ButtonProps, 'color'> & {
+    solid?: boolean;
+    color?: string;
+    route?: string;
+    href?: string;
+    progress?: boolean;
+    tooltip?: string | ReactNode;
+};
+declare const CustomButton: ({ solid, color, route, href, progress, tooltip, variant, ...props }: TuiButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomButton;

package/components/elements/addons/buttons/CustomButton.js

@@ -0,0 +1,59 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useTheme, alpha, darken, emphasize, Button, CircularProgress, Tooltip, Link as Link$1 } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { Link } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+import { isMuiButtonColor } from "./index.js";
+const CustomButton = ({ solid, color, route, href, progress, tooltip, variant, ...props }) => {
+  const theme = useTheme();
+  const requestedColor = color || "primary";
+  const isMuiColor = isMuiButtonColor(requestedColor);
+  const _solid = useMemo(() => solid || variant === "contained", [solid, variant]);
+  const sx = useMemo(() => {
+    if (isMuiColor) {
+      return props.sx || {};
+    }
+    const transparent = variant === "outlined" || variant === "text" || !variant;
+    const _bgColor = !transparent && _solid ? requestedColor : alpha(requestedColor, 0.2);
+    const _color = !transparent && _solid ? theme.palette.getContrastText(requestedColor) : requestedColor;
+    return {
+      ...props.sx && { ...props.sx },
+      color: _color,
+      backgroundColor: transparent ? "transparent" : _bgColor,
+      "&:hover": {
+        backgroundColor: transparent ? _bgColor : darken(_bgColor, 0.2)
+      }
+    };
+  }, [_solid, requestedColor, variant, props.sx, isMuiColor, theme]);
+  const progressColor = useMemo(() => {
+    const _color = isMuiColor ? theme.palette[requestedColor].main : requestedColor;
+    return _solid ? emphasize(_color, 0.5) : _color;
+  }, [_solid, requestedColor, isMuiColor, theme]);
+  let ColorButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      variant,
+      color: isMuiColor ? color : "inherit",
+      sx,
+      startIcon: progress ? /* @__PURE__ */ jsx(
+        CircularProgress,
+        {
+          size: props.size === "large" ? 22 : props.size === "small" ? 18 : 20,
+          sx: { color: progressColor }
+        }
+      ) : props.startIcon
+    }
+  );
+  if (tooltip) {
+    ColorButton = /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx("span", { children: ColorButton }) });
+  }
+  if (route) {
+    ColorButton = /* @__PURE__ */ jsx(Link, { to: route, style: { textDecoration: "none" }, children: ColorButton });
+  } else if (href) {
+    ColorButton = /* @__PURE__ */ jsx(Link$1, { href, style: { textDecoration: "none" }, target: "_new", children: ColorButton });
+  }
+  return ColorButton;
+};
+export {
+  CustomButton as default
+};

package/components/elements/addons/buttons/CustomIconButton.d.ts

@@ -0,0 +1,15 @@
+import { IconButtonProps } from '@mui/material';
+import { HTMLAttributeAnchorTarget, ReactNode } from 'react';
+export type CustomIconButtonProps = Omit<IconButtonProps, 'color'> & {
+    progress?: boolean | number;
+    transparent?: boolean;
+    solid?: boolean;
+    color?: string;
+    route?: string;
+    href?: string;
+    tooltip?: string | ReactNode;
+    target?: HTMLAttributeAnchorTarget;
+    clickableWithProgress?: boolean;
+};
+declare const CustomIconButton: ({ progress, transparent, solid, color, route, href, target, tooltip, disabled, children, clickableWithProgress, ...props }: CustomIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomIconButton;

package/components/elements/addons/buttons/CustomIconButton.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useTheme, alpha, lighten, darken, emphasize, IconButton, CircularProgress, Tooltip, Link as Link$1 } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { Link } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-router-dom@6.30.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-router-dom/dist/index.js";
+import { isMuiButtonColor } from "./index.js";
+const CustomIconButton = ({
+  progress,
+  transparent,
+  solid,
+  color,
+  route,
+  href,
+  target,
+  tooltip,
+  disabled,
+  children,
+  clickableWithProgress = false,
+  ...props
+}) => {
+  const theme = useTheme();
+  const requestedColor = color || "primary";
+  const isMuiColor = isMuiButtonColor(requestedColor);
+  const sx = useMemo(() => {
+    if (isMuiColor) {
+      return props.sx || {};
+    }
+    const _bgColor = !transparent && solid ? requestedColor : alpha(requestedColor, 0.2);
+    const _color = !transparent && solid ? theme.palette.getContrastText(requestedColor) : requestedColor;
+    return {
+      ...props.sx && { ...props.sx },
+      color: _color,
+      backgroundColor: transparent ? "transparent" : _bgColor,
+      "&:hover": {
+        backgroundColor: transparent ? _bgColor : darken(_bgColor, 0.2)
+      },
+      "&:disabled": {
+        backgroundColor: !transparent ? lighten(_bgColor, 0.1) : null
+      }
+    };
+  }, [requestedColor, solid, transparent, props.sx, isMuiColor, theme]);
+  const progressColor = useMemo(() => {
+    const _color = isMuiColor ? theme.palette[requestedColor].main : requestedColor;
+    return solid ? emphasize(_color, 0.5) : _color;
+  }, [solid, requestedColor, isMuiColor, theme]);
+  let _IconButton = /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...props,
+      disabled: !clickableWithProgress && !!progress || disabled,
+      color: isMuiColor ? color : "inherit",
+      sx,
+      children: progress ? /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: [
+        children,
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            disableShrink: true,
+            size: props.size === "large" ? 52 : props.size === "small" ? 28 : 40,
+            style: {
+              position: "absolute",
+              color: progressColor,
+              animationDuration: typeof progress === "number" ? `${progress}s` : null
+            }
+          }
+        )
+      ] }) : children
+    }
+  );
+  if (tooltip) {
+    _IconButton = /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx("span", { children: _IconButton }) });
+  }
+  if (route) {
+    _IconButton = /* @__PURE__ */ jsx(Link, { to: route, children: _IconButton });
+  } else if (href) {
+    _IconButton = /* @__PURE__ */ jsx(Link$1, { href, target: target ?? "_new", children: _IconButton });
+  }
+  return _IconButton;
+};
+export {
+  CustomIconButton as default
+};

package/components/elements/addons/buttons/index.d.ts

@@ -0,0 +1,3 @@
+export declare const MuiButtonColors: readonly ["inherit", "primary", "secondary", "success", "error", "info", "warning"];
+export type MuiButtonColorType = (typeof MuiButtonColors)[number];
+export declare const isMuiButtonColor: (color: string) => boolean;

package/components/elements/addons/buttons/index.js

@@ -0,0 +1,8 @@
+const MuiButtonColors = ["inherit", "primary", "secondary", "success", "error", "info", "warning"];
+const isMuiButtonColor = (color) => {
+  return MuiButtonColors.some((c) => c === color);
+};
+export {
+  MuiButtonColors,
+  isMuiButtonColor
+};

package/components/elements/addons/layout/FlexOne.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('react').MemoExoticComponent<({ children }: {
+    children?: any;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/components/elements/addons/layout/FlexOne.js

@@ -0,0 +1,9 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const FlexOne = ({ children = null }) => {
+  return /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children });
+};
+const FlexOne$1 = memo(FlexOne);
+export {
+  FlexOne$1 as default
+};

package/components/elements/addons/layout/FlexPort.d.ts

@@ -0,0 +1,12 @@
+type FlexPortProps = {
+    margin?: number;
+    mt?: number;
+    mr?: number;
+    mb?: number;
+    ml?: number;
+    disableOverflow?: boolean;
+    id?: string;
+    children: React.ReactNode;
+};
+declare const _default: import('react').MemoExoticComponent<({ children, disableOverflow, id, ...props }: FlexPortProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/components/elements/addons/layout/FlexPort.js

@@ -0,0 +1,32 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import usePageProps from "../../../../commons/components/pages/hooks/usePageProps.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const FlexPort = ({ children, disableOverflow = false, id = "", ...props }) => {
+  const pageProps = usePageProps({ props, defaultOverrides: { height: "100%", mb: 0, ml: 0, mr: 0, mt: 0 } });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: pageProps.className,
+      style: {
+        position: "relative",
+        flex: 1,
+        marginBottom: pageProps.style.marginBottom,
+        marginLeft: pageProps.style.marginLeft,
+        marginRight: pageProps.style.marginRight,
+        marginTop: pageProps.style.marginTop
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0, overflow: !disableOverflow && "auto" },
+          id,
+          children
+        }
+      )
+    }
+  );
+};
+const FlexPort$1 = memo(FlexPort);
+export {
+  FlexPort$1 as default
+};

package/components/elements/addons/layout/FlexVertical.d.ts

@@ -0,0 +1,8 @@
+import { PageProps } from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
+import { ReactNode } from 'react';
+type FlexVerticalProps = PageProps & {
+    flex?: number;
+    children: ReactNode;
+};
+declare const _default: import('react').MemoExoticComponent<({ flex, children, ...props }: FlexVerticalProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/components/elements/addons/layout/FlexVertical.js

@@ -0,0 +1,23 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import usePageProps from "../../../../commons/components/pages/hooks/usePageProps.js";
+import { memo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+const FlexVertical = ({ flex = 1, children, ...props }) => {
+  const pageProps = usePageProps({ props, defaultOverrides: { mb: 0, ml: 0, mr: 0, mt: 0 } });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: pageProps.className ? pageProps.className : "",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        flex,
+        ...pageProps.style
+      },
+      children
+    }
+  );
+};
+const FlexVertical$1 = memo(FlexVertical);
+export {
+  FlexVertical$1 as default
+};

package/components/elements/addons/layout/vsbox/VSBox.d.ts

@@ -0,0 +1,16 @@
+import { StackProps } from '@mui/material';
+type VSBoxProps = StackProps & {
+    top?: number;
+};
+type VSBoxState = {
+    header?: HTMLDivElement;
+    content?: HTMLDivElement;
+    top: number;
+    scrollTop: number;
+};
+export declare const VSBoxContext: import('react').Context<{
+    state: VSBoxState;
+    setState?: (state: VSBoxState) => void;
+}>;
+declare const VSBox: ({ top, children, ...stackProps }: VSBoxProps) => import("react/jsx-runtime").JSX.Element;
+export default VSBox;

package/components/elements/addons/layout/vsbox/VSBox.js

@@ -0,0 +1,31 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Stack } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import "../../../../../commons/components/app/AppContexts.js";
+import { createContext, useRef, useState, useLayoutEffect, useMemo } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useAppBar } from "../../../../../commons/components/app/hooks/useAppBar.js";
+import { useAppBarHeight } from "../../../../../commons/components/app/hooks/useAppBarHeight.js";
+import "../../../../../i18n.js";
+import "../../../../../commons/components/app/hooks/useAppSitemap.js";
+const VSBoxContext = createContext({
+  state: { top: 0, scrollTop: 0 }
+});
+const VSBox = ({ top, children, ...stackProps }) => {
+  const ref = useRef();
+  const appbarHeight = useAppBarHeight();
+  const { autoHide } = useAppBar();
+  const [state, setState] = useState({ top, scrollTop: top });
+  useLayoutEffect(() => {
+    var _a, _b;
+    const header = (_a = ref.current) == null ? void 0 : _a.querySelector("[data-vsbox-header]");
+    const content = (_b = ref.current) == null ? void 0 : _b.querySelector("[data-vsbox-content]");
+    const _top = top !== void 0 && top !== null ? top : autoHide ? 0 : appbarHeight;
+    const _scrollTop = _top + ((header == null ? void 0 : header.offsetHeight) || 0);
+    setState({ top: _top, scrollTop: _scrollTop, header, content });
+  }, [top, appbarHeight, autoHide]);
+  const _value = useMemo(() => ({ state, setState }), [state]);
+  return /* @__PURE__ */ jsx(VSBoxContext.Provider, { value: _value, children: /* @__PURE__ */ jsx(Stack, { id: "vs-box", ref, height: "fit-content", ...stackProps, children }) });
+};
+export {
+  VSBoxContext,
+  VSBox as default
+};

package/components/elements/addons/layout/vsbox/VSBoxContent.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '@mui/material';
+import { FC, PropsWithChildren } from 'react';
+declare const VSBoxContent: FC<PropsWithChildren<Omit<BoxProps, 'children'>>>;
+export default VSBoxContent;

package/components/elements/addons/layout/vsbox/VSBoxContent.js

@@ -0,0 +1,8 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { Box } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+const VSBoxContent = ({ children, ...boxProps }) => {
+  return /* @__PURE__ */ jsx(Box, { "data-vsbox-content": "true", ...boxProps, children });
+};
+export {
+  VSBoxContent as default
+};

package/components/elements/addons/layout/vsbox/VSBoxElement.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from '@mui/material';
+import { ReactElement } from 'react';
+type VSBoxElementProps = Omit<BoxProps, 'children'> & {
+    focus: boolean;
+    children: ReactElement;
+};
+declare const _default: import('react').MemoExoticComponent<({ focus, children }: VSBoxElementProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/components/elements/addons/layout/vsbox/VSBoxElement.js

@@ -0,0 +1,33 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { memo, useContext, useRef, useLayoutEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { VSBoxContext } from "./VSBox.js";
+const VSBoxElement = ({ focus, children }) => {
+  const {
+    state: { header, content, scrollTop }
+  } = useContext(VSBoxContext);
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (focus && element && element.offsetParent) {
+      const tableHeader = content == null ? void 0 : content.querySelector(
+        ":first-child[data-tuitable] [data-tuitable-header]"
+      );
+      const hh = scrollTop + ((tableHeader == null ? void 0 : tableHeader.offsetHeight) || 0);
+      const parent = element.offsetParent.getBoundingClientRect();
+      const fStart = element.offsetParent.scrollTop + hh;
+      const fEnd = fStart + parent.height - hh;
+      const eStart = element.offsetTop;
+      const eEnd = eStart + element.offsetHeight;
+      if (eStart < fStart) {
+        element.offsetParent.scrollBy({ top: eStart - fStart });
+      } else if (eEnd > fEnd) {
+        element.offsetParent.scrollBy({ top: eEnd - fEnd });
+      } else ;
+    }
+  }, [header, content, scrollTop, focus]);
+  return /* @__PURE__ */ jsx("div", { ref, className: "tui-vsbox-element", children });
+};
+const VSBoxElement$1 = memo(VSBoxElement);
+export {
+  VSBoxElement$1 as default
+};

package/components/elements/addons/layout/vsbox/VSBoxHeader.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '@mui/material';
+import { FC, PropsWithChildren } from 'react';
+type VSBoxHeaderProps = Omit<BoxProps, 'children'>;
+declare const VSBoxHeader: FC<PropsWithChildren<VSBoxHeaderProps>>;
+export default VSBoxHeader;

package/components/elements/addons/layout/vsbox/VSBoxHeader.js

@@ -0,0 +1,36 @@
+import { jsx } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useTheme, Box } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/@mui+material@5.18.0_@emotion+react@11.14.0_@types+react@18.3.23_react@18.3.1__@emotion_19a5ee0476da228d66b5ad5c143bb0c3/node_modules/@mui/material/index.js";
+import { useRef, useContext, useEffect } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { useResizeDetector } from "/home/runner/work/howler/howler/ui/node_modules/.pnpm/react-resize-detector@9.1.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-resize-detector/build/index.esm.js";
+import { VSBoxContext } from "./VSBox.js";
+const VSBoxHeader = ({ children, ...boxProps }) => {
+  const theme = useTheme();
+  const heightRef = useRef();
+  const { height, ref } = useResizeDetector({ handleWidth: false });
+  const { state, setState } = useContext(VSBoxContext);
+  useEffect(() => {
+    if (height !== heightRef.current) {
+      setState({ ...state, scrollTop: state.top + height });
+      heightRef.current = height;
+    }
+  }, [height, state, setState]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...boxProps,
+      ref,
+      "data-vsbox-header": "true",
+      position: "sticky",
+      top: state.top,
+      sx: {
+        backgroundColor: theme.palette.background.default,
+        zIndex: theme.zIndex.appBar - 1,
+        ...boxProps.sx && { ...boxProps.sx }
+      },
+      children
+    }
+  );
+};
+export {
+  VSBoxHeader as default
+};

package/components/elements/addons/lists/TuiList.d.ts

@@ -0,0 +1,8 @@
+import { TuiListItemOnSelect, TuiListItemRenderer } from '.';
+type TuiListProps<T> = {
+    keyboard?: boolean;
+    children: TuiListItemRenderer<T>;
+    onSelection?: TuiListItemOnSelect<T>;
+};
+declare const _default: import('react').MemoExoticComponent<(<T>({ keyboard, children, onSelection }: TuiListProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+export default _default;