@payfit/unity-components
Version:
37 lines (36 loc) • 3.04 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren } from 'react';
export declare const funnelBody: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:group/funnelbody uy:mx-auto uy:w-full uy:min-h-full uy:flex-1 uy:md:max-w-(--uy-container-lg) uy:md:px-300 uy:lg:max-w-(--uy-container-xl) uy:flex uy:flex-col uy:md:flex-row uy:gap-x-200 uy:md:py-600", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:group/funnelbody uy:mx-auto uy:w-full uy:min-h-full uy:flex-1 uy:md:max-w-(--uy-container-lg) uy:md:px-300 uy:lg:max-w-(--uy-container-xl) uy:flex uy:flex-col uy:md:flex-row uy:gap-x-200 uy:md:py-600", unknown, unknown, undefined>>;
export type FunnelBodyProps = PropsWithChildren<VariantProps<typeof funnelBody>>;
/**
* The `FunnelBody` component provides the main content container for the funnel layout.
* It creates a responsive flex layout that accommodates both sidebar and main content areas
* with proper spacing and maximum width constraints.
* @param {FunnelBodyProps} props - The props for the `FunnelBody` component
* @example
* ```tsx
* import { FunnelBody } from '@payfit/unity-components'
*
* function Example() {
* return (
* <FunnelBody>
* <FunnelSidebar>Sidebar content</FunnelSidebar>
* <FunnelPage>Main content</FunnelPage>
* </FunnelBody>
* )
* }
* ```
* @remarks
* - Automatically adjusts layout based on presence of sidebar
* - Provides responsive breakpoints for mobile and desktop layouts
* - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
* @see {@link FunnelBodyProps} for all available props
* @see Source code in {@link https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/components/src/components/funnel-layout/parts GitHub}
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=10802-11500&m=dev Figma}
* @see Design docs in {@link https://www.payfit.design/24f360409/p/88f9fc-funnel/b/24ca6f Payfit.design}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/layout-funnellayout-funnelbody--docs unity-components.payfit.io}
*/
declare const FunnelBody: import('react').ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:group/funnelbody uy:mx-auto uy:w-full uy:min-h-full uy:flex-1 uy:md:max-w-(--uy-container-lg) uy:md:px-300 uy:lg:max-w-(--uy-container-xl) uy:flex uy:flex-col uy:md:flex-row uy:gap-x-200 uy:md:py-600", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:group/funnelbody uy:mx-auto uy:w-full uy:min-h-full uy:flex-1 uy:md:max-w-(--uy-container-lg) uy:md:px-300 uy:lg:max-w-(--uy-container-xl) uy:flex uy:flex-col uy:md:flex-row uy:gap-x-200 uy:md:py-600", unknown, unknown, undefined>>> & {
children?: import('react').ReactNode | undefined;
} & import('react').RefAttributes<HTMLDivElement>>;
export { FunnelBody };