@trackunit/react-drawer 1.10.18 → 1.10.20

package/index.cjs.js

@@ -190,6 +190,56 @@ const NOOP$1 = () => void 0;
  * They start closed but can be temporarily opened, appearing on top of other content until the user chooses a section.
  * To close the drawer, users can either click outside of it or press the Esc key.
  *
+ * ### When to use
+ * - For secondary content or navigation that doesn't need to be always visible
+ * - For filters, settings panels, or detail views that slide in from the side
+ * - When you need to preserve context of the underlying page
+ *
+ * ### When not to use
+ * - For critical actions requiring user confirmation (use Modal instead)
+ * - For simple tooltips or small contextual information (use Popover)
+ *
+ * @example Basic drawer with content
+ * ```tsx
+ * import { Drawer } from "@trackunit/react-drawer";
+ * import { Button } from "@trackunit/react-components";
+ * import { useState } from "react";
+ *
+ * const FilterDrawer = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={() => setIsOpen(true)}>Open Filters</Button>
+ *       <Drawer
+ *         open={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *         position="right"
+ *       >
+ *         <div className="p-4">
+ *           <h2>Filter Options</h2>
+ *           <p>Filter controls go here</p>
+ *         </div>
+ *       </Drawer>
+ *     </>
+ *   );
+ * };
+ * ```
+ * @example Drawer without overlay for side panels
+ * ```tsx
+ * import { Drawer } from "@trackunit/react-drawer";
+ *
+ * const SidePanel = ({ isOpen, content }) => (
+ *   <Drawer
+ *     open={isOpen}
+ *     hasOverlay={false}
+ *     position="left"
+ *     keepMountedWhenClosed={true}
+ *   >
+ *     {content}
+ *   </Drawer>
+ * );
+ * ```
  * @param {DrawerProps} props - The props for the Drawer component
  */
 const Drawer = ({ open = false, // Default to closed

package/index.esm.js

@@ -188,6 +188,56 @@ const NOOP$1 = () => void 0;
  * They start closed but can be temporarily opened, appearing on top of other content until the user chooses a section.
  * To close the drawer, users can either click outside of it or press the Esc key.
  *
+ * ### When to use
+ * - For secondary content or navigation that doesn't need to be always visible
+ * - For filters, settings panels, or detail views that slide in from the side
+ * - When you need to preserve context of the underlying page
+ *
+ * ### When not to use
+ * - For critical actions requiring user confirmation (use Modal instead)
+ * - For simple tooltips or small contextual information (use Popover)
+ *
+ * @example Basic drawer with content
+ * ```tsx
+ * import { Drawer } from "@trackunit/react-drawer";
+ * import { Button } from "@trackunit/react-components";
+ * import { useState } from "react";
+ *
+ * const FilterDrawer = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={() => setIsOpen(true)}>Open Filters</Button>
+ *       <Drawer
+ *         open={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *         position="right"
+ *       >
+ *         <div className="p-4">
+ *           <h2>Filter Options</h2>
+ *           <p>Filter controls go here</p>
+ *         </div>
+ *       </Drawer>
+ *     </>
+ *   );
+ * };
+ * ```
+ * @example Drawer without overlay for side panels
+ * ```tsx
+ * import { Drawer } from "@trackunit/react-drawer";
+ *
+ * const SidePanel = ({ isOpen, content }) => (
+ *   <Drawer
+ *     open={isOpen}
+ *     hasOverlay={false}
+ *     position="left"
+ *     keepMountedWhenClosed={true}
+ *   >
+ *     {content}
+ *   </Drawer>
+ * );
+ * ```
  * @param {DrawerProps} props - The props for the Drawer component
  */
 const Drawer = ({ open = false, // Default to closed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-drawer",
-  "version": "1.10.18",
+  "version": "1.10.20",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "react": "19.0.0",
     "react-swipeable": "^7.0.1",
-    "@trackunit/react-components": "1.14.18",
-    "@trackunit/css-class-variance-utilities": "1.10.15",
-    "@trackunit/ui-icons": "1.10.15",
-    "@trackunit/i18n-library-translation": "1.10.15"
+    "@trackunit/react-components": "1.14.20",
+    "@trackunit/css-class-variance-utilities": "1.10.16",
+    "@trackunit/ui-icons": "1.10.16",
+    "@trackunit/i18n-library-translation": "1.10.17"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/Drawer/Drawer.d.ts

@@ -60,6 +60,56 @@ export interface DrawerProps extends CommonProps {
  * They start closed but can be temporarily opened, appearing on top of other content until the user chooses a section.
  * To close the drawer, users can either click outside of it or press the Esc key.
  *
+ * ### When to use
+ * - For secondary content or navigation that doesn't need to be always visible
+ * - For filters, settings panels, or detail views that slide in from the side
+ * - When you need to preserve context of the underlying page
+ *
+ * ### When not to use
+ * - For critical actions requiring user confirmation (use Modal instead)
+ * - For simple tooltips or small contextual information (use Popover)
+ *
+ * @example Basic drawer with content
+ * ```tsx
+ * import { Drawer } from "@trackunit/react-drawer";
+ * import { Button } from "@trackunit/react-components";
+ * import { useState } from "react";
+ *
+ * const FilterDrawer = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={() => setIsOpen(true)}>Open Filters</Button>
+ *       <Drawer
+ *         open={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *         position="right"
+ *       >
+ *         <div className="p-4">
+ *           <h2>Filter Options</h2>
+ *           <p>Filter controls go here</p>
+ *         </div>
+ *       </Drawer>
+ *     </>
+ *   );
+ * };
+ * ```
+ * @example Drawer without overlay for side panels
+ * ```tsx
+ * import { Drawer } from "@trackunit/react-drawer";
+ *
+ * const SidePanel = ({ isOpen, content }) => (
+ *   <Drawer
+ *     open={isOpen}
+ *     hasOverlay={false}
+ *     position="left"
+ *     keepMountedWhenClosed={true}
+ *   >
+ *     {content}
+ *   </Drawer>
+ * );
+ * ```
  * @param {DrawerProps} props - The props for the Drawer component
  */
 export declare const Drawer: {