@abpjs/theme-shared 0.7.6

package/dist/models/confirmation.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Confirmation namespace containing types for confirmation dialogs.
+ * Translated from @abp/ng.theme.shared/lib/models/confirmation.ts
+ */
+import { Toaster } from './toaster';
+export declare namespace Confirmation {
+    /**
+     * Options for configuring a confirmation dialog.
+     * Extends Toaster.Options with confirmation-specific properties.
+     */
+    interface Options extends Toaster.Options {
+        /** Hide the cancel button */
+        hideCancelBtn?: boolean;
+        /** Hide the yes/confirm button */
+        hideYesBtn?: boolean;
+        /** Custom text for the cancel button (localization key) */
+        cancelCopy?: string;
+        /** Custom text for the yes button (localization key) */
+        yesCopy?: string;
+    }
+}

package/dist/models/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toaster';
+export * from './confirmation';

package/dist/models/toaster.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Toaster namespace containing types and interfaces for toast notifications.
+ * Translated from @abp/ng.theme.shared/lib/models/toaster.ts
+ */
+export declare namespace Toaster {
+    /**
+     * Options for configuring a toast notification.
+     */
+    interface Options {
+        /** Unique identifier for the toast */
+        id?: string;
+        /** Whether the toast can be manually closed */
+        closable?: boolean;
+        /** Duration in milliseconds before auto-dismiss (default varies by implementation) */
+        life?: number;
+        /** If true, toast won't auto-dismiss */
+        sticky?: boolean;
+        /** Custom data to attach to the toast */
+        data?: unknown;
+        /** Parameters for localizing the message */
+        messageLocalizationParams?: string[];
+        /** Parameters for localizing the title */
+        titleLocalizationParams?: string[];
+    }
+    /**
+     * Severity levels for toast notifications.
+     */
+    type Severity = 'success' | 'info' | 'warn' | 'error';
+    /**
+     * Status values for toast/confirmation interactions.
+     */
+    enum Status {
+        confirm = "confirm",
+        reject = "reject",
+        dismiss = "dismiss"
+    }
+    /**
+     * Complete message structure for a toast notification.
+     */
+    interface Message extends Options {
+        /** The message content (can be a localization key) */
+        message: string;
+        /** The title (can be a localization key) */
+        title?: string;
+        /** Severity level of the message */
+        severity: Severity;
+    }
+}

package/dist/providers/ThemeSharedProvider.d.ts

@@ -0,0 +1,135 @@
+import React, { type ReactNode } from 'react';
+import { type ThemeOverride } from '../theme';
+export interface ThemeSharedProviderProps {
+    children: ReactNode;
+    /**
+     * Whether to automatically render the ToastContainer.
+     * Set to false if you want to render it manually in a specific location.
+     * @default true
+     */
+    renderToasts?: boolean;
+    /**
+     * Whether to automatically render the ConfirmationDialog.
+     * Set to false if you want to render it manually in a specific location.
+     * @default true
+     */
+    renderConfirmation?: boolean;
+    /**
+     * Custom theme overrides to merge with the default ABP theme.
+     * Use this to customize colors, fonts, component styles, etc.
+     *
+     * In Chakra v3, use defineConfig() to create overrides:
+     *
+     * @example
+     * ```tsx
+     * import { defineConfig } from '@abpjs/theme-shared';
+     *
+     * const customConfig = defineConfig({
+     *   theme: {
+     *     tokens: {
+     *       colors: {
+     *         brand: {
+     *           500: { value: '#ff0000' },
+     *         },
+     *       },
+     *     },
+     *   },
+     * });
+     *
+     * <ThemeSharedProvider themeOverrides={customConfig}>
+     *   <App />
+     * </ThemeSharedProvider>
+     * ```
+     */
+    themeOverrides?: ThemeOverride;
+    /**
+     * Position of toast notifications.
+     * @default 'bottom-right'
+     */
+    toastPosition?: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
+    /**
+     * Whether to enable color mode (light/dark theme switching).
+     * When enabled, the ColorModeProvider from next-themes is included.
+     * @default false
+     */
+    enableColorMode?: boolean;
+    /**
+     * Default color mode when enableColorMode is true.
+     * @default 'light'
+     */
+    defaultColorMode?: 'light' | 'dark' | 'system';
+    /**
+     * Locale for RTL support and accessibility.
+     * This is passed to Chakra's LocaleProvider for proper direction handling
+     * in Portal-based components (menus, modals, popovers, etc.).
+     *
+     * Examples: 'en-US', 'ar-SA', 'he-IL', 'fa-IR'
+     * @default 'en-US'
+     */
+    locale?: string;
+}
+/**
+ * ThemeSharedProvider - Root provider for theme.shared functionality.
+ *
+ * This is the React equivalent of Angular's ThemeSharedModule.forRoot().
+ * Wrap your app with this provider to enable toast notifications,
+ * confirmation dialogs, and other theme.shared features.
+ *
+ * This provider should be nested inside AbpProvider from @abpjs/core.
+ *
+ * ## Theme Customization (Chakra v3)
+ *
+ * You can customize the Chakra UI theme by passing `themeOverrides`:
+ *
+ * ```tsx
+ * import { defineConfig } from '@abpjs/theme-shared';
+ *
+ * const customConfig = defineConfig({
+ *   theme: {
+ *     tokens: {
+ *       colors: {
+ *         brand: {
+ *           500: { value: '#your-brand-color' },
+ *         },
+ *       },
+ *       fonts: {
+ *         heading: { value: 'Your Font, sans-serif' },
+ *         body: { value: 'Your Font, sans-serif' },
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * <ThemeSharedProvider themeOverrides={customConfig}>
+ *   <App />
+ * </ThemeSharedProvider>
+ * ```
+ *
+ * ## Color Mode (Optional, v3 feature)
+ *
+ * Enable dark mode support by setting `enableColorMode`:
+ *
+ * ```tsx
+ * <ThemeSharedProvider enableColorMode defaultColorMode="system">
+ *   <App />
+ * </ThemeSharedProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { AbpProvider } from '@abpjs/core';
+ * import { ThemeSharedProvider } from '@abpjs/theme-shared';
+ *
+ * function App() {
+ *   return (
+ *     <AbpProvider environment={env} requirements={req} routes={routes}>
+ *       <ThemeSharedProvider>
+ *         <YourApp />
+ *       </ThemeSharedProvider>
+ *     </AbpProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function ThemeSharedProvider({ children, renderToasts, renderConfirmation, themeOverrides, toastPosition, enableColorMode, defaultColorMode, locale, }: ThemeSharedProviderProps): React.ReactElement;
+export default ThemeSharedProvider;

package/dist/providers/index.d.ts

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

package/dist/theme/index.d.ts

@@ -0,0 +1,42 @@
+import { defineConfig } from '@chakra-ui/react';
+/**
+ * Default ABP theme configuration for Chakra v3.
+ */
+export declare const defaultAbpConfig: import("@chakra-ui/react").SystemConfig;
+/**
+ * Creates the ABP Chakra v3 system.
+ *
+ * @param overrides - Optional config overrides to merge with the default config
+ * @returns Chakra v3 system
+ *
+ * @example
+ * ```tsx
+ * // Use default system
+ * const system = createAbpSystem();
+ *
+ * // Override specific values
+ * const customSystem = createAbpSystem(defineConfig({
+ *   theme: {
+ *     tokens: {
+ *       colors: {
+ *         brand: {
+ *           500: { value: '#ff0000' }, // Custom brand color
+ *         },
+ *       },
+ *     },
+ *   },
+ * }));
+ * ```
+ */
+export declare function createAbpSystem(overrides?: ReturnType<typeof defineConfig>): import("@chakra-ui/react").SystemContext;
+/**
+ * Pre-built ABP system instance.
+ * Use this directly or use createAbpSystem() for customization.
+ */
+export declare const abpSystem: import("@chakra-ui/react").SystemContext;
+/**
+ * Theme override type for consumers.
+ * Use this type when passing custom configurations.
+ */
+export type ThemeOverride = ReturnType<typeof defineConfig>;
+export { defineConfig };

package/dist/utils/index.d.ts

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

package/dist/utils/styles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Global CSS styles for theme.shared components.
+ * Translated from @abp/ng.theme.shared/lib/contants/styles.ts
+ *
+ * These are additional ABP-specific styles that complement Chakra UI.
+ * Most styling is handled by Chakra UI's style system.
+ */
+export declare const THEME_SHARED_STYLES = "\n/* Form validation styling */\n.is-invalid {\n  border-color: var(--chakra-colors-red-500) !important;\n}\n\n.invalid-feedback {\n  display: block;\n  width: 100%;\n  margin-top: var(--chakra-space-1);\n  font-size: var(--chakra-fontSizes-sm);\n  color: var(--chakra-colors-red-500);\n}\n\n/* Pointer cursor utility */\n.pointer {\n  cursor: pointer;\n}\n\n/* Fade animations */\n@keyframes fadeInTop {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fadeOutTop {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n}\n\n.fade-in-top {\n  animation: fadeInTop 0.3s ease-out forwards;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.3s ease-out forwards;\n}\n";
+/**
+ * Injects the ABP theme shared styles into the document head.
+ * This is optional since Chakra UI provides most styling.
+ * Only use this if you need ABP-specific utility classes.
+ */
+export declare function injectThemeSharedStyles(): (() => void) | undefined;

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@abpjs/theme-shared",
+  "version": "0.7.6",
+  "description": "ABP Framework Theme Shared components for React - translated from @abp/ng.theme.shared",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^3.2.0",
+    "@emotion/react": "^11.11.0",
+    "lucide-react": "^0.400.0",
+    "next-themes": "^0.4.6",
+    "react-icons": "^5.5.0",
+    "@abpjs/core": "0.7.6"
+  },
+  "devDependencies": {
+    "@abp/ng.theme.shared": "0.7.6"
+  },
+  "author": "tekthar.com",
+  "license": "LGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/abpjs/abp-react"
+  },
+  "homepage": "https://docs.abpjs.io/docs/packages/theme-shared/overview",
+  "bugs": {
+    "url": "https://github.com/abpjs/abp-react/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --clean && tsc -p tsconfig.build.json",
+    "dev": "tsup src/index.ts --format cjs,esm --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,json,md}\"",
+    "type-check": "tsc --noEmit",
+    "test": "vitest"
+  }
+}