@abpjs/theme-shared 0.7.6 → 0.8.0

package/dist/components/errors/ErrorComponent.d.ts

@@ -0,0 +1,35 @@
+export interface ErrorComponentProps {
+    /** Error title (e.g., "404", "500", "Error") */
+    title?: string;
+    /** Error details/message */
+    details?: string;
+    /** Callback when user wants to dismiss/destroy the error display */
+    onDestroy?: () => void;
+    /** Whether to show a close/back button */
+    showCloseButton?: boolean;
+    /** Custom close button text */
+    closeButtonText?: string;
+}
+/**
+ * A component for displaying error pages/messages.
+ * Can be used for HTTP errors (404, 500, etc.) or general error states.
+ *
+ * @example
+ * ```tsx
+ * // Basic error display
+ * <ErrorComponent
+ *   title="404"
+ *   details="The page you are looking for was not found."
+ * />
+ *
+ * // With close button
+ * <ErrorComponent
+ *   title="Error"
+ *   details="Something went wrong."
+ *   showCloseButton
+ *   onDestroy={() => navigate('/')}
+ * />
+ * ```
+ */
+export declare function ErrorComponent({ title, details, onDestroy, showCloseButton, closeButtonText, }: ErrorComponentProps): import("react/jsx-runtime").JSX.Element;
+export default ErrorComponent;

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

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

package/dist/components/index.d.ts

@@ -1,4 +1,6 @@
 export * from './toast';
 export * from './confirmation';
+export * from './errors';
+export * from './loader-bar';
 export * from './modal';
 export * from './ui';

package/dist/components/loader-bar/LoaderBar.d.ts

@@ -0,0 +1,34 @@
+export interface LoaderBarProps {
+    /** CSS class for the container element */
+    containerClass?: string;
+    /** CSS class for the progress bar element */
+    progressClass?: string;
+    /** Custom filter function to determine if loading should be shown */
+    filter?: (request: {
+        url?: string;
+        method?: string;
+    }) => boolean;
+}
+/**
+ * A loading progress bar component that automatically shows/hides
+ * based on HTTP request activity tracked by the loader state.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - place in your layout
+ * <LoaderBar />
+ *
+ * // With custom classes
+ * <LoaderBar
+ *   containerClass="my-loader-container"
+ *   progressClass="my-progress-bar"
+ * />
+ *
+ * // With filter to only show for specific requests
+ * <LoaderBar
+ *   filter={(req) => !req.url?.includes('/api/silent')}
+ * />
+ * ```
+ */
+export declare function LoaderBar({ containerClass, progressClass, filter, }: LoaderBarProps): import("react/jsx-runtime").JSX.Element | null;
+export default LoaderBar;

package/dist/components/loader-bar/index.d.ts

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

package/dist/constants/index.d.ts

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

package/dist/constants/styles.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Default global styles for ABP theme shared components.
+ * These styles can be injected into your app's global CSS or used with a style tag.
+ *
+ * @example
+ * ```tsx
+ * // Option 1: Use with a style tag in your app
+ * import { DEFAULT_STYLES } from '@abpjs/theme-shared';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <style>{DEFAULT_STYLES}</style>
+ *       <YourApp />
+ *     </>
+ *   );
+ * }
+ *
+ * // Option 2: Add to your global CSS file
+ * // Copy the content of DEFAULT_STYLES to your styles.css
+ * ```
+ */
+export declare const DEFAULT_STYLES = "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n.modal {\n  background-color: rgba(0, 0, 0, .6);\n}\n\n.abp-ellipsis {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.4s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.4s ease-in-out;\n}\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(5px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n/* Loader bar styles */\n.abp-loader-bar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  z-index: 9999;\n  background-color: rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.abp-progress {\n  height: 100%;\n  background-color: #3182ce;\n  transition: width 0.3s ease-out;\n}\n";
+export default DEFAULT_STYLES;

package/dist/handlers/error.handler.d.ts

@@ -1,4 +1,5 @@
 import { Toaster } from '../models';
+import { ErrorComponentProps } from '../components/errors/ErrorComponent';
 type NavigateFunction = (to: string) => void;
 /**
  * HTTP error response structure (matching ABP error format).
@@ -18,6 +19,13 @@ export interface HttpErrorResponse {
         };
     };
 }
+/**
+ * Error component instance configuration.
+ */
+export interface ErrorComponentInstance {
+    title: string;
+    details: string;
+}
 /**
  * Error handler interface.
  */
@@ -28,6 +36,12 @@ export interface ErrorHandler {
     showError: (message: string, title?: string) => Promise<Toaster.Status>;
     /** Navigate to the login page */
     navigateToLogin: () => void;
+    /** Create error component props for full-page error display */
+    createErrorComponent: (instance: Partial<ErrorComponentInstance>) => ErrorComponentProps;
+    /** Current error component props (null if no error) */
+    errorComponentProps: ErrorComponentProps | null;
+    /** Clear the current error component */
+    clearErrorComponent: () => void;
 }
 export interface UseErrorHandlerOptions {
     /**

package/dist/index.d.ts

@@ -2,12 +2,13 @@
  * @abpjs/theme-shared
  *
  * ABP Framework Theme Shared components for React.
- * Translated from @abp/ng.theme.shared v0.7.6
+ * Translated from @abp/ng.theme.shared v0.8.0
  *
  * This package provides shared UI components, services, and utilities
  * for theme/modal management in ABP Framework React applications.
  */
 export * from './models';
+export * from './constants';
 export * from './contexts';
 export * from './hooks';
 export * from './components';