@payfit/unity-components
Version:
143 lines (142 loc) • 5.03 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren } from 'react';
export declare const sidePanel: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
overlay?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
overlay?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
overlay: string[];
wrapper: string[];
content: string[];
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
content?: import('tailwind-merge').ClassNameValue;
overlay?: import('tailwind-merge').ClassNameValue;
wrapper?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
overlay: string[];
wrapper: string[];
content: string[];
}, import('tailwind-variants').TVReturnType<unknown, {
overlay: string[];
wrapper: string[];
content: string[];
}, undefined, unknown, unknown, undefined>>;
export interface SidePanelProps extends PropsWithChildren<VariantProps<typeof sidePanel>> {
/**
* Controls whether the panel can be dismissed by clicking outside or using escape key.
* @default true
*/
isDismissable?: boolean;
/**
* When true, pressing the Escape key will not close the panel.
* This is useful when you need to prevent accidental dismissal.
* @default false
*/
isKeyboardDismissDisabled?: boolean;
/**
* Controls the open state of the panel in controlled mode.
* Must be used together with `onOpenChange`.
*/
isOpen?: boolean;
/**
* Sets the initial open state in uncontrolled mode.
* @default false
*/
defaultOpen?: boolean;
/**
* Callback fired when the open state changes.
* Required when using controlled mode with `isOpen`.
*/
onOpenChange?: (isOpen: boolean) => void;
/**
* If true, scroll locking will be disabled, allowing background scrolling while the panel is open.
* **Requires** controlled mode with `isOpen`/`onOpenChange`.
* @default false
*/
disableScrollLocking?: boolean;
}
/**
* The SidePanel component provides contextual space for supplementary content without fully
* interrupting the user's workflow. It slides in from the right on desktop and from the bottom on mobile.
*
* You can use SidePanel to display detailed information, forms, or secondary actions while keeping
* the main interface visible and accessible. It's ideal for multi-step processes, editing items in a list,
* or displaying contextual details.
*
* Control the panel using either uncontrolled mode with `defaultOpen` or controlled mode with
* `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
* `isKeyboardDismissDisabled` props.
* @param {SidePanelProps} props - The props for the SidePanel component
* @see {@link SidePanelProps} for all available props
* @example
* ```tsx
* import {
* SidePanel,
* SidePanelHeader,
* SidePanelContent,
* SidePanelFooter,
* Button
* } from '@payfit/unity-components'
*
* // Uncontrolled example
* function BasicExample() {
* return (
* <DialogTrigger>
* <Button>Open panel</Button>
* <SidePanel>
* <SidePanelHeader>Panel title</SidePanelHeader>
* <SidePanelContent>Your content here</SidePanelContent>
* <SidePanelFooter>
* <Button variant="secondary">Cancel</Button>
* <Button variant="primary">Save</Button>
* </SidePanelFooter>
* </SidePanel>
* </DialogTrigger>
* )
* }
*
* // Controlled example
* function ControlledExample() {
* const [isOpen, setIsOpen] = useState(false)
*
* return (
* <>
* <Button onPress={() => setIsOpen(true)}>Open panel</Button>
*
* <SidePanel isOpen={isOpen} onOpenChange={setIsOpen}>
* <SidePanelHeader>Panel title</SidePanelHeader>
* <SidePanelContent>Your content here</SidePanelContent>
* <SidePanelFooter>
* <Button
* variant="primary"
* onPress={() => setIsOpen(false)}
* >
* Close
* </Button>
* </SidePanelFooter>
* </SidePanel>
* </>
* )
* }
* ```
* @remarks
* [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
*/
declare const SidePanel: import('react').ForwardRefExoticComponent<SidePanelProps & import('react').RefAttributes<HTMLDivElement>>;
export { SidePanel };