@grasp-labs/ds-react-components 0.13.0 → 0.15.0

package/dist/components/dialog/Dialog.d.ts

@@ -10,6 +10,8 @@ export type DialogProps = {
     closeOnEscape?: boolean;
     /** Whether to show close button in header */
     showClose?: boolean;
+    /** Accessible label for the close button */
+    closeButtonAriaLabel?: string;
     /** Additional CSS classes for the dialog backdrop */
     backdropClassName?: string;
     /** Size variant for the dialog */
@@ -28,4 +30,4 @@ export type DialogProps = {
  * @param props - The props for the Dialog component
  * @returns A modal dialog with backdrop
  */
-export declare const Dialog: ({ isOpen, onClose, closeOnBackdropClick, closeOnEscape, showClose, backdropClassName, size, className, title, headerActions, footerActions, children, headerClassName, bodyClassName, footerClassName, }: DialogProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Dialog: ({ isOpen, onClose, closeOnBackdropClick, closeOnEscape, showClose, closeButtonAriaLabel, backdropClassName, size, className, title, headerActions, footerActions, children, headerClassName, bodyClassName, footerClassName, }: DialogProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,14 @@
+import { CardProps } from '../card/Card';
+export type DrawerProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    placement?: "top" | "right" | "bottom" | "left";
+    size?: "sm" | "lg";
+    portalContainer?: HTMLElement | null;
+    closeOnBackdropClick?: boolean;
+    showClose?: boolean;
+    closeButtonAriaLabel?: string;
+    drawerClassName?: string;
+    backdropClassName?: string;
+} & Omit<CardProps, "className">;
+export declare function Drawer({ isOpen, onClose, placement, size, closeOnBackdropClick, showClose, closeButtonAriaLabel, drawerClassName, backdropClassName, title, headerActions, footerActions, portalContainer, children, headerClassName, bodyClassName, footerClassName, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { Drawer, type DrawerProps } from './Drawer';

package/dist/components/errorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,26 @@
+import { default as React, Component, ReactNode } from 'react';
+export type ErrorBoundaryProps = {
+    children: ReactNode;
+    fallback?: (error: Error, errorInfo: React.ErrorInfo | null) => ReactNode;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+    errorTitle?: string;
+    errorMessage?: string;
+    retryText?: string;
+};
+type ErrorBoundaryState = {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: React.ErrorInfo | null;
+};
+/**
+ * Error boundary component that catches JavaScript errors anywhere in the child component tree.
+ * Displays a fallback UI when an error occurs.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    handleReset: () => void;
+    render(): ReactNode;
+}
+export {};

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

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

package/dist/components/errorPage/ErrorPage.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export type ErrorPageProps = {
+    title?: string;
+    message?: string;
+    children?: React.ReactNode;
+};
+/**
+ * A user-friendly error display component built with library components.
+ * Shows an error page when critical errors occur.
+ */
+export declare const ErrorPage: ({ title, message, children, }: ErrorPageProps) => React.JSX.Element;

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

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

package/dist/components/jsonEditor/config.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from 'json-edit-react';
+export declare const DEFAULT_COLLAPSE_LEVEL = 1;
+export declare const customTheme: Theme;

package/dist/components/popover/Popover.d.ts

@@ -25,8 +25,6 @@ export type PopoverProps = {
     arrowClassName?: string;
     /** Offset distance from the trigger element in pixels */
     offset?: number;
-    /** Whether the popover should render via a React portal */
-    renderInPortal?: boolean;
     /** Optional id applied to the popover panel */
     id?: string;
     /** ARIA role describing the type of popover */
@@ -57,4 +55,4 @@ export type PopoverProps = {
  * @param props - The props for the Popover component
  * @returns A popover with trigger and floating content
  */
-export declare const Popover: ({ children, content, isOpen, onClose, closeOnClickOutside, closeOnEscape, placement, showArrow, triggerClassName, className, arrowClassName, offset, renderInPortal, id, role, ariaLabel, ariaLabelledBy, ariaDescribedBy, initialFocusRef, returnFocusOnClose, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: ({ children, content, isOpen, onClose, closeOnClickOutside, closeOnEscape, placement, showArrow, triggerClassName, className, arrowClassName, offset, id, role, ariaLabel, ariaLabelledBy, ariaDescribedBy, initialFocusRef, returnFocusOnClose, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/portal/Portal.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type PortalProps = {
+    children: ReactNode;
+    container?: Element | null;
+};
+/**
+ * A portal component that renders children into a DOM node outside the parent hierarchy.
+ * SSR-safe: returns null during server-side rendering and initial client render to avoid hydration mismatches.
+ */
+export declare function Portal({ children, container }: PortalProps): import('react').ReactPortal | null;

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

@@ -0,0 +1 @@
+export { Portal, type PortalProps } from './Portal';

package/dist/components/spinner/CenteredSpinner.d.ts

@@ -0,0 +1,12 @@
+import { default as React, SVGProps } from 'react';
+type CenteredSpinnerProps = {
+    size?: number;
+} & Omit<SVGProps<SVGSVGElement>, "width" | "height">;
+/**
+ * CenteredSpinner component
+ *
+ * A full-page centered spinner for loading states that take over the entire viewport.
+ * Useful for initial page loads, route transitions, or full-page data fetching.
+ */
+export declare const CenteredSpinner: ({ size, ...props }: CenteredSpinnerProps) => React.JSX.Element;
+export {};

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,11 @@
+import { default as React, SVGProps } from 'react';
+type SpinnerProps = {
+    size?: number;
+} & SVGProps<SVGSVGElement>;
+/**
+ * Spinner component
+ *
+ * A reusable spinning loader component that can be used as an icon
+ */
+export declare const Spinner: ({ size, className, ...props }: SpinnerProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './CenteredSpinner';
+export * from './Spinner';

package/dist/components/table/Table.d.ts

@@ -1,32 +1,5 @@
-import { PaginationState, TableOptions } from '@tanstack/react-table';
 import { JSX } from 'react';
-/**
- * Props for the Table component.
- *
- */
-export type TableProps<T> = Omit<TableOptions<T>, "getCoreRowModel"> & {
-    className?: string;
-    scrollWrapperClassName?: string;
-    getCoreRowModel?: TableOptions<T>["getCoreRowModel"];
-    enableRowSelection?: boolean;
-    enableMultiRowSelection?: boolean;
-    enablePagination?: boolean;
-    paginationProps?: {
-        itemsPerPageOptions?: number[];
-        pagination?: PaginationState;
-        onPaginationChange?: (pagination: PaginationState) => void;
-        totalItems?: number;
-        itemsPerPageText?: string;
-        fromText?: string;
-    };
-};
-/**
- * A customizable table component using TanStack Table.
- *
- * @template T - The row data type.
- * @param {TableProps<T>} props - The table props.
- * @returns {JSX.Element} The rendered table.
- */
+import { TableProps } from './types';
 declare function Table<T extends {
     id?: string | number;
 }>({ data, columns, className, scrollWrapperClassName, getCoreRowModel, enableRowSelection, enableMultiRowSelection, enablePagination, paginationProps, ...options }: TableProps<T>): JSX.Element;

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

@@ -1,6 +1,6 @@
+export { Pagination } from './components/Pagination';
+export type { PaginationProps } from './components/Pagination';
 export { default as Table } from './Table';
-export type { TableProps } from './Table';
 export { TableCell } from './TableCell';
 export { TableHeaderCell } from './TableHeaderCell';
-export { Pagination } from './components/Pagination';
-export type { PaginationProps } from './components/Pagination';
+export type { TableProps } from './types';

package/dist/components/table/types.d.ts

@@ -0,0 +1,51 @@
+import { TableOptions } from '@tanstack/react-table';
+/**
+ * Props for the Table component.
+ * Supports both controlled and uncontrolled modes for sorting, selection, and pagination.
+ *
+ * @template T - The row data type.
+ *
+ * @example
+ * // Uncontrolled (component manages state internally via TanStack Table)
+ * <Table data={data} columns={columns} />
+ *
+ * @example
+ * // Controlled selection
+ * <Table
+ *   data={data}
+ *   columns={columns}
+ *   enableRowSelection
+ *   state={{ rowSelection }}
+ *   onRowSelectionChange={setRowSelection}
+ * />
+ *
+ * @example
+ * // Server-side pagination
+ * <Table
+ *   data={data}
+ *   columns={columns}
+ *   enablePagination
+ *   state={{ pagination }}
+ *   onPaginationChange={setPagination}
+ *   paginationProps={{ mode: 'server', totalItems: 1000 }}
+ * />
+ */
+export type TableProps<T> = Omit<TableOptions<T>, "getCoreRowModel" | "getSortedRowModel" | "getPaginationRowModel" | "manualPagination" | "pageCount" | "autoResetPageIndex"> & {
+    className?: string;
+    scrollWrapperClassName?: string;
+    getCoreRowModel?: TableOptions<T>["getCoreRowModel"];
+    enablePagination?: boolean;
+    paginationProps?: {
+        mode?: "client";
+        itemsPerPageOptions?: number[];
+        itemsPerPageText?: string;
+        fromText?: string;
+        totalItems?: never;
+    } | {
+        mode: "server";
+        itemsPerPageOptions?: number[];
+        itemsPerPageText?: string;
+        fromText?: string;
+        totalItems: number;
+    };
+};

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

@@ -7,4 +7,4 @@ import { ToasterProps } from './types';
  * of toasts. State management (adding, removing toasts) should be handled
  * by the consuming application.
  */
-export declare const Toaster: ({ toasts, onDismiss, maxToasts, className, }: ToasterProps) => import('react').ReactPortal | null;
+export declare const Toaster: ({ toasts, onDismiss, maxToasts, className, }: ToasterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/hooks/index.d.ts

@@ -1 +1,2 @@
+export { useDropdownPosition } from './useDropdownPosition';
 export { useViewportCollision } from './useViewportCollision';

package/dist/hooks/useDropdownPosition.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+export type DropdownPosition = {
+    top?: number;
+    bottom?: number;
+    left: number;
+    width: number;
+};
+export type UseDropdownPositionOptions = {
+    isOpen: boolean;
+    triggerRef: RefObject<HTMLElement | null>;
+    maxHeight: number;
+};
+export declare const useDropdownPosition: ({ isOpen, triggerRef, maxHeight, }: UseDropdownPositionOptions) => DropdownPosition;