A Sheet component is a UI element that presents content in a sliding panel, often overlaying the main application interface. It is typically used for displaying additional information, forms, or actions without navigating away from the current view. Sheets can be swiped or tapped to expand or collapse, providing a clean and efficient way to manage user interactions and maintain focus on the main content.

# Demo

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
headerClassName	string	' '	You can customise by passing tailwind classes.
titleClassName	string	' '	You can customise by passing tailwind classes.
contentClassName	string	' '	You can customise by passing tailwind classes.
title	string	Required	You can pass title for sheet.
size	SheetSize	SheetSize.MD	You can pass size of the sheet.
isOpen	boolean	false	You can pass isOpen to show / hide alert box.
children	string \| ReactNode	Required	You can pass sheet content as children.
onClose	() => void	Required	You can get callback when sheet got closed.

# Usage

import { useState } from 'react';
import { NSheet, NButton, Size } from 'nayan';

const SheetExample = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <NButton onClick={() => setIsOpen(true)}>Show Sheet</NButton>
      <NSheet isOpen={isOpen} size={Size.SM} title="Edit Profile" onCloseSheet={() => setIsOpen(false)}>
        <div className="w-full h-full p-3">
          Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
        </div>
      </NSheet>
    </div>
  );
};

export default Sheet;