@abpjs/theme-basic 0.7.6

package/dist/components/blocks/sidebars/sidebar-with-collapsible/nav-links.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface NavLinksProps {
+    /** Default icon for routes without specific icons */
+    defaultIcon?: ReactNode;
+}
+/**
+ * Navigation links component that renders routes from ABP config.
+ * Icons are taken from the route's `icon` property.
+ * Routes are filtered based on sidebar search query.
+ */
+export declare const NavLinks: ({ defaultIcon }: NavLinksProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/blocks/sidebars/sidebar-with-collapsible/navbar.d.ts

@@ -0,0 +1,7 @@
+import type { ContainerProps } from '@chakra-ui/react';
+import { SidebarProps } from './sidebar';
+export interface NavbarProps extends ContainerProps {
+    /** Props to pass to the Sidebar component in the drawer */
+    sidebarProps?: Omit<SidebarProps, 'hideBelow' | 'hideFrom'>;
+}
+export declare const Navbar: ({ sidebarProps, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/blocks/sidebars/sidebar-with-collapsible/search-context.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+interface SearchContextValue {
+    /** Current search query */
+    searchQuery: string;
+    /** Update search query */
+    setSearchQuery: (query: string) => void;
+}
+interface SearchProviderProps {
+    children: ReactNode;
+}
+/**
+ * Provider for sidebar search functionality.
+ * Allows SearchField to update the query and NavLinks to filter based on it.
+ */
+export declare const SearchProvider: ({ children }: SearchProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access search context
+ */
+export declare const useSearch: () => SearchContextValue;
+export {};

package/dist/components/blocks/sidebars/sidebar-with-collapsible/search-field.d.ts

@@ -0,0 +1 @@
+export declare const SearchField: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/blocks/sidebars/sidebar-with-collapsible/sidebar-link.d.ts

@@ -0,0 +1,16 @@
+import { type ButtonProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+interface SidebarLinkProps extends Omit<ButtonProps, 'children'> {
+    /** Link destination path */
+    href?: string;
+    /** Whether to use exact path matching for active state */
+    exact?: boolean;
+    /** Content to display */
+    children?: ReactNode;
+    /** Badge content (number or text) to display at end of link */
+    badge?: ReactNode;
+    /** Badge color palette (default: 'gray') */
+    badgeColorPalette?: string;
+}
+export declare const SidebarLink: (props: SidebarLinkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/blocks/sidebars/sidebar-with-collapsible/sidebar.d.ts

@@ -0,0 +1,26 @@
+import { type StackProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { UserProfileProps } from './user-profile';
+export interface SidebarProps extends StackProps {
+    /** Show search field */
+    showSearch?: boolean;
+    /** Show language selector */
+    showLanguageSelector?: boolean;
+    /** Show help center link */
+    showHelpCenter?: boolean;
+    /** Help center URL */
+    helpCenterUrl?: string;
+    /** Show settings link */
+    showSettings?: boolean;
+    /** Settings URL */
+    settingsUrl?: string;
+    /** Default icon for routes without specific icons (icons are defined on routes via the `icon` property) */
+    defaultIcon?: ReactNode;
+    /** User profile callbacks */
+    userProfileProps?: UserProfileProps;
+    /** Additional content to render at the top of the sidebar (after logo) */
+    headerContent?: ReactNode;
+    /** Additional content to render before the user profile */
+    footerContent?: ReactNode;
+}
+export declare const Sidebar: ({ showSearch, showLanguageSelector, showHelpCenter, helpCenterUrl, showSettings, settingsUrl, defaultIcon, userProfileProps, headerContent, footerContent, ...props }: SidebarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/blocks/sidebars/sidebar-with-collapsible/user-profile.d.ts

@@ -0,0 +1,8 @@
+export interface UserProfileProps {
+    onChangePassword?: () => void;
+    onProfile?: () => void;
+    onLogout?: () => void;
+    /** URL to redirect to for login (default: /account/login) */
+    loginUrl?: string;
+}
+export declare const UserProfile: ({ onChangePassword, onProfile, onLogout, loginUrl }: UserProfileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/change-password/ChangePassword.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface ChangePasswordProps {
+    /** Whether the modal is visible */
+    visible: boolean;
+    /** Callback when visibility changes */
+    onVisibleChange: (visible: boolean) => void;
+}
+/**
+ * Change password modal component.
+ * Translated from Angular ChangePasswordComponent.
+ *
+ * Provides a modal dialog for changing the user's password with:
+ * - Current password input
+ * - New password input with validation
+ * - Confirm new password with match validation
+ *
+ * @example
+ * ```tsx
+ * <ChangePassword
+ *   visible={isOpen}
+ *   onVisibleChange={setIsOpen}
+ * />
+ * ```
+ */
+export declare function ChangePassword({ visible, onVisibleChange, }: ChangePasswordProps): React.ReactElement;
+export default ChangePassword;

package/dist/components/change-password/index.d.ts

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

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './layout';
+export * from './layout-application';
+export * from './layout-account';
+export * from './layout-empty';
+export * from './change-password';
+export * from './profile';
+export * from './blocks/sidebars/sidebar-with-collapsible';

package/dist/components/layout/Layout.d.ts

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+export interface LayoutProps {
+    /** Brand name or logo to display in navbar */
+    brandName?: string;
+    /** Link destination for brand (defaults to "/") */
+    brandLink?: string;
+    /** Content to render in the navbar (typically navigation items) */
+    children?: ReactNode;
+    /** Whether to render the router outlet inside the layout */
+    renderOutlet?: boolean;
+}
+/**
+ * Base layout component providing navbar structure.
+ * Translated from Angular LayoutComponent.
+ *
+ * Provides a responsive Bootstrap-style navbar with:
+ * - Brand/logo area
+ * - Collapsible navigation for mobile
+ * - Slot for navigation content via children
+ * - Container with router outlet
+ *
+ * @example
+ * ```tsx
+ * <Layout brandName="MyApp">
+ *   <NavItems />
+ * </Layout>
+ * ```
+ */
+export declare function LayoutBase({ brandName, brandLink, children, renderOutlet, }: LayoutProps): React.ReactElement;
+export default LayoutBase;

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

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

package/dist/components/layout-account/LayoutAccount.d.ts

@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+import { eLayoutType } from '@abpjs/core';
+export interface LayoutAccountProps {
+    /** Whether to show the language selector */
+    showLanguageSelector?: boolean;
+    /** Whether to show search field in sidebar */
+    showSearch?: boolean;
+    /** Whether to show help center link */
+    showHelpCenter?: boolean;
+    /** Help center URL */
+    helpCenterUrl?: string;
+    /** Whether to show settings link */
+    showSettings?: boolean;
+    /** Settings URL */
+    settingsUrl?: string;
+    /** Default icon for routes without specific icons */
+    defaultIcon?: ReactNode;
+    /** Additional content to render at the top of the sidebar (after logo) */
+    headerContent?: ReactNode;
+    /** Additional content to render before the user profile */
+    footerContent?: ReactNode;
+    /** Custom children to render in content area (overrides Outlet) */
+    children?: ReactNode;
+}
+/**
+ * Account layout component for authentication pages (login, register, etc.).
+ * Uses a sidebar-based layout similar to LayoutApplication but without
+ * user-specific features (no profile, no change password, no logout).
+ *
+ * Features:
+ * - Responsive sidebar (drawer on mobile, fixed on desktop)
+ * - Navigation menu from routes
+ * - Language switcher
+ * - RTL support for Arabic, Hebrew, Persian, and other RTL languages
+ *
+ * @example
+ * ```tsx
+ * <LayoutAccount showLanguageSelector={true} />
+ * ```
+ */
+export declare function LayoutAccount({ showLanguageSelector, showSearch, showHelpCenter, helpCenterUrl, showSettings, settingsUrl, defaultIcon, headerContent, footerContent, children, }: LayoutAccountProps): React.ReactElement;
+export declare namespace LayoutAccount {
+    var type: eLayoutType;
+}
+export default LayoutAccount;

package/dist/components/layout-account/index.d.ts

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

package/dist/components/layout-application/LayoutApplication.d.ts

@@ -0,0 +1,60 @@
+import React, { ReactNode } from 'react';
+import { eLayoutType } from '@abpjs/core';
+/** Z-index for sidebar/navbar - exported so menus can layer above it */
+export declare const SIDEBAR_Z_INDEX = 1100;
+export interface LayoutApplicationProps {
+    /** @deprecated Use logo prop on ThemeBasicProvider instead */
+    brandName?: string;
+    /** @deprecated Use logoLink prop on ThemeBasicProvider instead */
+    brandLink?: string;
+    /** Whether to show the language selector */
+    showLanguageSelector?: boolean;
+    /** Whether to show the current user menu */
+    showCurrentUser?: boolean;
+    /** Whether to show search field in sidebar */
+    showSearch?: boolean;
+    /** Whether to show help center link */
+    showHelpCenter?: boolean;
+    /** Help center URL */
+    helpCenterUrl?: string;
+    /** Whether to show settings link */
+    showSettings?: boolean;
+    /** Settings URL */
+    settingsUrl?: string;
+    /** Default icon for routes without specific icons (icons are defined on routes via the `icon` property) */
+    defaultIcon?: ReactNode;
+    /** Additional content to render at the top of the sidebar (after logo) */
+    headerContent?: ReactNode;
+    /** Additional content to render before the user profile */
+    footerContent?: ReactNode;
+    /** Custom children to render in content area (overrides Outlet) */
+    children?: ReactNode;
+}
+/**
+ * Application layout component for authenticated pages.
+ * Uses a sidebar-based layout with Chakra UI Pro blocks.
+ *
+ * Features:
+ * - Responsive sidebar (drawer on mobile, fixed on desktop)
+ * - Navigation menu from routes (icons defined via route's `icon` property)
+ * - Language switcher
+ * - Current user menu with logout, change password, profile
+ * - Customizable logo via ThemeBasicProvider
+ * - RTL support for Arabic, Hebrew, Persian, and other RTL languages
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - icons are defined on routes
+ * const routes = [
+ *   { name: 'Home', path: '', icon: <LuHome /> },
+ *   { name: 'Settings', path: 'settings', icon: <LuSettings /> },
+ * ];
+ *
+ * <LayoutApplication />
+ * ```
+ */
+export declare function LayoutApplication({ showLanguageSelector, showCurrentUser, showSearch, showHelpCenter, helpCenterUrl, showSettings, settingsUrl, defaultIcon, headerContent, footerContent, children, }: LayoutApplicationProps): React.ReactElement;
+export declare namespace LayoutApplication {
+    var type: eLayoutType;
+}
+export default LayoutApplication;

package/dist/components/layout-application/index.d.ts

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

package/dist/components/layout-empty/LayoutEmpty.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { eLayoutType } from '@abpjs/core';
+export interface LayoutEmptyProps {
+    /** Custom children to render instead of Outlet */
+    children?: ReactNode;
+}
+/**
+ * Empty layout component for pages that don't need a navbar.
+ * Translated from Angular LayoutEmptyComponent.
+ *
+ * Provides a minimal layout with just the router outlet.
+ * Useful for error pages, landing pages, or custom layouts.
+ *
+ * @example
+ * ```tsx
+ * <LayoutEmpty />
+ * ```
+ */
+export declare function LayoutEmpty({ children }: LayoutEmptyProps): React.ReactElement;
+export declare namespace LayoutEmpty {
+    var type: eLayoutType;
+}
+export default LayoutEmpty;

package/dist/components/layout-empty/index.d.ts

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

package/dist/components/profile/Profile.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface ProfileProps {
+    /** Whether the modal is visible */
+    visible: boolean;
+    /** Callback when visibility changes */
+    onVisibleChange: (visible: boolean) => void;
+}
+/**
+ * Profile modal component for editing user profile.
+ * Translated from Angular ProfileComponent.
+ *
+ * Provides a modal dialog for editing user profile with:
+ * - Username (required)
+ * - Email (required)
+ * - Name
+ * - Surname
+ * - Phone number
+ *
+ * @example
+ * ```tsx
+ * <Profile
+ *   visible={isOpen}
+ *   onVisibleChange={setIsOpen}
+ * />
+ * ```
+ */
+export declare function Profile({ visible, onVisibleChange, }: ProfileProps): React.ReactElement;
+export default Profile;

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

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

package/dist/contexts/branding.context.d.ts

@@ -0,0 +1,67 @@
+import React, { ReactNode } from 'react';
+/**
+ * Branding configuration for the application.
+ * Allows customization of logo, brand name, and related visual elements.
+ */
+export interface BrandingConfig {
+    /** Full logo component (used in expanded sidebar) */
+    logo?: ReactNode;
+    /** Icon-only logo (used in mobile navbar or collapsed sidebar) */
+    logoIcon?: ReactNode;
+    /** Brand/application name (fallback when no logo provided) */
+    appName?: string;
+    /** Link destination when clicking the logo */
+    logoLink?: string;
+}
+/**
+ * Context value for branding configuration.
+ */
+export interface BrandingContextValue {
+    /** Current branding configuration */
+    config: BrandingConfig;
+}
+export interface BrandingProviderProps {
+    children: ReactNode;
+    /** Custom logo component for the sidebar */
+    logo?: ReactNode;
+    /** Icon-only logo for mobile/collapsed views */
+    logoIcon?: ReactNode;
+    /** Application name (used as fallback if no logo provided) */
+    appName?: string;
+    /** Link destination when clicking the logo (default: '/') */
+    logoLink?: string;
+}
+/**
+ * Provider component for branding configuration.
+ * Allows setting logo and brand name at the application level.
+ *
+ * @example
+ * ```tsx
+ * // With custom logo component
+ * <BrandingProvider logo={<MyCustomLogo />} appName="My App">
+ *   <App />
+ * </BrandingProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With separate full and icon logos
+ * <BrandingProvider
+ *   logo={<FullLogo />}
+ *   logoIcon={<IconOnlyLogo />}
+ *   appName="My App"
+ * >
+ *   <App />
+ * </BrandingProvider>
+ * ```
+ */
+export declare function BrandingProvider({ children, logo, logoIcon, appName, logoLink, }: BrandingProviderProps): React.ReactElement;
+/**
+ * Hook to access the branding configuration.
+ */
+export declare function useBranding(): BrandingConfig;
+/**
+ * Hook to get the appropriate logo based on context.
+ * @param preferIcon - If true, returns iconLogo when available
+ */
+export declare function useLogo(preferIcon?: boolean): ReactNode;

package/dist/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './layout.context';
+export * from './branding.context';

package/dist/contexts/layout.context.d.ts

@@ -0,0 +1,60 @@
+import React, { ReactNode } from 'react';
+import { Layout } from '../models';
+/**
+ * Service interface for managing layout navigation elements.
+ * Translated from NGXS LayoutState actions.
+ */
+export interface LayoutService {
+    /**
+     * Add one or more navigation elements to the layout.
+     * Duplicate names are ignored.
+     * @param elements - Single element or array of elements to add
+     */
+    addNavigationElement: (elements: Layout.NavigationElement | Layout.NavigationElement[]) => void;
+    /**
+     * Remove a navigation element by name.
+     * @param name - Name of the element to remove
+     */
+    removeNavigationElement: (name: string) => void;
+    /**
+     * Clear all navigation elements.
+     */
+    clearNavigationElements: () => void;
+}
+/**
+ * Context value containing both the state and service.
+ */
+export interface LayoutContextValue {
+    /** Current layout state */
+    state: Layout.State;
+    /** Service for modifying layout state */
+    service: LayoutService;
+}
+export interface LayoutProviderProps {
+    children: ReactNode;
+}
+/**
+ * Provider component for layout state management.
+ * Replaces NGXS LayoutState from Angular.
+ *
+ * @example
+ * ```tsx
+ * <LayoutProvider>
+ *   <App />
+ * </LayoutProvider>
+ * ```
+ */
+export declare function LayoutProvider({ children }: LayoutProviderProps): React.ReactElement;
+/**
+ * Hook to access the full layout context (state and service).
+ * @throws Error if used outside of LayoutProvider
+ */
+export declare function useLayoutContext(): LayoutContextValue;
+/**
+ * Hook to access just the layout service for modifying state.
+ */
+export declare function useLayoutService(): LayoutService;
+/**
+ * Hook to access the current navigation elements.
+ */
+export declare function useNavigationElements(): Layout.NavigationElement[];

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useLayoutContext, useLayoutService, useNavigationElements, } from '../contexts/layout.context';

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @abpjs/theme-basic
+ *
+ * ABP Framework Theme Basic components for React.
+ * Translated from @abp/ng.theme.basic v0.7.6
+ *
+ * This package provides the basic theme layout components for ABP React applications.
+ */
+export * from './models';
+export { LayoutProvider, useLayoutContext, useLayoutService, useNavigationElements, BrandingProvider, useBranding, useLogo, } from './contexts';
+export type { LayoutService, LayoutContextValue, LayoutProviderProps, BrandingConfig, BrandingContextValue, BrandingProviderProps, } from './contexts';
+export * from './hooks';
+export * from './components';
+export * from './providers';
+import { LayoutApplication } from './components/layout-application';
+/**
+ * Array of layout components for use with ABP's dynamic layout system.
+ * Matches the Angular LAYOUTS constant.
+ */
+export declare const LAYOUTS: (typeof LayoutApplication)[];