@xyo-network/react-drawer 2.67.18

package/LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

package/README.md

@@ -0,0 +1,13 @@
+[![logo][]](https://xyo.network)
+
+Part of [@xyo-network/sdk-xyo-react](https://www.npmjs.com/package/@xyo-network/sdk-xyo-react)
+
+## License
+
+> See the [LICENSE](LICENSE) file for license details
+
+## Credits
+
+[Made with 🔥 and ❄️ by XYO](https://xyo.network)
+
+[logo]: https://cdn.xy.company/img/brand/XYO_full_colored.png

package/dist/browser/components/Drawer.d.cts

@@ -0,0 +1,10 @@
+import { DrawerProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
+export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
+    heightVariant?: 'full' | 'auto';
+    subTitle?: string;
+    title?: string;
+    widthVariant?: 'full' | 'partial';
+}
+export declare const DrawerEx: React.FC<DrawerExProps>;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/browser/components/Drawer.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}

package/dist/browser/components/Drawer.d.mts

@@ -0,0 +1,10 @@
+import { DrawerProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
+export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
+    heightVariant?: 'full' | 'auto';
+    subTitle?: string;
+    title?: string;
+    widthVariant?: 'full' | 'partial';
+}
+export declare const DrawerEx: React.FC<DrawerExProps>;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/browser/components/Drawer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}

package/dist/browser/components/Drawer.d.ts

@@ -0,0 +1,10 @@
+import { DrawerProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
+export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
+    heightVariant?: 'full' | 'auto';
+    subTitle?: string;
+    title?: string;
+    widthVariant?: 'full' | 'partial';
+}
+export declare const DrawerEx: React.FC<DrawerExProps>;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/browser/components/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}

package/dist/browser/components/index.d.cts

@@ -0,0 +1,2 @@
+export * from './Drawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist/browser/components/index.d.mts

@@ -0,0 +1,2 @@
+export * from './Drawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist/browser/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Drawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist/browser/index.cjs

@@ -0,0 +1,98 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DrawerEx: () => DrawerEx
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Drawer.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DrawerEx = ({
+  children,
+  heightVariant = "full",
+  subTitle,
+  title,
+  onClose,
+  widthVariant = "partial",
+  ...props
+}) => {
+  const variantBasedProps = (0, import_react.useMemo)(() => {
+    return {
+      PaperProps: {
+        sx: {
+          alignItems: "center",
+          background: "transparent",
+          boxShadow: "none",
+          height: heightVariant === "full" ? "100%" : "auto",
+          width: widthVariant === "partial" ? "auto" : "100%"
+        }
+      },
+      onClick: (event) => onClose?.(event, "backdropClick")
+    };
+  }, [heightVariant, onClose, widthVariant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledDrawerContentPaper,
+    {
+      widthVariant,
+      elevation: 16,
+      onClick: (event) => event.stopPropagation(),
+      sx: { width: widthVariant === "full" ? "100%" : void 0 },
+      children: [
+        title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "start", gap: 1, children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
+          subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
+        ] }) : null,
+        children
+      ]
+    }
+  ) });
+};
+var StyledEllipsisTypography = (0, import_material.styled)(import_material.Typography, { name: "StyledEllipsisTypography" })(() => ({
+  maxWidth: "100%",
+  overflowX: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+var StyledDrawerContentPaper = (0, import_material.styled)(import_material.Paper, {
+  name: "StyledDrawerContentPaper",
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
+})(({ theme, widthVariant }) => ({
+  alignItems: "stretch",
+  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  height: "100%",
+  maxWidth: "100%",
+  overflowX: "hidden",
+  padding: theme.spacing(3),
+  [theme.breakpoints.up("lg")]: {
+    width: widthVariant === "full" ? "100%" : "50%"
+  },
+  [theme.breakpoints.up("md")]: {
+    width: widthVariant === "full" ? "100%" : "75%"
+  }
+}));
+//# sourceMappingURL=index.cjs.map

package/dist/browser/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n  heightVariant?: 'full' | 'auto'\n  subTitle?: string\n  title?: string\n  widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n  children,\n  heightVariant = 'full',\n  subTitle,\n  title,\n  onClose,\n  widthVariant = 'partial',\n  ...props\n}) => {\n  const variantBasedProps = useMemo(() => {\n    return {\n      PaperProps: {\n        sx: {\n          alignItems: 'center',\n          background: 'transparent',\n          boxShadow: 'none',\n          height: heightVariant === 'full' ? '100%' : 'auto',\n          width: widthVariant === 'partial' ? 'auto' : '100%',\n        },\n      },\n      onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n    }\n  }, [heightVariant, onClose, widthVariant])\n\n  return (\n    <Drawer anchor={'top'} onClose={onClose} {...variantBasedProps} {...props}>\n      {/* Trap the event to prevent triggering the backdrop onClick */}\n      <StyledDrawerContentPaper\n        widthVariant={widthVariant}\n        elevation={16}\n        onClick={(event) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ? (\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ? <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography> : null}\n            {subTitle ? (\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            ) : null}\n          </FlexCol>\n        ) : null}\n        {children}\n      </StyledDrawerContentPaper>\n    </Drawer>\n  )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n  name: 'StyledDrawerContentPaper',\n  shouldForwardProp: (prop) => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n  alignItems: 'stretch',\n  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  height: '100%',\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  padding: theme.spacing(3),\n  [theme.breakpoints.up('lg')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAA+D;AAC/D,2BAAwB;AACxB,mBAAuD;AA2C7C;AAlCH,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,WAAO;AAAA,MACL,YAAY;AAAA,QACV,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,QAAQ,kBAAkB,SAAS,SAAS;AAAA,UAC5C,OAAO,iBAAiB,YAAY,SAAS;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAsB,UAAU,OAAO,eAAe;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,eAAe,SAAS,YAAY,CAAC;AAEzC,SACE,4CAAC,0BAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,6CAAC,gCAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBAAQ,4CAAC,4BAAyB,SAAS,MAAO,iBAAM,IAA8B;AAAA,UACtF,WACC,4CAAC,8BAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACE;AAAA,WACN,IACE;AAAA,QACH;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,+BAA2B,wBAAO,4BAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,+BAA2B,wBAAO,uBAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,CAAC,EAAiB,CAAC,EAAE,OAAO,aAAa,OAAO;AAAA,EAC9C,YAAY;AAAA,EACZ,cAAc,OAAO,MAAM,MAAM,YAAY,MAAM,MAAM,MAAM,YAAY;AAAA,EAC3E,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}

package/dist/browser/index.d.cts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/browser/index.d.mts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/browser/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/browser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/browser/index.js

@@ -0,0 +1,75 @@
+// src/components/Drawer.tsx
+import { Drawer, Paper, styled, Typography } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DrawerEx = ({
+  children,
+  heightVariant = "full",
+  subTitle,
+  title,
+  onClose,
+  widthVariant = "partial",
+  ...props
+}) => {
+  const variantBasedProps = useMemo(() => {
+    return {
+      PaperProps: {
+        sx: {
+          alignItems: "center",
+          background: "transparent",
+          boxShadow: "none",
+          height: heightVariant === "full" ? "100%" : "auto",
+          width: widthVariant === "partial" ? "auto" : "100%"
+        }
+      },
+      onClick: (event) => onClose?.(event, "backdropClick")
+    };
+  }, [heightVariant, onClose, widthVariant]);
+  return /* @__PURE__ */ jsx(Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ jsxs(
+    StyledDrawerContentPaper,
+    {
+      widthVariant,
+      elevation: 16,
+      onClick: (event) => event.stopPropagation(),
+      sx: { width: widthVariant === "full" ? "100%" : void 0 },
+      children: [
+        title || subTitle ? /* @__PURE__ */ jsxs(FlexCol, { alignItems: "start", gap: 1, children: [
+          title ? /* @__PURE__ */ jsx(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
+          subTitle ? /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
+        ] }) : null,
+        children
+      ]
+    }
+  ) });
+};
+var StyledEllipsisTypography = styled(Typography, { name: "StyledEllipsisTypography" })(() => ({
+  maxWidth: "100%",
+  overflowX: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+var StyledDrawerContentPaper = styled(Paper, {
+  name: "StyledDrawerContentPaper",
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
+})(({ theme, widthVariant }) => ({
+  alignItems: "stretch",
+  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  height: "100%",
+  maxWidth: "100%",
+  overflowX: "hidden",
+  padding: theme.spacing(3),
+  [theme.breakpoints.up("lg")]: {
+    width: widthVariant === "full" ? "100%" : "50%"
+  },
+  [theme.breakpoints.up("md")]: {
+    width: widthVariant === "full" ? "100%" : "75%"
+  }
+}));
+export {
+  DrawerEx
+};
+//# sourceMappingURL=index.js.map

package/dist/browser/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n  heightVariant?: 'full' | 'auto'\n  subTitle?: string\n  title?: string\n  widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n  children,\n  heightVariant = 'full',\n  subTitle,\n  title,\n  onClose,\n  widthVariant = 'partial',\n  ...props\n}) => {\n  const variantBasedProps = useMemo(() => {\n    return {\n      PaperProps: {\n        sx: {\n          alignItems: 'center',\n          background: 'transparent',\n          boxShadow: 'none',\n          height: heightVariant === 'full' ? '100%' : 'auto',\n          width: widthVariant === 'partial' ? 'auto' : '100%',\n        },\n      },\n      onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n    }\n  }, [heightVariant, onClose, widthVariant])\n\n  return (\n    <Drawer anchor={'top'} onClose={onClose} {...variantBasedProps} {...props}>\n      {/* Trap the event to prevent triggering the backdrop onClick */}\n      <StyledDrawerContentPaper\n        widthVariant={widthVariant}\n        elevation={16}\n        onClick={(event) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ? (\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ? <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography> : null}\n            {subTitle ? (\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            ) : null}\n          </FlexCol>\n        ) : null}\n        {children}\n      </StyledDrawerContentPaper>\n    </Drawer>\n  )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n  name: 'StyledDrawerContentPaper',\n  shouldForwardProp: (prop) => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n  alignItems: 'stretch',\n  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  height: '100%',\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  padding: theme.spacing(3),\n  [theme.breakpoints.up('lg')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";AAAA,SAAS,QAAqB,OAAO,QAAQ,kBAAkB;AAC/D,SAAS,eAAe;AACxB,SAAwC,eAAe;AA2C7C,SACW,KADX;AAlCH,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,QAAQ,MAAM;AACtC,WAAO;AAAA,MACL,YAAY;AAAA,QACV,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,QAAQ,kBAAkB,SAAS,SAAS;AAAA,UAC5C,OAAO,iBAAiB,YAAY,SAAS;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAsB,UAAU,OAAO,eAAe;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,eAAe,SAAS,YAAY,CAAC;AAEzC,SACE,oBAAC,UAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,qBAAC,WAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBAAQ,oBAAC,4BAAyB,SAAS,MAAO,iBAAM,IAA8B;AAAA,UACtF,WACC,oBAAC,cAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACE;AAAA,WACN,IACE;AAAA,QACH;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,2BAA2B,OAAO,YAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,2BAA2B,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,CAAC,EAAiB,CAAC,EAAE,OAAO,aAAa,OAAO;AAAA,EAC9C,YAAY;AAAA,EACZ,cAAc,OAAO,MAAM,MAAM,YAAY,MAAM,MAAM,MAAM,YAAY;AAAA,EAC3E,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}

package/dist/node/components/Drawer.d.cts

@@ -0,0 +1,10 @@
+import { DrawerProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
+export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
+    heightVariant?: 'full' | 'auto';
+    subTitle?: string;
+    title?: string;
+    widthVariant?: 'full' | 'partial';
+}
+export declare const DrawerEx: React.FC<DrawerExProps>;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/node/components/Drawer.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}

package/dist/node/components/Drawer.d.mts

@@ -0,0 +1,10 @@
+import { DrawerProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
+export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
+    heightVariant?: 'full' | 'auto';
+    subTitle?: string;
+    title?: string;
+    widthVariant?: 'full' | 'partial';
+}
+export declare const DrawerEx: React.FC<DrawerExProps>;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/node/components/Drawer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}

package/dist/node/components/Drawer.d.ts

@@ -0,0 +1,10 @@
+import { DrawerProps } from '@mui/material';
+import { PropsWithChildren } from 'react';
+export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
+    heightVariant?: 'full' | 'auto';
+    subTitle?: string;
+    title?: string;
+    widthVariant?: 'full' | 'partial';
+}
+export declare const DrawerEx: React.FC<DrawerExProps>;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/node/components/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}

package/dist/node/components/index.d.cts

@@ -0,0 +1,2 @@
+export * from './Drawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist/node/components/index.d.mts

@@ -0,0 +1,2 @@
+export * from './Drawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist/node/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Drawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/dist/node/index.cjs

@@ -0,0 +1,102 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DrawerEx: () => DrawerEx
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Drawer.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DrawerEx = ({
+  children,
+  heightVariant = "full",
+  subTitle,
+  title,
+  onClose,
+  widthVariant = "partial",
+  ...props
+}) => {
+  const variantBasedProps = (0, import_react.useMemo)(() => {
+    return {
+      PaperProps: {
+        sx: {
+          alignItems: "center",
+          background: "transparent",
+          boxShadow: "none",
+          height: heightVariant === "full" ? "100%" : "auto",
+          width: widthVariant === "partial" ? "auto" : "100%"
+        }
+      },
+      onClick: (event) => onClose == null ? void 0 : onClose(event, "backdropClick")
+    };
+  }, [heightVariant, onClose, widthVariant]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledDrawerContentPaper,
+    {
+      widthVariant,
+      elevation: 16,
+      onClick: (event) => event.stopPropagation(),
+      sx: { width: widthVariant === "full" ? "100%" : void 0 },
+      children: [
+        title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "start", gap: 1, children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
+          subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
+        ] }) : null,
+        children
+      ]
+    }
+  ) });
+};
+var StyledEllipsisTypography = (0, import_material.styled)(import_material.Typography, { name: "StyledEllipsisTypography" })(() => ({
+  maxWidth: "100%",
+  overflowX: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+var StyledDrawerContentPaper = (0, import_material.styled)(import_material.Paper, {
+  name: "StyledDrawerContentPaper",
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
+})(({ theme, widthVariant }) => ({
+  alignItems: "stretch",
+  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  height: "100%",
+  maxWidth: "100%",
+  overflowX: "hidden",
+  padding: theme.spacing(3),
+  [theme.breakpoints.up("lg")]: {
+    width: widthVariant === "full" ? "100%" : "50%"
+  },
+  [theme.breakpoints.up("md")]: {
+    width: widthVariant === "full" ? "100%" : "75%"
+  }
+}));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DrawerEx
+});
+//# sourceMappingURL=index.cjs.map

package/dist/node/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n  heightVariant?: 'full' | 'auto'\n  subTitle?: string\n  title?: string\n  widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n  children,\n  heightVariant = 'full',\n  subTitle,\n  title,\n  onClose,\n  widthVariant = 'partial',\n  ...props\n}) => {\n  const variantBasedProps = useMemo(() => {\n    return {\n      PaperProps: {\n        sx: {\n          alignItems: 'center',\n          background: 'transparent',\n          boxShadow: 'none',\n          height: heightVariant === 'full' ? '100%' : 'auto',\n          width: widthVariant === 'partial' ? 'auto' : '100%',\n        },\n      },\n      onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n    }\n  }, [heightVariant, onClose, widthVariant])\n\n  return (\n    <Drawer anchor={'top'} onClose={onClose} {...variantBasedProps} {...props}>\n      {/* Trap the event to prevent triggering the backdrop onClick */}\n      <StyledDrawerContentPaper\n        widthVariant={widthVariant}\n        elevation={16}\n        onClick={(event) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ? (\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ? <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography> : null}\n            {subTitle ? (\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            ) : null}\n          </FlexCol>\n        ) : null}\n        {children}\n      </StyledDrawerContentPaper>\n    </Drawer>\n  )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n  name: 'StyledDrawerContentPaper',\n  shouldForwardProp: (prop) => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n  alignItems: 'stretch',\n  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  height: '100%',\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  padding: theme.spacing(3),\n  [theme.breakpoints.up('lg')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAA+D;AAC/D,2BAAwB;AACxB,mBAAuD;AA2C7C;AAlCH,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,WAAO;AAAA,MACL,YAAY;AAAA,QACV,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,QAAQ,kBAAkB,SAAS,SAAS;AAAA,UAC5C,OAAO,iBAAiB,YAAY,SAAS;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAsB,mCAAU,OAAO;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,eAAe,SAAS,YAAY,CAAC;AAEzC,SACE,4CAAC,0BAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,6CAAC,gCAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBAAQ,4CAAC,4BAAyB,SAAS,MAAO,iBAAM,IAA8B;AAAA,UACtF,WACC,4CAAC,8BAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACE;AAAA,WACN,IACE;AAAA,QACH;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,+BAA2B,wBAAO,4BAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,+BAA2B,wBAAO,uBAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,CAAC,EAAiB,CAAC,EAAE,OAAO,aAAa,OAAO;AAAA,EAC9C,YAAY;AAAA,EACZ,cAAc,OAAO,MAAM,MAAM,YAAY,MAAM,MAAM,MAAM,YAAY;AAAA,EAC3E,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}

package/dist/node/index.d.cts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/node/index.d.mts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/node/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/node/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/node/index.js

@@ -0,0 +1,75 @@
+// src/components/Drawer.tsx
+import { Drawer, Paper, styled, Typography } from "@mui/material";
+import { FlexCol } from "@xylabs/react-flexbox";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DrawerEx = ({
+  children,
+  heightVariant = "full",
+  subTitle,
+  title,
+  onClose,
+  widthVariant = "partial",
+  ...props
+}) => {
+  const variantBasedProps = useMemo(() => {
+    return {
+      PaperProps: {
+        sx: {
+          alignItems: "center",
+          background: "transparent",
+          boxShadow: "none",
+          height: heightVariant === "full" ? "100%" : "auto",
+          width: widthVariant === "partial" ? "auto" : "100%"
+        }
+      },
+      onClick: (event) => onClose == null ? void 0 : onClose(event, "backdropClick")
+    };
+  }, [heightVariant, onClose, widthVariant]);
+  return /* @__PURE__ */ jsx(Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ jsxs(
+    StyledDrawerContentPaper,
+    {
+      widthVariant,
+      elevation: 16,
+      onClick: (event) => event.stopPropagation(),
+      sx: { width: widthVariant === "full" ? "100%" : void 0 },
+      children: [
+        title || subTitle ? /* @__PURE__ */ jsxs(FlexCol, { alignItems: "start", gap: 1, children: [
+          title ? /* @__PURE__ */ jsx(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
+          subTitle ? /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
+        ] }) : null,
+        children
+      ]
+    }
+  ) });
+};
+var StyledEllipsisTypography = styled(Typography, { name: "StyledEllipsisTypography" })(() => ({
+  maxWidth: "100%",
+  overflowX: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}));
+var StyledDrawerContentPaper = styled(Paper, {
+  name: "StyledDrawerContentPaper",
+  shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
+})(({ theme, widthVariant }) => ({
+  alignItems: "stretch",
+  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  height: "100%",
+  maxWidth: "100%",
+  overflowX: "hidden",
+  padding: theme.spacing(3),
+  [theme.breakpoints.up("lg")]: {
+    width: widthVariant === "full" ? "100%" : "50%"
+  },
+  [theme.breakpoints.up("md")]: {
+    width: widthVariant === "full" ? "100%" : "75%"
+  }
+}));
+export {
+  DrawerEx
+};
+//# sourceMappingURL=index.js.map

package/dist/node/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n  heightVariant?: 'full' | 'auto'\n  subTitle?: string\n  title?: string\n  widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n  children,\n  heightVariant = 'full',\n  subTitle,\n  title,\n  onClose,\n  widthVariant = 'partial',\n  ...props\n}) => {\n  const variantBasedProps = useMemo(() => {\n    return {\n      PaperProps: {\n        sx: {\n          alignItems: 'center',\n          background: 'transparent',\n          boxShadow: 'none',\n          height: heightVariant === 'full' ? '100%' : 'auto',\n          width: widthVariant === 'partial' ? 'auto' : '100%',\n        },\n      },\n      onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n    }\n  }, [heightVariant, onClose, widthVariant])\n\n  return (\n    <Drawer anchor={'top'} onClose={onClose} {...variantBasedProps} {...props}>\n      {/* Trap the event to prevent triggering the backdrop onClick */}\n      <StyledDrawerContentPaper\n        widthVariant={widthVariant}\n        elevation={16}\n        onClick={(event) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ? (\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ? <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography> : null}\n            {subTitle ? (\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            ) : null}\n          </FlexCol>\n        ) : null}\n        {children}\n      </StyledDrawerContentPaper>\n    </Drawer>\n  )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n  name: 'StyledDrawerContentPaper',\n  shouldForwardProp: (prop) => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n  alignItems: 'stretch',\n  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  height: '100%',\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  padding: theme.spacing(3),\n  [theme.breakpoints.up('lg')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";AAAA,SAAS,QAAqB,OAAO,QAAQ,kBAAkB;AAC/D,SAAS,eAAe;AACxB,SAAwC,eAAe;AA2C7C,SACW,KADX;AAlCH,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,QAAQ,MAAM;AACtC,WAAO;AAAA,MACL,YAAY;AAAA,QACV,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,QAAQ,kBAAkB,SAAS,SAAS;AAAA,UAC5C,OAAO,iBAAiB,YAAY,SAAS;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAsB,mCAAU,OAAO;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,eAAe,SAAS,YAAY,CAAC;AAEzC,SACE,oBAAC,UAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,qBAAC,WAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBAAQ,oBAAC,4BAAyB,SAAS,MAAO,iBAAM,IAA8B;AAAA,UACtF,WACC,oBAAC,cAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACE;AAAA,WACN,IACE;AAAA,QACH;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,2BAA2B,OAAO,YAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,2BAA2B,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,CAAC,EAAiB,CAAC,EAAE,OAAO,aAAa,OAAO;AAAA,EAC9C,YAAY;AAAA,EACZ,cAAc,OAAO,MAAM,MAAM,YAAY,MAAM,MAAM,MAAM,YAAY;AAAA,EAC3E,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@xyo-network/react-drawer",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@xylabs/react-flexbox": "^3.0.39"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@storybook/react": "^7.6.10",
+    "@xylabs/ts-scripts-yarn3": "^3.2.42",
+    "@xylabs/tsconfig-react": "^3.2.42",
+    "typescript": "^5.3.3"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": {
+          "types": "./dist/node/index.d.mts",
+          "default": "./dist/node/index.js"
+        },
+        "require": {
+          "types": "./dist/node/index.d.cts",
+          "default": "./dist/node/index.cjs"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./dist/browser/index.d.mts",
+          "default": "./dist/browser/index.js"
+        },
+        "require": {
+          "types": "./dist/browser/index.d.cts",
+          "default": "./dist/browser/index.cjs"
+        }
+      },
+      "default": "./dist/browser/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/browser/index.cjs",
+  "module": "dist/browser/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0-only",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/browser/index.d.ts",
+  "version": "2.67.18",
+  "type": "module"
+}

package/src/components/Drawer.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { DrawerEx, DrawerExProps } from './Drawer'
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'modules/drawer/Ex',
+} as Meta
+
+const Template: StoryFn<React.FC<DrawerExProps>> = (props) => {
+  return <div style={{ width: '100vw', height: 'calc(100vh - 2rem)'}}><DrawerEx {...props} /></div>
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithOpen = Template.bind({})
+WithOpen.args = {
+  open: true
+}
+
+const WithFullScreen = Template.bind({})
+WithFullScreen.args = {
+  open: true,
+  widthVariant: 'full',
+  heightVariant: 'full'
+}
+
+const WithTitles = Template.bind({})
+WithTitles.args = {
+  open: true,
+  title: 'Title',
+  subTitle: "SubTitle"
+}
+
+export { Default, WithFullScreen, WithOpen, WithTitles }

package/src/components/Drawer.tsx

@@ -0,0 +1,87 @@
+import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { MouseEvent, PropsWithChildren, useMemo } from 'react'
+
+export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
+  heightVariant?: 'full' | 'auto'
+  subTitle?: string
+  title?: string
+  widthVariant?: 'full' | 'partial'
+}
+
+export const DrawerEx: React.FC<DrawerExProps> = ({
+  children,
+  heightVariant = 'full',
+  subTitle,
+  title,
+  onClose,
+  widthVariant = 'partial',
+  ...props
+}) => {
+  const variantBasedProps = useMemo(() => {
+    return {
+      PaperProps: {
+        sx: {
+          alignItems: 'center',
+          background: 'transparent',
+          boxShadow: 'none',
+          height: heightVariant === 'full' ? '100%' : 'auto',
+          width: widthVariant === 'partial' ? 'auto' : '100%',
+        },
+      },
+      onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),
+    }
+  }, [heightVariant, onClose, widthVariant])
+
+  return (
+    <Drawer anchor={'top'} onClose={onClose} {...variantBasedProps} {...props}>
+      {/* Trap the event to prevent triggering the backdrop onClick */}
+      <StyledDrawerContentPaper
+        widthVariant={widthVariant}
+        elevation={16}
+        onClick={(event) => event.stopPropagation()}
+        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}
+      >
+        {title || subTitle ? (
+          <FlexCol alignItems="start" gap={1}>
+            {title ? <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography> : null}
+            {subTitle ? (
+              <Typography variant={'subtitle1'} textTransform="none">
+                {subTitle}
+              </Typography>
+            ) : null}
+          </FlexCol>
+        ) : null}
+        {children}
+      </StyledDrawerContentPaper>
+    </Drawer>
+  )
+}
+
+const StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({
+  maxWidth: '100%',
+  overflowX: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+}))
+
+const StyledDrawerContentPaper = styled(Paper, {
+  name: 'StyledDrawerContentPaper',
+  shouldForwardProp: (prop) => !['widthVariant'].includes(prop as string),
+})<DrawerExProps>(({ theme, widthVariant }) => ({
+  alignItems: 'stretch',
+  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2),
+  height: '100%',
+  maxWidth: '100%',
+  overflowX: 'hidden',
+  padding: theme.spacing(3),
+  [theme.breakpoints.up('lg')]: {
+    width: widthVariant === 'full' ? '100%' : '50%',
+  },
+  [theme.breakpoints.up('md')]: {
+    width: widthVariant === 'full' ? '100%' : '75%',
+  },
+}))

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Drawer'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/src/types/images.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
+declare module '*.gif'
+declare module '*.webp'

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["src/index.ts"],
+  "tsconfig": "./tsconfig.typedoc.json"
+}