import { HTMLAttributes } from "react";
import "./styles.css";
type DrawerContainerProps = HTMLAttributes<HTMLElement> & {
    isVisible: boolean;
    makeInvisible: () => void;
    orientation?: "left" | "right";
};
/**O
 * DrawerContainer component - animated slide-out panel for navigation or content
 *
 * @param props - DrawerContainer component properties
 * @param props.isVisible - Controls drawer visibility state
 * @param props.makeInvisible - Callback function to hide the drawer
 * @param props.orientation - Side from which drawer slides (left, right). Default: "left"
 *
 * **...Other valid HTML properties for aside element**
 *
 * @returns DrawerContainer JSX element
 *
 * @example
 * ```tsx
 * // Basic drawer from left
 * const [isOpen, setIsOpen] = useState(false);
 * <DrawerContainer
 *   isVisible={isOpen}
 *   makeInvisible={setIsOpen}
 * >
 *   <p>Drawer content</p>
 * </DrawerContainer>
 *
 * // Right-side drawer
 * <DrawerContainer
 *   isVisible={isOpen}
 *   makeInvisible={setIsOpen}
 *   orientation="right"
 * >
 *   <nav>Navigation items</nav>
 * </DrawerContainer>
 *
 * // Complete drawer example
 * function DrawerExample() {
 *   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 *
 *   return (
 *     <>
 *       <button onClick={() => setIsDrawerOpen(true)}>
 *         Open Menu
 *       </button>
 *
 *       <DrawerContainer
 *         isVisible={isDrawerOpen}
 *         makeInvisible={setIsDrawerOpen}
 *         orientation="right"
 *       >
 *         <div className="drawer-content">
 *           <h2>Menu</h2>
 *           <ul>
 *             <li>Home</li>
 *             <li>About</li>
 *             <li>Contact</li>
 *           </ul>
 *         </div>
 *       </DrawerContainer>
 *     </>
 *   );
 * }
 * ```
 */
declare function DrawerContainer(props: DrawerContainerProps): import("react/jsx-runtime").JSX.Element;
export { DrawerContainer };
//# sourceMappingURL=index.d.ts.map