@abpjs/theme-basic 2.9.0 → 3.0.0

package/dist/index.mjs

@@ -5,7 +5,17 @@ var eThemeBasicComponents = {
   EmptyLayout: "Theme.EmptyLayoutComponent",
   Logo: "Theme.LogoComponent",
   Routes: "Theme.RoutesComponent",
-  NavItems: "Theme.NavItemsComponent"
+  NavItems: "Theme.NavItemsComponent",
+  /**
+   * Component key for the current user nav item.
+   * @since 3.0.0
+   */
+  CurrentUser: "Theme.CurrentUserComponent",
+  /**
+   * Component key for the languages nav item.
+   * @since 3.0.0
+   */
+  Languages: "Theme.LanguagesComponent"
 };
 
 // src/enums/navigation-element-names.ts
@@ -777,9 +787,9 @@ function LayoutApplication({
   const navigate = useNavigate();
   const { logout } = useAuth2();
   const { direction, isRtl } = useDirection4();
-  const logoComponentKey = eThemeBasicComponents.Logo;
-  const routesComponentKey = eThemeBasicComponents.Routes;
-  const navItemsComponentKey = eThemeBasicComponents.NavItems;
+  const _logoComponentKey = eThemeBasicComponents.Logo;
+  const _routesComponentKey = eThemeBasicComponents.Routes;
+  const _navItemsComponentKey = eThemeBasicComponents.NavItems;
   const [isChangePasswordOpen, setIsChangePasswordOpen] = useState5(false);
   const [isProfileOpen, setIsProfileOpen] = useState5(false);
   const handleLogout = useCallback3(() => {
@@ -963,70 +973,214 @@ function LogoComponent({ style, linkTo }) {
 }
 
 // src/components/nav-items/NavItemsComponent.tsx
-import React5, { useEffect, useCallback as useCallback4, useMemo as useMemo6 } from "react";
-import { Stack as Stack3 } from "@chakra-ui/react";
-import { useConfig as useConfig4, useAuth as useAuth3, useSession as useSession2 } from "@abpjs/core";
+import { useCallback as useCallback4 } from "react";
+import { Stack as Stack3, Box as Box9 } from "@chakra-ui/react";
+import { useNavItems } from "@abpjs/theme-shared";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function NavItemsComponent({
-  smallScreen = false,
-  userProfileProps,
-  showLanguageSelector = true,
-  showCurrentUser = true
+  smallScreen = false
 }) {
-  const { currentUser, localization } = useConfig4();
-  const { isAuthenticated } = useAuth3();
-  const { language, setLanguage } = useSession2();
-  const { state, service } = useLayoutContext();
-  const defaultLanguage = useMemo6(() => {
-    const lang = localization?.languages?.find((l) => l.cultureName === language);
-    return lang?.displayName || language || "";
-  }, [localization, language]);
-  const dropdownLanguages = useMemo6(() => {
-    return localization?.languages?.filter((l) => l.cultureName !== language) || [];
-  }, [localization, language]);
-  const onChangeLang = useCallback4(
+  const navItems = useNavItems();
+  const trackByFn = useCallback4((item) => {
+    return item.id;
+  }, []);
+  const renderNavItem = useCallback4((item) => {
+    if (item.component) {
+      const Component = item.component;
+      return /* @__PURE__ */ jsx18(Component, {}, item.id);
+    }
+    if (item.html) {
+      return /* @__PURE__ */ jsx18(
+        Box9,
+        {
+          dangerouslySetInnerHTML: { __html: item.html }
+        },
+        item.id
+      );
+    }
+    if (item.action) {
+      return /* @__PURE__ */ jsx18(
+        Box9,
+        {
+          as: "button",
+          onClick: item.action,
+          cursor: "pointer",
+          width: "full"
+        },
+        item.id
+      );
+    }
+    return null;
+  }, []);
+  return /* @__PURE__ */ jsx18(Stack3, { gap: 2, width: "full", children: navItems.map((item) => renderNavItem(item)) });
+}
+
+// src/components/nav-items/CurrentUserComponent.tsx
+import { useCallback as useCallback5, useMemo as useMemo6 } from "react";
+import {
+  Avatar as Avatar2,
+  Box as Box10,
+  HStack as HStack6,
+  Menu as Menu3,
+  Portal as Portal4,
+  Text as Text5,
+  Button as Button5
+} from "@chakra-ui/react";
+import { LuEllipsisVertical as LuEllipsisVertical2, LuKey as LuKey2, LuLogOut as LuLogOut2, LuUser as LuUser2, LuLogIn as LuLogIn2 } from "react-icons/lu";
+import { useConfig as useConfig4, useAuth as useAuth3, useDirection as useDirection6, useLocalization as useLocalization3 } from "@abpjs/core";
+import { Link as RouterLink5, useNavigate as useNavigate2 } from "react-router-dom";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function CurrentUserComponent({
+  smallScreen: _smallScreen = false,
+  loginUrl = "/account/login",
+  profileUrl = "/account/manage",
+  changePasswordUrl = "/account/manage",
+  containerStyle,
+  menuZIndex = 1400
+}) {
+  const { currentUser } = useConfig4();
+  const { isAuthenticated, logout: authLogout } = useAuth3();
+  const { endSide } = useDirection6();
+  const { t } = useLocalization3();
+  const navigate = useNavigate2();
+  const handleLogout = useCallback5(() => {
+    authLogout();
+  }, [authLogout]);
+  const handleProfile = useCallback5(() => {
+    navigate(profileUrl);
+  }, [navigate, profileUrl]);
+  const handleChangePassword = useCallback5(() => {
+    navigate(changePasswordUrl);
+  }, [navigate, changePasswordUrl]);
+  const initials = useMemo6(() => {
+    const userName = currentUser?.userName || "";
+    return userName.slice(0, 2).toUpperCase();
+  }, [currentUser?.userName]);
+  if (!isAuthenticated || !currentUser) {
+    return /* @__PURE__ */ jsx19(Button5, { asChild: true, variant: "outline", width: "full", children: /* @__PURE__ */ jsxs12(RouterLink5, { to: loginUrl, children: [
+      /* @__PURE__ */ jsx19(LuLogIn2, {}),
+      t("AbpAccount::Login")
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs12(HStack6, { gap: "3", justify: "space-between", css: containerStyle, children: [
+    /* @__PURE__ */ jsxs12(HStack6, { gap: "3", children: [
+      /* @__PURE__ */ jsx19(Avatar2.Root, { size: "sm", children: /* @__PURE__ */ jsx19(Avatar2.Fallback, { children: initials }) }),
+      /* @__PURE__ */ jsx19(Box10, { children: /* @__PURE__ */ jsx19(Text5, { textStyle: "sm", fontWeight: "medium", children: currentUser.userName }) })
+    ] }),
+    /* @__PURE__ */ jsxs12(Menu3.Root, { positioning: { placement: `${endSide}-start` }, children: [
+      /* @__PURE__ */ jsx19(Menu3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx19(
+        Box10,
+        {
+          as: "button",
+          p: "2",
+          borderRadius: "md",
+          cursor: "pointer",
+          _hover: { bg: "colorPalette.subtle" },
+          "aria-label": "User menu",
+          children: /* @__PURE__ */ jsx19(LuEllipsisVertical2, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx19(Portal4, { children: /* @__PURE__ */ jsx19(Menu3.Positioner, { style: { zIndex: menuZIndex }, children: /* @__PURE__ */ jsxs12(Menu3.Content, { children: [
+        /* @__PURE__ */ jsxs12(Menu3.Item, { value: "profile", onClick: handleProfile, children: [
+          /* @__PURE__ */ jsx19(LuUser2, {}),
+          t("AbpUi::PersonalInfo")
+        ] }),
+        /* @__PURE__ */ jsxs12(Menu3.Item, { value: "change-password", onClick: handleChangePassword, children: [
+          /* @__PURE__ */ jsx19(LuKey2, {}),
+          t("AbpUi::ChangePassword")
+        ] }),
+        /* @__PURE__ */ jsxs12(Menu3.Item, { value: "logout", onClick: handleLogout, color: "red.500", children: [
+          /* @__PURE__ */ jsx19(LuLogOut2, {}),
+          t("AbpUi::Logout")
+        ] })
+      ] }) }) })
+    ] })
+  ] });
+}
+
+// src/components/nav-items/LanguagesComponent.tsx
+import { useCallback as useCallback6, useMemo as useMemo7 } from "react";
+import {
+  Button as Button6,
+  HStack as HStack7,
+  Menu as Menu4,
+  Portal as Portal5,
+  Text as Text6
+} from "@chakra-ui/react";
+import { LuChevronDown as LuChevronDown3, LuGlobe as LuGlobe2 } from "react-icons/lu";
+import { useConfig as useConfig5, useSession as useSession3 } from "@abpjs/core";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function LanguagesComponent({
+  smallScreen: _smallScreen = false,
+  compact = false,
+  containerStyle,
+  menuZIndex = 1400
+}) {
+  const { localization } = useConfig5();
+  const { language, setLanguage } = useSession3();
+  const languages = useMemo7(() => {
+    return localization?.languages || [];
+  }, [localization]);
+  const currentLanguage = useMemo7(() => {
+    return languages.find((lang) => lang.cultureName === language);
+  }, [languages, language]);
+  const defaultLanguage = useMemo7(() => {
+    return currentLanguage?.displayName || currentLanguage?.cultureName || "";
+  }, [currentLanguage]);
+  const dropdownLanguages = useMemo7(() => {
+    return languages.filter((lang) => lang.cultureName !== language);
+  }, [languages, language]);
+  const selectedLangCulture = language || "";
+  const handleChangeLang = useCallback6(
     (cultureName) => {
       setLanguage(cultureName);
       window.location.reload();
     },
     [setLanguage]
   );
-  const logout = useCallback4(() => {
-    userProfileProps?.onLogout?.();
-  }, [userProfileProps]);
-  useEffect(() => {
-    if (showLanguageSelector && localization?.languages && localization.languages.length > 1) {
-      service.addNavigationElement({
-        name: eNavigationElementNames.Language,
-        element: /* @__PURE__ */ jsx18(LanguageSelector, {}, "language-selector"),
-        order: 2
-      });
-      return () => {
-        service.removeNavigationElement(eNavigationElementNames.Language);
-      };
-    }
-  }, [service, showLanguageSelector, localization?.languages]);
-  useEffect(() => {
-    if (showCurrentUser) {
-      service.addNavigationElement({
-        name: eNavigationElementNames.User,
-        element: /* @__PURE__ */ jsx18(UserProfile, { ...userProfileProps }, "user-profile"),
-        order: 3
-      });
-      return () => {
-        service.removeNavigationElement(eNavigationElementNames.User);
-      };
-    }
-  }, [service, showCurrentUser, userProfileProps]);
-  const navElements = state.navigationElements;
-  return /* @__PURE__ */ jsx18(Stack3, { gap: 2, width: "full", children: navElements.map((element) => /* @__PURE__ */ jsx18(React5.Fragment, { children: element.element }, element.name)) });
+  if (languages.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs13(Menu4.Root, { children: [
+    /* @__PURE__ */ jsx20(Menu4.Trigger, { asChild: true, children: /* @__PURE__ */ jsx20(
+      Button6,
+      {
+        variant: "ghost",
+        width: "full",
+        justifyContent: "start",
+        gap: "3",
+        color: "fg.muted",
+        css: containerStyle,
+        _hover: {
+          bg: "colorPalette.subtle",
+          color: "colorPalette.fg"
+        },
+        children: /* @__PURE__ */ jsxs13(HStack7, { justifyContent: "space-between", width: "full", children: [
+          /* @__PURE__ */ jsxs13(HStack7, { gap: "3", children: [
+            /* @__PURE__ */ jsx20(LuGlobe2, {}),
+            !compact && /* @__PURE__ */ jsx20(Text6, { children: defaultLanguage })
+          ] }),
+          /* @__PURE__ */ jsx20(LuChevronDown3, {})
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx20(Portal5, { children: /* @__PURE__ */ jsx20(Menu4.Positioner, { style: { zIndex: menuZIndex }, children: /* @__PURE__ */ jsx20(Menu4.Content, { children: dropdownLanguages.map((lang) => /* @__PURE__ */ jsx20(
+      Menu4.Item,
+      {
+        value: lang.cultureName,
+        onClick: () => handleChangeLang(lang.cultureName),
+        children: lang.displayName || lang.cultureName
+      },
+      lang.cultureName
+    )) }) }) })
+  ] });
 }
 
 // src/components/routes/RoutesComponent.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 import { Stack as Stack4 } from "@chakra-ui/react";
-import { useConfig as useConfig5, useDirection as useDirection6 } from "@abpjs/core";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { useConfig as useConfig6, useDirection as useDirection7 } from "@abpjs/core";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function getVisibleRoutes2(routes) {
   return routes.reduce((acc, val) => {
     if (val.invisible) {
@@ -1040,35 +1194,35 @@ function getVisibleRoutes2(routes) {
   }, []);
 }
 function RoutesComponent({
-  smallScreen = false,
+  smallScreen: _smallScreen = false,
   defaultIcon,
   routes: customRoutes
 }) {
-  const { routes: configRoutes } = useConfig5();
-  const { direction } = useDirection6();
+  const { routes: configRoutes } = useConfig6();
+  const { direction } = useDirection7();
   const routes = customRoutes || configRoutes || [];
-  const visibleRoutes = useMemo7(() => {
+  const _visibleRoutes = useMemo8(() => {
     return getVisibleRoutes2(routes);
   }, [routes]);
-  const trackByFn = (index, item) => {
+  const _trackByFn = (index, item) => {
     return item.name || item.path || index;
   };
-  return /* @__PURE__ */ jsx19(Stack4, { gap: "1", dir: direction, children: /* @__PURE__ */ jsx19(NavLinks, { defaultIcon }) });
+  return /* @__PURE__ */ jsx21(Stack4, { gap: "1", dir: direction, children: /* @__PURE__ */ jsx21(NavLinks, { defaultIcon }) });
 }
 
 // src/providers/ThemeBasicProvider.tsx
 import { useEffect as useEffect2 } from "react";
 import { ThemeSharedProvider, defineConfig } from "@abpjs/theme-shared";
-import { useSession as useSession3, useDirection as useDirection7 } from "@abpjs/core";
-import { Fragment as Fragment4, jsx as jsx20 } from "react/jsx-runtime";
+import { useSession as useSession4, useDirection as useDirection8 } from "@abpjs/core";
+import { Fragment as Fragment4, jsx as jsx22 } from "react/jsx-runtime";
 function LocaleSync({ children }) {
-  const { language } = useSession3();
-  const { direction } = useDirection7();
+  const { language } = useSession4();
+  const { direction } = useDirection8();
   useEffect2(() => {
     document.documentElement.dir = direction;
     document.documentElement.lang = language || "en";
   }, [direction, language]);
-  return /* @__PURE__ */ jsx20(Fragment4, { children });
+  return /* @__PURE__ */ jsx22(Fragment4, { children });
 }
 function ThemeBasicInner({
   children,
@@ -1083,9 +1237,9 @@ function ThemeBasicInner({
   appName,
   logoLink
 }) {
-  const { language } = useSession3();
+  const { language } = useSession4();
   const locale = language || "en-US";
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     ThemeSharedProvider,
     {
       renderToasts,
@@ -1095,14 +1249,14 @@ function ThemeBasicInner({
       enableColorMode,
       defaultColorMode,
       locale,
-      children: /* @__PURE__ */ jsx20(LocaleSync, { children: /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsx22(LocaleSync, { children: /* @__PURE__ */ jsx22(
         BrandingProvider,
         {
           logo,
           logoIcon,
           appName,
           logoLink,
-          children: /* @__PURE__ */ jsx20(LayoutProvider, { children })
+          children: /* @__PURE__ */ jsx22(LayoutProvider, { children })
         }
       ) })
     }
@@ -1176,7 +1330,7 @@ function ThemeBasicProvider({
   logoLink
 }) {
   const mergedThemeOverrides = themeOverrides || defaultThemeBasicConfig;
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     ThemeBasicInner,
     {
       renderToasts,
@@ -1194,15 +1348,113 @@ function ThemeBasicProvider({
   );
 }
 
+// src/providers/nav-item.provider.ts
+import { getNavItemsService } from "@abpjs/theme-shared";
+function configureNavItems(navItems) {
+  return () => {
+    navItems.addItems([
+      {
+        id: eThemeBasicComponents.Languages,
+        component: LanguagesComponent,
+        order: 100
+      },
+      {
+        id: eThemeBasicComponents.CurrentUser,
+        component: CurrentUserComponent,
+        order: 200
+      }
+    ]);
+  };
+}
+var BASIC_THEME_NAV_ITEM_PROVIDERS = {
+  configureNavItems
+};
+function initializeThemeBasicNavItems() {
+  const navItemsService = getNavItemsService();
+  configureNavItems(navItemsService)();
+}
+
+// src/providers/styles.provider.ts
+var THEME_BASIC_STYLES = `
+/* Content header styles */
+.content-header-title {
+    font-size: 24px;
+}
+
+.entry-row {
+    margin-bottom: 15px;
+}
+
+/* Input validation styles */
+.input-validation-error {
+    border-color: #dc3545;
+}
+
+.field-validation-error {
+    font-size: 0.8em;
+}
+
+/* Table styles */
+.ui-table .ui-table-tbody > tr.empty-row > div.empty-row-content {
+    border: 1px solid #c8c8c8;
+}
+
+.ui-table .pagination-wrapper {
+    background-color: #f4f4f4;
+    border: 1px solid #c8c8c8;
+}
+
+/* Bordered datatable styles (added in v3.0.0) */
+.bordered .datatable-body-row {
+    border-top: 1px solid #eee;
+    margin-top: -1px;
+}
+
+/* Loading overlay */
+.abp-loading {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+/* Modal backdrop */
+.modal-backdrop {
+    background-color: rgba(0, 0, 0, 0.6);
+}
+`;
+function injectThemeBasicStyles() {
+  const existingStyle = document.getElementById("abpjs-theme-basic-styles");
+  if (existingStyle) {
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.id = "abpjs-theme-basic-styles";
+  styleElement.textContent = THEME_BASIC_STYLES;
+  document.head.appendChild(styleElement);
+}
+function configureStyles() {
+  return () => {
+    injectThemeBasicStyles();
+  };
+}
+var BASIC_THEME_STYLES_PROVIDERS = {
+  configureStyles
+};
+function initializeThemeBasicStyles() {
+  configureStyles()();
+}
+
 // src/index.ts
 var LAYOUTS = [LayoutApplication, LayoutAccount, LayoutEmpty];
 export {
+  BASIC_THEME_NAV_ITEM_PROVIDERS,
+  BASIC_THEME_STYLES_PROVIDERS,
   Block,
   BrandingProvider,
   ChangePassword,
+  CurrentUserComponent,
   DefaultLogo,
   LAYOUTS,
   LanguageSelector,
+  LanguagesComponent,
   LayoutAccount,
   LayoutApplication,
   LayoutBase,
@@ -1222,12 +1474,18 @@ export {
   SearchProvider,
   Sidebar,
   SidebarLink,
+  THEME_BASIC_STYLES,
   ThemeBasicProvider,
   UserProfile,
+  configureNavItems,
+  configureStyles,
   defaultThemeBasicConfig,
   defineConfig,
   eNavigationElementNames,
   eThemeBasicComponents,
+  initializeThemeBasicNavItems,
+  initializeThemeBasicStyles,
+  injectThemeBasicStyles,
   useBranding,
   useLayoutContext,
   useLayoutService,

package/dist/providers/index.d.ts

@@ -1 +1,3 @@
 export * from './ThemeBasicProvider';
+export * from './nav-item.provider';
+export * from './styles.provider';

package/dist/providers/nav-item.provider.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Nav Item Provider
+ * Translated from @abp/ng.theme.basic/lib/providers/nav-item.provider.ts v3.0.0
+ *
+ * Provides nav item configuration for the theme-basic module.
+ * Uses NavItemsService from @abpjs/theme-shared to register nav items.
+ *
+ * @since 3.0.0
+ */
+import { NavItemsService } from '@abpjs/theme-shared';
+/**
+ * Configures the basic theme nav items.
+ * This function is called during app initialization to register
+ * the default nav items (Languages and CurrentUser).
+ *
+ * @param navItems - The NavItemsService instance
+ * @returns A function that performs the nav item configuration
+ * @since 3.0.0
+ */
+export declare function configureNavItems(navItems: NavItemsService): () => void;
+/**
+ * Basic theme nav item providers for initialization.
+ * Use this in your app setup to configure theme-basic nav items.
+ *
+ * In React, you typically call this during app initialization:
+ *
+ * @example
+ * ```tsx
+ * import { initializeThemeBasicNavItems } from '@abpjs/theme-basic';
+ *
+ * // In your app initialization
+ * initializeThemeBasicNavItems();
+ * ```
+ *
+ * @since 3.0.0
+ */
+export declare const BASIC_THEME_NAV_ITEM_PROVIDERS: {
+    configureNavItems: typeof configureNavItems;
+};
+/**
+ * Initialize theme basic nav items.
+ * Call this function during app initialization to register the
+ * default Languages and CurrentUser nav items.
+ *
+ * @since 3.0.0
+ *
+ * @example
+ * ```tsx
+ * import { initializeThemeBasicNavItems } from '@abpjs/theme-basic';
+ *
+ * // Call once during app initialization
+ * initializeThemeBasicNavItems();
+ * ```
+ */
+export declare function initializeThemeBasicNavItems(): void;

package/dist/providers/styles.provider.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Styles Provider
+ * Translated from @abp/ng.theme.basic/lib/providers/styles.provider.ts v3.0.0
+ *
+ * Provides style configuration for the theme-basic module.
+ * In Angular, this uses DomInsertionService to inject CSS into the DOM.
+ * In React with Chakra UI, most styles are handled via CSS-in-JS,
+ * but this provider can be used for any global CSS overrides.
+ *
+ * @since 3.0.0
+ */
+/**
+ * Default styles for theme-basic.
+ * These are global CSS styles that supplement Chakra UI's styling.
+ *
+ * @since 3.0.0
+ */
+export declare const THEME_BASIC_STYLES = "\n/* Content header styles */\n.content-header-title {\n    font-size: 24px;\n}\n\n.entry-row {\n    margin-bottom: 15px;\n}\n\n/* Input validation styles */\n.input-validation-error {\n    border-color: #dc3545;\n}\n\n.field-validation-error {\n    font-size: 0.8em;\n}\n\n/* Table styles */\n.ui-table .ui-table-tbody > tr.empty-row > div.empty-row-content {\n    border: 1px solid #c8c8c8;\n}\n\n.ui-table .pagination-wrapper {\n    background-color: #f4f4f4;\n    border: 1px solid #c8c8c8;\n}\n\n/* Bordered datatable styles (added in v3.0.0) */\n.bordered .datatable-body-row {\n    border-top: 1px solid #eee;\n    margin-top: -1px;\n}\n\n/* Loading overlay */\n.abp-loading {\n    background: rgba(0, 0, 0, 0.1);\n}\n\n/* Modal backdrop */\n.modal-backdrop {\n    background-color: rgba(0, 0, 0, 0.6);\n}\n";
+/**
+ * Injects the theme-basic styles into the document head.
+ * Call this function during app initialization if you need the global CSS styles.
+ *
+ * Note: Most styling in React/Chakra is handled via CSS-in-JS.
+ * This is primarily for compatibility with Angular components or
+ * third-party libraries that expect global CSS classes.
+ *
+ * @since 3.0.0
+ */
+export declare function injectThemeBasicStyles(): void;
+/**
+ * Configures the basic theme styles.
+ * This function is called during app initialization to inject global CSS.
+ *
+ * @returns A function that performs the style injection
+ * @since 3.0.0
+ */
+export declare function configureStyles(): () => void;
+/**
+ * Basic theme styles providers for initialization.
+ * Use this in your app setup to configure theme-basic styles.
+ *
+ * In React, you typically call this during app initialization:
+ *
+ * @example
+ * ```tsx
+ * import { initializeThemeBasicStyles } from '@abpjs/theme-basic';
+ *
+ * // In your app initialization
+ * initializeThemeBasicStyles();
+ * ```
+ *
+ * @since 3.0.0
+ */
+export declare const BASIC_THEME_STYLES_PROVIDERS: {
+    configureStyles: typeof configureStyles;
+};
+/**
+ * Initialize theme basic styles.
+ * Call this function during app initialization to inject the
+ * global CSS styles for theme-basic.
+ *
+ * @since 3.0.0
+ *
+ * @example
+ * ```tsx
+ * import { initializeThemeBasicStyles } from '@abpjs/theme-basic';
+ *
+ * // Call once during app initialization
+ * initializeThemeBasicStyles();
+ * ```
+ */
+export declare function initializeThemeBasicStyles(): void;

package/dist/services/index.d.ts

@@ -1 +1,6 @@
+/**
+ * @deprecated The layout-state.service was removed in Angular v3.0.0.
+ * Use NavItemsService from @abpjs/theme-shared instead.
+ * This export is kept for backwards compatibility and will be removed in a future version.
+ */
 export * from './layout-state.service';

package/dist/services/layout-state.service.d.ts

@@ -4,6 +4,11 @@ import { Layout } from '../models';
  * Provides methods to access and modify layout state.
  *
  * @since 2.7.0
+ * @deprecated This service was removed in Angular v3.0.0. Use NavItemsService from
+ * @abpjs/theme-shared instead. This export is kept for backwards compatibility
+ * and will be removed in a future version.
+ *
+ * @see {@link NavItemsService} from @abpjs/theme-shared
  */
 export interface LayoutStateService {
     /**
@@ -31,6 +36,11 @@ export interface LayoutStateService {
  * Provides a service-like interface matching the Angular LayoutStateService.
  *
  * @since 2.7.0
+ * @deprecated This hook was removed in Angular v3.0.0. Use NavItemsService from
+ * @abpjs/theme-shared instead. This export is kept for backwards compatibility
+ * and will be removed in a future version.
+ *
+ * @see {@link getNavItemsService} and {@link useNavItems} from @abpjs/theme-shared
  *
  * @example
  * ```tsx