@abpjs/theme-shared 0.7.6

package/dist/components/modal/Modal.d.ts

@@ -0,0 +1,114 @@
+import React, { type ReactNode } from 'react';
+import { Dialog } from '@chakra-ui/react';
+/**
+ * Modal size options.
+ */
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export interface ModalProps {
+    /** Whether the modal is visible */
+    visible: boolean;
+    /** Callback when visibility changes */
+    onVisibleChange?: (visible: boolean) => void;
+    /** Modal size */
+    size?: ModalSize;
+    /** Center the modal vertically */
+    centered?: boolean;
+    /** Custom CSS class for the modal container */
+    modalClass?: string;
+    /** Header content */
+    header?: ReactNode;
+    /** Body content (children) */
+    children?: ReactNode;
+    /** Footer content */
+    footer?: ReactNode;
+    /** Custom close button content */
+    closeButton?: ReactNode;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Whether clicking the overlay closes the modal */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape closes the modal */
+    closeOnEscape?: boolean;
+    /** Whether to scroll the modal body if content overflows */
+    scrollBehavior?: 'inside' | 'outside';
+    /**
+     * Motion preset for modal animation.
+     * @default 'scale'
+     */
+    motionPreset?: 'scale' | 'slide-in-bottom' | 'slide-in-right' | 'none';
+    /**
+     * Whether to trap focus within the modal.
+     * @default true
+     */
+    trapFocus?: boolean;
+    /**
+     * Whether to prevent scrolling on the body when modal is open.
+     * @default true
+     */
+    preventScroll?: boolean;
+}
+/**
+ * Modal component - Generic modal/dialog container.
+ *
+ * This is the React equivalent of Angular's ModalComponent.
+ * It uses Chakra UI Dialog (v3) for accessibility and styling,
+ * while maintaining the ABP-compatible API.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const [visible, setVisible] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setVisible(true)}>Open Modal</button>
+ *       <Modal
+ *         visible={visible}
+ *         onVisibleChange={setVisible}
+ *         size="md"
+ *         header="Modal Title"
+ *         footer={
+ *           <button onClick={() => setVisible(false)}>Close</button>
+ *         }
+ *       >
+ *         <p>Modal content goes here</p>
+ *       </Modal>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function Modal({ visible, onVisibleChange, size, centered, modalClass, header, children, footer, showCloseButton, closeOnOverlayClick, closeOnEscape, scrollBehavior, motionPreset, trapFocus, preventScroll, }: ModalProps): React.ReactElement;
+/**
+ * Re-export Chakra v3 dialog parts for convenience.
+ * Users can use these for more custom modal layouts.
+ */
+export { Dialog as ChakraDialog, };
+/**
+ * ModalHeader - Convenience component for modal headers.
+ */
+export interface ModalHeaderProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function AbpModalHeader({ children, className }: ModalHeaderProps): React.ReactElement;
+/**
+ * ModalBody - Convenience component for modal body content.
+ */
+export interface ModalBodyProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function AbpModalBody({ children, className }: ModalBodyProps): React.ReactElement;
+/**
+ * ModalFooter - Convenience component for modal footers.
+ */
+export interface ModalFooterProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function AbpModalFooter({ children, className }: ModalFooterProps): React.ReactElement;
+export { AbpModalHeader as ModalHeader };
+export { AbpModalBody as ModalBody };
+export { AbpModalFooter as ModalFooter };
+export default Modal;

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

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

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Toaster } from '../../models';
+/**
+ * Get Chakra color palette for severity.
+ */
+declare function getSeverityColorPalette(severity: Toaster.Severity): string;
+/**
+ * Get background color for severity.
+ */
+declare function getSeverityBg(severity: Toaster.Severity): string;
+/**
+ * Get border color for severity.
+ */
+declare function getSeverityBorderColor(severity: Toaster.Severity): string;
+export interface ToastContainerProps {
+    /** Position of toasts */
+    position?: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
+}
+/**
+ * ToastContainer - Syncs toaster state with Chakra v3's toast system.
+ *
+ * This is the React equivalent of Angular's ToastComponent.
+ * Place this component once in your app to display toasts.
+ *
+ * The toast position uses logical values (start/end) which automatically
+ * handle RTL languages - toasts will appear on the correct side based on
+ * the current text direction.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <ThemeSharedProvider>
+ *       <MainContent />
+ *       <ToastContainer />
+ *     </ThemeSharedProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function ToastContainer({ position }: ToastContainerProps): React.ReactElement;
+export { getSeverityColorPalette as getSeverityColorScheme, getSeverityBg, getSeverityBorderColor };
+export default ToastContainer;

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

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

package/dist/components/ui/Alert.d.ts

@@ -0,0 +1,50 @@
+import React, { type ReactNode } from 'react';
+/**
+ * Alert status types
+ */
+export type AlertStatus = 'info' | 'warning' | 'success' | 'error';
+/**
+ * Alert component props
+ */
+export interface AlertProps {
+    /** The status/type of alert */
+    status?: AlertStatus;
+    /** Alert content */
+    children: ReactNode;
+    /** Optional title (displayed prominently) */
+    title?: ReactNode;
+    /** Optional description (displayed below title) */
+    description?: ReactNode;
+    /** Whether to show the status indicator icon */
+    showIcon?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Margin bottom */
+    mb?: number | string;
+    /** Border radius */
+    borderRadius?: string;
+}
+/**
+ * Alert - Wrapper component for displaying alerts/notifications.
+ *
+ * This component wraps Chakra UI's Alert and provides a simplified API
+ * that shields consumers from Chakra's compound component pattern.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <Alert status="error">Something went wrong!</Alert>
+ *
+ * // With title
+ * <Alert status="success" title="Success!">
+ *   Your changes have been saved.
+ * </Alert>
+ *
+ * // Without icon
+ * <Alert status="info" showIcon={false}>
+ *   Information message
+ * </Alert>
+ * ```
+ */
+export declare function Alert({ status, children, title, description, showIcon, className, mb, borderRadius, }: AlertProps): React.ReactElement;
+export default Alert;

package/dist/components/ui/Button.d.ts

@@ -0,0 +1,70 @@
+import React, { type ReactNode } from 'react';
+/**
+ * Button color palette options
+ */
+export type ButtonColorPalette = 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
+/**
+ * Button variant options
+ */
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'plain';
+/**
+ * Button size options
+ */
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Button component props
+ */
+export interface ButtonProps {
+    /** Button content */
+    children: ReactNode;
+    /** Button type */
+    type?: 'button' | 'submit' | 'reset';
+    /** Button variant */
+    variant?: ButtonVariant;
+    /** Color palette (replaces colorScheme from v2) */
+    colorPalette?: ButtonColorPalette;
+    /** Button size */
+    size?: ButtonSize;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether the button is in loading state */
+    loading?: boolean;
+    /** Text to display when loading */
+    loadingText?: string;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Full width button */
+    width?: string | number;
+    /** Margin right */
+    mr?: number | string;
+    /** Margin left */
+    ml?: number | string;
+}
+/**
+ * Button - Wrapper component for buttons.
+ *
+ * This component wraps Chakra UI's Button and provides a simplified API
+ * that maintains v2-like props while using v3 internally.
+ *
+ * @example
+ * ```tsx
+ * // Primary button
+ * <Button colorPalette="blue" onClick={handleSubmit}>
+ *   Submit
+ * </Button>
+ *
+ * // Outline button
+ * <Button variant="outline" colorPalette="gray">
+ *   Cancel
+ * </Button>
+ *
+ * // Loading button
+ * <Button loading loadingText="Submitting...">
+ *   Submit
+ * </Button>
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/components/ui/Checkbox.d.ts

@@ -0,0 +1,64 @@
+import React, { type ReactNode } from 'react';
+/**
+ * Checkbox color palette options
+ */
+export type CheckboxColorPalette = 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink';
+/**
+ * Checkbox size options
+ */
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+/**
+ * Checkbox component props
+ */
+export interface CheckboxProps {
+    /** Checkbox label */
+    children?: ReactNode;
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Default checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Whether the checkbox is invalid */
+    invalid?: boolean;
+    /** Whether the checkbox is required */
+    required?: boolean;
+    /** Whether the checkbox is read-only */
+    readOnly?: boolean;
+    /** Color palette */
+    colorPalette?: CheckboxColorPalette;
+    /** Checkbox size */
+    size?: CheckboxSize;
+    /** HTML id */
+    id?: string;
+    /** HTML name */
+    name?: string;
+    /** Value for form submission */
+    value?: string;
+    /** Change handler */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Checkbox - Wrapper component for checkboxes.
+ *
+ * This component wraps Chakra UI's Checkbox and provides a simplified API
+ * that shields consumers from Chakra's compound component pattern.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Checkbox onChange={handleChange}>Remember me</Checkbox>
+ *
+ * // Controlled
+ * <Checkbox checked={isChecked} onChange={(e) => setIsChecked(e.target.checked)}>
+ *   Accept terms
+ * </Checkbox>
+ *
+ * // With react-hook-form
+ * <Checkbox {...register('remember')}>Remember me</Checkbox>
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/components/ui/FormField.d.ts

@@ -0,0 +1,50 @@
+import React, { type ReactNode } from 'react';
+/**
+ * FormField component props
+ */
+export interface FormFieldProps {
+    /** Field label */
+    label?: ReactNode;
+    /** Whether the field is invalid */
+    invalid?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Error message to display when invalid */
+    errorText?: ReactNode;
+    /** Helper text displayed below the input */
+    helperText?: ReactNode;
+    /** The form input element(s) */
+    children: ReactNode;
+    /** HTML id for the label's htmlFor attribute */
+    htmlFor?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * FormField - Wrapper component for form fields with label, error, and helper text.
+ *
+ * This component wraps Chakra UI's Field and provides a simplified API
+ * that shields consumers from Chakra's compound component pattern.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FormField label="Username" invalid={!!errors.username} errorText={errors.username?.message}>
+ *   <Input {...register('username')} />
+ * </FormField>
+ *
+ * // With required indicator
+ * <FormField label="Email" required>
+ *   <Input type="email" />
+ * </FormField>
+ *
+ * // With helper text
+ * <FormField label="Password" helperText="Must be at least 8 characters">
+ *   <Input type="password" />
+ * </FormField>
+ * ```
+ */
+export declare function FormField({ label, invalid, required, disabled, errorText, helperText, children, htmlFor, className, }: FormFieldProps): React.ReactElement;
+export default FormField;

package/dist/components/ui/color-mode.d.ts

@@ -0,0 +1,19 @@
+import type { IconButtonProps, SpanProps } from "@chakra-ui/react";
+import type { ThemeProviderProps } from "next-themes";
+import * as React from "react";
+export type ColorModeProviderProps = ThemeProviderProps;
+export declare function ColorModeProvider(props: ColorModeProviderProps): import("react/jsx-runtime").JSX.Element;
+export type ColorMode = "light" | "dark";
+export interface UseColorModeReturn {
+    colorMode: ColorMode;
+    setColorMode: (colorMode: ColorMode) => void;
+    toggleColorMode: () => void;
+}
+export declare function useColorMode(): UseColorModeReturn;
+export declare function useColorModeValue<T>(light: T, dark: T): T;
+export declare function ColorModeIcon(): import("react/jsx-runtime").JSX.Element;
+type ColorModeButtonProps = Omit<IconButtonProps, "aria-label">;
+export declare const ColorModeButton: React.ForwardRefExoticComponent<ColorModeButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const LightMode: React.ForwardRefExoticComponent<SpanProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const DarkMode: React.ForwardRefExoticComponent<SpanProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

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

@@ -0,0 +1,16 @@
+/**
+ * UI Component Wrappers
+ *
+ * These components wrap Chakra UI v3 components and provide a simplified,
+ * stable API that shields consumers from Chakra's compound component patterns.
+ *
+ * Benefits:
+ * - Library independence: Only theme-shared needs to know about Chakra internals
+ * - Simpler API: No need for .Root, .Content, .Trigger patterns
+ * - Easier upgrades: Changes to Chakra v4+ only affect these wrappers
+ * - Consistent styling: ABP-specific defaults and styling applied here
+ */
+export * from './Alert';
+export * from './Button';
+export * from './Checkbox';
+export * from './FormField';

package/dist/components/ui/provider.d.ts

@@ -0,0 +1,2 @@
+import { type ColorModeProviderProps } from "./color-mode";
+export declare function Provider(props: ColorModeProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/toaster.d.ts

@@ -0,0 +1,3 @@
+import { createToaster } from "@chakra-ui/react";
+export declare const toaster: ReturnType<typeof createToaster>;
+export declare const Toaster: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/tooltip.d.ts

@@ -0,0 +1,11 @@
+import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
+import * as React from "react";
+export interface TooltipProps extends ChakraTooltip.RootProps {
+    showArrow?: boolean;
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement | null>;
+    content: React.ReactNode;
+    contentProps?: ChakraTooltip.ContentProps;
+    disabled?: boolean;
+}
+export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,100 @@
+import React, { type ReactNode } from 'react';
+import { Confirmation, Toaster } from '../models';
+/**
+ * Internal confirmation message structure.
+ */
+export interface ConfirmationMessage {
+    /** Unique ID for this confirmation */
+    id: string;
+    /** Message content (can be localization key) */
+    message: string;
+    /** Title (can be localization key) */
+    title?: string;
+    /** Severity level affects the styling */
+    severity: Toaster.Severity;
+    /** Options for the confirmation */
+    options: Confirmation.Options;
+}
+/**
+ * ConfirmationService interface - matches the Angular service API.
+ */
+export interface ConfirmationService {
+    /** Show an info confirmation */
+    info(message: string, title?: string, options?: Confirmation.Options): Promise<Toaster.Status>;
+    /** Show a success confirmation */
+    success(message: string, title?: string, options?: Confirmation.Options): Promise<Toaster.Status>;
+    /** Show a warning confirmation */
+    warn(message: string, title?: string, options?: Confirmation.Options): Promise<Toaster.Status>;
+    /** Show an error confirmation */
+    error(message: string, title?: string, options?: Confirmation.Options): Promise<Toaster.Status>;
+    /** Clear the current confirmation */
+    clear(status?: Toaster.Status): void;
+}
+/**
+ * Context value containing the service and current confirmation.
+ */
+export interface ConfirmationContextValue {
+    service: ConfirmationService;
+    confirmation: ConfirmationMessage | null;
+    /** Respond to the current confirmation */
+    respond: (status: Toaster.Status) => void;
+}
+export interface ConfirmationProviderProps {
+    children: ReactNode;
+}
+/**
+ * ConfirmationProvider - Provides confirmation dialog functionality.
+ *
+ * This is the React equivalent of Angular's ConfirmationService.
+ * Wrap your app with this provider to enable confirmation dialogs.
+ *
+ * @example
+ * ```tsx
+ * <ConfirmationProvider>
+ *   <App />
+ *   <ConfirmationDialog />
+ * </ConfirmationProvider>
+ * ```
+ */
+export declare function ConfirmationProvider({ children }: ConfirmationProviderProps): React.ReactElement;
+/**
+ * Hook to access the confirmation service.
+ *
+ * @returns ConfirmationService with methods to show confirmation dialogs
+ * @throws Error if used outside of ConfirmationProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const confirmation = useConfirmation();
+ *
+ *   const handleDelete = async () => {
+ *     const status = await confirmation.warn(
+ *       'Are you sure you want to delete this item?',
+ *       'Confirm Delete',
+ *       { yesCopy: 'Delete', cancelCopy: 'Cancel' }
+ *     );
+ *
+ *     if (status === Toaster.Status.confirm) {
+ *       await deleteItem();
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleDelete}>Delete</button>;
+ * }
+ * ```
+ */
+export declare function useConfirmation(): ConfirmationService;
+/**
+ * Hook to access the current confirmation state.
+ * This is typically used by the ConfirmationDialog component.
+ *
+ * @returns Current confirmation message and respond function
+ */
+export declare function useConfirmationState(): Pick<ConfirmationContextValue, 'confirmation' | 'respond'>;
+/**
+ * Hook to access the full confirmation context.
+ *
+ * @returns ConfirmationContextValue with service, confirmation, and respond
+ */
+export declare function useConfirmationContext(): ConfirmationContextValue;

package/dist/contexts/index.d.ts

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

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

@@ -0,0 +1,91 @@
+import React, { type ReactNode } from 'react';
+import { Toaster } from '../models';
+/**
+ * Internal toast message with unique ID for tracking.
+ */
+interface InternalToast extends Toaster.Message {
+    id: string;
+}
+/**
+ * ToasterService interface - matches the Angular service API.
+ */
+export interface ToasterService {
+    /** Show an info toast */
+    info(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
+    /** Show a success toast */
+    success(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
+    /** Show a warning toast */
+    warn(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
+    /** Show an error toast */
+    error(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
+    /** Add multiple messages at once */
+    addAll(messages: Toaster.Message[]): void;
+    /** Clear all toasts or a specific one by status */
+    clear(status?: Toaster.Status): void;
+    /** Remove a specific toast by ID */
+    remove(id: string): void;
+}
+/**
+ * Context value containing the service and current toasts.
+ */
+export interface ToasterContextValue {
+    service: ToasterService;
+    toasts: InternalToast[];
+}
+export interface ToasterProviderProps {
+    children: ReactNode;
+}
+/**
+ * ToasterProvider - Provides toast notification functionality.
+ *
+ * This is the React equivalent of Angular's ToasterService.
+ * Wrap your app with this provider to enable toast notifications.
+ *
+ * @example
+ * ```tsx
+ * <ToasterProvider>
+ *   <App />
+ *   <ToastContainer />
+ * </ToasterProvider>
+ * ```
+ */
+export declare function ToasterProvider({ children }: ToasterProviderProps): React.ReactElement;
+/**
+ * Hook to access the toaster service.
+ *
+ * @returns ToasterService with methods to show toast notifications
+ * @throws Error if used outside of ToasterProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const toaster = useToaster();
+ *
+ *   const handleSave = async () => {
+ *     try {
+ *       await saveData();
+ *       toaster.success('Data saved successfully!', 'Success');
+ *     } catch (error) {
+ *       toaster.error('Failed to save data', 'Error');
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleSave}>Save</button>;
+ * }
+ * ```
+ */
+export declare function useToaster(): ToasterService;
+/**
+ * Hook to access the current toasts (for rendering).
+ * This is typically used by the ToastContainer component.
+ *
+ * @returns Array of current toast messages
+ */
+export declare function useToasts(): InternalToast[];
+/**
+ * Hook to access both the service and toasts.
+ *
+ * @returns ToasterContextValue with service and toasts
+ */
+export declare function useToasterContext(): ToasterContextValue;
+export {};