@abpjs/theme-basic 0.7.6

package/dist/models/index.d.ts

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

package/dist/models/layout.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+/**
+ * Layout namespace containing types and interfaces for the theme-basic layout system.
+ * Translated from @abp/ng.theme.basic Layout namespace.
+ */
+export declare namespace Layout {
+    /**
+     * State interface for the layout store.
+     * Contains navigation elements that can be added to the layout.
+     */
+    interface State {
+        navigationElements: NavigationElement[];
+    }
+    /**
+     * Navigation element that can be added to the layout's right part.
+     * In Angular, this used TemplateRef; in React, we use ReactNode.
+     */
+    interface NavigationElement {
+        /** Unique name identifier for the navigation element */
+        name: string;
+        /** React component/element to render */
+        element: ReactNode;
+        /** Order for sorting (lower values appear first, defaults to 99) */
+        order?: number;
+    }
+}

package/dist/providers/ThemeBasicProvider.d.ts

@@ -0,0 +1,92 @@
+import React, { ReactNode } from 'react';
+import { defineConfig, ThemeOverride } from '@abpjs/theme-shared';
+/**
+ * Props for ThemeBasicProvider
+ */
+export interface ThemeBasicProviderProps {
+    /** Child components to render */
+    children: ReactNode;
+    /** Whether to render toast notifications automatically */
+    renderToasts?: boolean;
+    /** Whether to render confirmation dialog automatically */
+    renderConfirmation?: boolean;
+    /** Custom theme overrides for Chakra UI (use defineConfig from @abpjs/theme-shared) */
+    themeOverrides?: ThemeOverride;
+    /** Position for toast notifications */
+    toastPosition?: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
+    /** Enable color mode support (light/dark theme switching) */
+    enableColorMode?: boolean;
+    /** Default color mode when enableColorMode is true */
+    defaultColorMode?: 'light' | 'dark' | 'system';
+    /** Custom logo component for the sidebar/navbar */
+    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;
+}
+/**
+ * Default theme configuration for theme-basic
+ * Uses Chakra v3's defineConfig format with proper light/dark mode support
+ */
+export declare const defaultThemeBasicConfig: import("@chakra-ui/react").SystemConfig;
+/**
+ * Root provider for theme-basic.
+ * Composes all necessary providers for the basic theme to work.
+ *
+ * This provider includes:
+ * - Chakra UI provider with theme (via ThemeSharedProvider)
+ * - ThemeShared provider (toasts, confirmations)
+ * - Layout provider (navigation elements state)
+ *
+ * @example
+ * ```tsx
+ * import { ThemeBasicProvider } from '@abpjs/theme-basic';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeBasicProvider>
+ *       <Router>
+ *         <Routes>
+ *           ...
+ *         </Routes>
+ *       </Router>
+ *     </ThemeBasicProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom theme overrides
+ * ```tsx
+ * import { ThemeBasicProvider, defineConfig } from '@abpjs/theme-basic';
+ *
+ * const customTheme = defineConfig({
+ *   theme: {
+ *     tokens: {
+ *       colors: {
+ *         brand: {
+ *           500: { value: '#ff6600' },
+ *         },
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * function App() {
+ *   return (
+ *     <ThemeBasicProvider themeOverrides={customTheme}>
+ *       <Router>
+ *         <Routes>
+ *           ...
+ *         </Routes>
+ *       </Router>
+ *     </ThemeBasicProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function ThemeBasicProvider({ children, renderToasts, renderConfirmation, themeOverrides, toastPosition, enableColorMode, defaultColorMode, logo, logoIcon, appName, logoLink, }: ThemeBasicProviderProps): React.ReactElement;
+export { defineConfig };
+export default ThemeBasicProvider;

package/dist/providers/index.d.ts

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

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@abpjs/theme-basic",
+  "version": "0.7.6",
+  "description": "ABP Framework Theme Basic components for React - translated from @abp/ng.theme.basic",
+  "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",
+    "react-router-dom": ">=6.0.0"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^3.2.0",
+    "@emotion/react": "^11.11.0",
+    "lucide-react": "^0.400.0",
+    "react-hook-form": "^7.48.0",
+    "react-icons": "^5.0.0",
+    "@abpjs/core": "0.7.6",
+    "@abpjs/theme-shared": "0.7.6"
+  },
+  "devDependencies": {
+    "@abp/ng.theme.basic": "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-basic/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"
+  }
+}