tcce-design-system 0.3.25 → 0.3.27

package/dist/tcce-design-system-components.d.ts

@@ -13,6 +13,7 @@ import { CSSProperties } from 'react';
 import { DetailedHTMLProps } from 'react';
 import { Dispatch } from 'react';
 import { FastOmit } from 'styled-components';
+import { FormikValues } from 'formik';
 import { ForwardRefComponent } from 'motion/react';
 import { ForwardRefExoticComponent } from 'react';
 import { Header as Header_2 } from '@tanstack/react-table';
@@ -72,6 +73,7 @@ export declare type AllowedInputType = (typeof ALLOWED_INPUT_TYPES)[number];
 
 /**
  * Sidebar container.
+ * On desktop it sits below the header; on mobile it covers the full height as a drawer.
  * @param $collapsed - Whether the sidebar is collapsed.
  * @param $open - Whether the sidebar is open (mobile).
  */
@@ -424,6 +426,28 @@ export declare interface ColumnMeta {
     pinned?: 'left' | 'right' | false;
 }
 
+/**
+ * ConfirmDeleteDialog displays a destructive action confirmation modal.
+ * It asks users to confirm deletion and supports a loading state while the action is in progress.
+ */
+export declare const ConfirmDeleteDialog: ({ isOpen, onClose, onConfirm, isLoading, itemLabel, }: ConfirmDeleteDialogProps) => JSX.Element;
+
+/**
+ * Props for the ConfirmDeleteDialog component.
+ * @param isOpen - Controls whether the dialog is visible.
+ * @param onClose - Callback invoked when the dialog is dismissed.
+ * @param onConfirm - Callback invoked when the delete action is confirmed.
+ * @param isLoading - Shows loading state and disables actions while confirmation is processing. Default is false.
+ * @param itemLabel - Label of the entity shown in the confirmation message. Default is 'this item'.
+ */
+export declare interface ConfirmDeleteDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    isLoading?: boolean;
+    itemLabel?: string;
+}
+
 /**
  * Creates URLSearchParams for backend pagination with sorting
  * Compatible with Laravel PaginateHelper
@@ -1142,7 +1166,7 @@ export declare const Layout: (props: LayoutProps) => JSX.Element;
  * Provides the main content area with responsive spacing and scrolling.
  */
 export declare const LayoutMainContent: {
-    ({ children, className }: LayoutMainContentProps): JSX.Element;
+    ({ children, className, id, inert, "aria-hidden": ariaHidden, }: LayoutMainContentProps): JSX.Element;
     displayName: string;
 };
 
@@ -1152,6 +1176,9 @@ export declare const LayoutMainContent: {
 export declare interface LayoutMainContentProps {
     children: ReactNode;
     className?: string;
+    id?: string;
+    inert?: boolean;
+    'aria-hidden'?: boolean;
 }
 
 /**
@@ -1257,6 +1284,7 @@ export declare function mergeFilters(...filterStates: ColumnFiltersState[]): Col
 
 /**
  * Button to open sidebar on mobile devices.
+ * Sits above the header so it is always tappable.
  * @param $hidden - Whether the button is hidden.
  */
 export declare const MobileOpenBtn: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
@@ -1568,7 +1596,7 @@ export declare type SetDigits = Dispatch<SetStateAction<string[]>>;
  * @param logoImgCollapsed - Logo when sidebar is collapsed.
  */
 export declare const Sidebar: {
-    ({ navigationConfig, activePath, logoImgExpanded, logoImgCollapsed, onNavigate, userPermissions, }: SidebarProps): JSX.Element;
+    ({ navigationConfig, activePath, logoImgExpanded, logoImgCollapsed, onNavigate, userPermissions, hideLogo, }: SidebarProps): JSX.Element;
     displayName: string;
 };
 
@@ -1591,9 +1619,11 @@ export declare interface SidebarContextValue {
 /**
  * Sidebar header container.
  * @param $collapsed - Whether the sidebar is collapsed.
+ * @param $hideLogo - Whether the logo is hidden (centers the toggle button).
  */
 export declare const SidebarHeader: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
 $collapsed: boolean;
+$hideLogo: boolean;
 }>> & string;
 
 /**
@@ -1605,6 +1635,7 @@ $collapsed: boolean;
  * @property logoImgExpanded - Optional React node for the logo when sidebar is expanded.
  * @property logoImgCollapsed - Optional React node for the logo when sidebar is collapsed.
  * @property onNavigate - Optional callback function for handling navigation events.
+ * @property hideLogo - When true, hides the logo inside the sidebar (useful when the logo lives in the Header instead).
  */
 export declare interface SidebarProps {
     navigationConfig: NavigationItem[];
@@ -1613,6 +1644,7 @@ export declare interface SidebarProps {
     logoImgExpanded?: ReactNode;
     logoImgCollapsed?: ReactNode;
     onNavigate?: (href: string) => void;
+    hideLogo?: boolean;
 }
 
 export declare const SidebarProvider: ({ children }: PropsWithChildren) => JSX.Element;
@@ -1869,6 +1901,58 @@ export declare interface StepperProps {
  */
 export declare type StepperSize = 'sm' | 'md' | 'lg';
 
+/**
+ * StoreDialog renders a reusable create/edit form inside a modal dialog.
+ * It uses Formik for form state management and maps configured form inputs to FormField components.
+ */
+export declare const StoreDialog: <T extends {
+    id?: number | string;
+}>({ isOpen, setOpen, handleCreate, handleEdit, item, initialValues, formInputs, option, title, buttonText, }: StoreDialogProps<T>) => JSX.Element;
+
+/**
+ * Label set used for create and edit mode text.
+ * @param create - Label displayed when the dialog is in create mode.
+ * @param edit - Label displayed when the dialog is in edit mode.
+ */
+export declare interface StoreDialogLabels {
+    create: string;
+    edit: string;
+}
+
+/**
+ * Operation mode for the StoreDialog component.
+ * - create: Submits form values through `handleCreate`.
+ * - edit: Submits form values through `handleEdit` with the selected item id.
+ */
+export declare type StoreDialogOption = 'create' | 'edit';
+
+/**
+ * Props for the StoreDialog component.
+ * This interface is generic and expects an item shape with an optional `id` field.
+ * @param isOpen - Controls whether the dialog is visible.
+ * @param setOpen - Callback used to open or close the dialog.
+ * @param handleCreate - Callback executed on submit when `option` is `create`.
+ * @param handleEdit - Optional callback executed on submit when `option` is `edit` and `item.id` is available.
+ * @param item - Optional selected item used for edit mode.
+ * @param initialValues - Initial Formik values used by the form.
+ * @param formInputs - Field configuration array rendered as form fields.
+ * @param option - Defines whether the dialog works in create or edit mode.
+ * @param title - Optional heading labels for each mode.
+ * @param buttonText - Optional submit button labels for each mode.
+ */
+export declare interface StoreDialogProps<T = any> {
+    isOpen: boolean;
+    setOpen: (open: boolean) => void;
+    handleCreate: (values: any) => void;
+    handleEdit?: (id: number | string, values: any) => void;
+    item?: T | null;
+    initialValues: FormikValues;
+    formInputs: FormFieldComponentProps[];
+    option: StoreDialogOption;
+    title?: StoreDialogLabels;
+    buttonText?: StoreDialogLabels;
+}
+
 /**
  * Submenu expand/collapse animation (top-down).
  * Smooth height auto + fade + slight upward offset for a natural reveal.