@kirill.konshin/bootstrap 0.0.1

package/dist/responsiveHelper.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+function useBreakpoint() {
+  const [breakpoint, setBreakpoint] = useState("xs");
+  useEffect(() => {
+    const updateBreakpoint = () => {
+      const width = window.innerWidth;
+      if (width < 576) {
+        setBreakpoint("xs");
+      } else if (width < 768) {
+        setBreakpoint("sm");
+      } else if (width < 992) {
+        setBreakpoint("md");
+      } else if (width < 1200) {
+        setBreakpoint("lg");
+      } else if (width < 1400) {
+        setBreakpoint("xl");
+      } else {
+        setBreakpoint("xxl");
+      }
+    };
+    updateBreakpoint();
+    window.addEventListener("resize", updateBreakpoint);
+    return () => {
+      window.removeEventListener("resize", updateBreakpoint);
+    };
+  }, []);
+  const isMobile = ["xs", "sm", "md"].includes(breakpoint);
+  return { breakpoint, isMobile, isDesktop: !isMobile };
+}
+const ResponsiveHelperBS = function ResponsiveHelperBS2() {
+  return /* @__PURE__ */ jsxs("span", { className: "small position-fixed bottom-0 z-3", style: { fontSize: "9px", right: 1, lineHeight: 1 }, children: [
+    /* @__PURE__ */ jsx("small", { className: "d-block d-sm-none", children: "XS" }),
+    /* @__PURE__ */ jsx("small", { className: "d-none d-sm-block d-md-none", children: "SM" }),
+    /* @__PURE__ */ jsx("small", { className: "d-none d-md-block d-lg-none", children: "MD" }),
+    /* @__PURE__ */ jsx("small", { className: "d-none d-lg-block d-xl-none", children: "LG" }),
+    /* @__PURE__ */ jsx("small", { className: "d-none d-xl-block d-xxl-none", children: "XL" }),
+    /* @__PURE__ */ jsx("small", { className: "d-none d-xxl-block", children: "XXL" })
+  ] });
+};
+export {
+  ResponsiveHelperBS,
+  useBreakpoint
+};
+//# sourceMappingURL=responsiveHelper.js.map

package/dist/responsiveHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveHelper.js","sources":["../src/responsiveHelper.tsx"],"sourcesContent":["'use client';\n\nimport React, { FC, useEffect, useState } from 'react';\n\nexport function useBreakpoint(): {\n    breakpoint: string;\n    isMobile: boolean;\n    isDesktop: boolean;\n} {\n    const [breakpoint, setBreakpoint] = useState('xs');\n\n    useEffect(() => {\n        const updateBreakpoint = () => {\n            const width = window.innerWidth;\n            if (width < 576) {\n                setBreakpoint('xs');\n            } else if (width < 768) {\n                setBreakpoint('sm');\n            } else if (width < 992) {\n                setBreakpoint('md');\n            } else if (width < 1200) {\n                setBreakpoint('lg');\n            } else if (width < 1400) {\n                setBreakpoint('xl');\n            } else {\n                setBreakpoint('xxl');\n            }\n        };\n\n        updateBreakpoint();\n\n        window.addEventListener('resize', updateBreakpoint);\n\n        return () => {\n            window.removeEventListener('resize', updateBreakpoint);\n        };\n    }, []);\n\n    const isMobile = ['xs', 'sm', 'md'].includes(breakpoint);\n\n    return { breakpoint, isMobile, isDesktop: !isMobile };\n}\n\nexport const ResponsiveHelperBS: FC = function ResponsiveHelperBS() {\n    return (\n        <span className=\"small position-fixed bottom-0 z-3\" style={{ fontSize: '9px', right: 1, lineHeight: 1 }}>\n            <small className=\"d-block d-sm-none\">XS</small>\n            <small className=\"d-none d-sm-block d-md-none\">SM</small>\n            <small className=\"d-none d-md-block d-lg-none\">MD</small>\n            <small className=\"d-none d-lg-block d-xl-none\">LG</small>\n            <small className=\"d-none d-xl-block d-xxl-none\">XL</small>\n            <small className=\"d-none d-xxl-block\">XXL</small>\n        </span>\n    );\n};\n"],"names":["ResponsiveHelperBS"],"mappings":";;;AAIO,SAAS,gBAId;AACE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AAEjD,YAAU,MAAM;AACZ,UAAM,mBAAmB,MAAM;AAC3B,YAAM,QAAQ,OAAO;AACrB,UAAI,QAAQ,KAAK;AACb,sBAAc,IAAI;AAAA,MACtB,WAAW,QAAQ,KAAK;AACpB,sBAAc,IAAI;AAAA,MACtB,WAAW,QAAQ,KAAK;AACpB,sBAAc,IAAI;AAAA,MACtB,WAAW,QAAQ,MAAM;AACrB,sBAAc,IAAI;AAAA,MACtB,WAAW,QAAQ,MAAM;AACrB,sBAAc,IAAI;AAAA,MACtB,OAAO;AACH,sBAAc,KAAK;AAAA,MACvB;AAAA,IACJ;AAEA,qBAAA;AAEA,WAAO,iBAAiB,UAAU,gBAAgB;AAElD,WAAO,MAAM;AACT,aAAO,oBAAoB,UAAU,gBAAgB;AAAA,IACzD;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,WAAW,CAAC,MAAM,MAAM,IAAI,EAAE,SAAS,UAAU;AAEvD,SAAO,EAAE,YAAY,UAAU,WAAW,CAAC,SAAA;AAC/C;AAEO,MAAM,qBAAyB,SAASA,sBAAqB;AAChE,SACI,qBAAC,QAAA,EAAK,WAAU,qCAAoC,OAAO,EAAE,UAAU,OAAO,OAAO,GAAG,YAAY,EAAA,GAChG,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAM,WAAU,qBAAoB,UAAA,MAAE;AAAA,IACvC,oBAAC,SAAA,EAAM,WAAU,+BAA8B,UAAA,MAAE;AAAA,IACjD,oBAAC,SAAA,EAAM,WAAU,+BAA8B,UAAA,MAAE;AAAA,IACjD,oBAAC,SAAA,EAAM,WAAU,+BAA8B,UAAA,MAAE;AAAA,IACjD,oBAAC,SAAA,EAAM,WAAU,gCAA+B,UAAA,MAAE;AAAA,IAClD,oBAAC,SAAA,EAAM,WAAU,sBAAqB,UAAA,MAAA,CAAG;AAAA,EAAA,GAC7C;AAER;"}

package/dist/screen.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+export type ScreenProps = {
+    backBtn?: any;
+    backCb?: any;
+    backIcon?: any;
+    forwardBtn?: any;
+    forwardIcon?: any;
+    forwardCb?: any;
+    children: any;
+    contentClassName?: string;
+    noContentPadding?: boolean;
+    header?: any;
+    footer?: any;
+    menu?: any;
+    title?: any;
+    centerContent?: boolean;
+    noHeader?: boolean;
+    noFooter?: boolean;
+    noMenu?: boolean;
+};
+export declare const Screen: FC<ScreenProps>;
+//# sourceMappingURL=screen.d.ts.map

package/dist/screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../src/screen.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAKxC,MAAM,MAAM,WAAW,GAAG;IACtB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAEpB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAsHjC,CAAC"}

package/dist/screen.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo } from "react";
+import { Navbar, Nav, Stack, Button } from "react-bootstrap";
+import { useBreakpoint } from "./responsiveHelper.js";
+import { AdaptiveContainer } from "./adaptiveContainer.js";
+const Screen = memo(function Screen2({
+  backBtn,
+  backCb,
+  backIcon,
+  forwardBtn,
+  forwardIcon,
+  forwardCb,
+  footer,
+  menu,
+  header,
+  children,
+  noContentPadding = false,
+  contentClassName = "",
+  title = "",
+  centerContent = false,
+  noHeader = false,
+  noFooter = false,
+  noMenu = false
+  // noFolders = false,
+}) {
+  backBtn = backBtn || (backCb ? (
+    // backCb === true ? () => router.back() : backCb
+    /* @__PURE__ */ jsx(Button, { onClick: backCb, variant: "nav", children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: backIcon || "bi-chevron-left icon-thick" }),
+      /* @__PURE__ */ jsx("span", { className: "d-none d-lg-inline ms-2", children: "Back" })
+    ] }) })
+  ) : null);
+  forwardBtn = forwardBtn || (forwardCb ? /* @__PURE__ */ jsx(Button, { onClick: forwardCb, children: forwardIcon ? /* @__PURE__ */ jsx("span", { className: forwardIcon }) : "Next" }) : null);
+  const { isMobile, isDesktop } = useBreakpoint();
+  return /* @__PURE__ */ jsxs("div", { className: `d-flex flex-column flex-grow-1 flex-lg-grow-0 ${isMobile ? "vh-100" : ""}`, "data-id": "screen", children: [
+    !noHeader && /* @__PURE__ */ jsxs("header", { className: isDesktop ? "" : "shadow-sm border-bottom", "data-id": "header", children: [
+      isDesktop && !noMenu && menu,
+      title && // (isDesktop ? 'border-bottom' : '')
+      /* @__PURE__ */ jsx(Navbar, { expand: true, className: "main-nav", children: /* @__PURE__ */ jsxs(AdaptiveContainer, { className: "gap-2", children: [
+        backBtn && /* @__PURE__ */ jsx(Nav, { className: "hstack gap-3", children: backBtn }),
+        /* @__PURE__ */ jsx(Navbar.Brand, { className: "me-auto", children: title }),
+        forwardBtn && /* @__PURE__ */ jsx(Nav, { className: "hstack gap-3", children: forwardBtn })
+      ] }) }),
+      header
+    ] }),
+    /* @__PURE__ */ jsxs(
+      AdaptiveContainer,
+      {
+        as: "main",
+        className: [
+          isMobile ? "overflow-y-auto overflow-x-hidden" : "gap-3",
+          `flex-grow-1 d-flex flex-column`,
+          centerContent ? "align-items-center justify-content-center" : "justify-content-start",
+          contentClassName,
+          noContentPadding ? "p-0" : "py-3"
+        ].filter(Boolean).join(" "),
+        "data-id": "content",
+        children: [
+          children,
+          isDesktop && !noFooter && /* @__PURE__ */ jsxs(Fragment, { children: [
+            footer,
+            (forwardBtn || backBtn) && // Navbar screws up the popper
+            /* @__PURE__ */ jsxs(Stack, { gap: 3, direction: "horizontal", children: [
+              backBtn && /* @__PURE__ */ jsx(Nav, { className: "hstack gap-3", children: backBtn }),
+              forwardBtn && /* @__PURE__ */ jsx(Nav, { className: "hstack gap-3 flex-grow-1", children: forwardBtn })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    !noMenu && !noFooter && /* @__PURE__ */ jsxs("footer", { className: "shadow-lg border-top d-block d-lg-none", "data-id": "footer", children: [
+      !noFooter && footer,
+      !noMenu && menu
+    ] })
+  ] });
+});
+export {
+  Screen
+};
+//# sourceMappingURL=screen.js.map

package/dist/screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen.js","sources":["../src/screen.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { Button, Navbar, Nav, Stack } from 'react-bootstrap';\nimport { useBreakpoint } from './responsiveHelper';\nimport { AdaptiveContainer } from './adaptiveContainer';\n\nexport type ScreenProps = {\n    backBtn?: any;\n    backCb?: any;\n    backIcon?: any;\n    forwardBtn?: any;\n    forwardIcon?: any;\n    forwardCb?: any;\n    children: any;\n    contentClassName?: string;\n    noContentPadding?: boolean;\n    header?: any; // resides on top panel in mobile, does not scroll, before content on desktop\n    footer?: any; // resides on bottom menu panel in mobile, does not scroll, or after content on desktop\n    menu?: any;\n    title?: any;\n    centerContent?: boolean;\n    noHeader?: boolean;\n    noFooter?: boolean;\n    noMenu?: boolean;\n    // noFolders?: boolean;\n};\n\n//TODO Footer -> menu\nexport const Screen: FC<ScreenProps> = memo(function Screen({\n    backBtn,\n    backCb,\n    backIcon,\n    forwardBtn,\n    forwardIcon,\n    forwardCb,\n    footer,\n    menu,\n    header,\n    children,\n    noContentPadding = false,\n    contentClassName = '',\n    title = '',\n    centerContent = false,\n    noHeader = false,\n    noFooter = false,\n    noMenu = false,\n    // noFolders = false,\n}) {\n    // const router = useRouter();\n\n    backBtn =\n        backBtn ||\n        (backCb ? (\n            // backCb === true ? () => router.back() : backCb\n            <Button onClick={backCb} variant=\"nav\">\n                {\n                    <>\n                        <span className={backIcon || 'bi-chevron-left icon-thick'} />\n                        <span className=\"d-none d-lg-inline ms-2\">Back</span>\n                    </>\n                }\n            </Button>\n        ) : null);\n\n    forwardBtn =\n        forwardBtn ||\n        (forwardCb ? (\n            <Button onClick={forwardCb}>{forwardIcon ? <span className={forwardIcon}></span> : 'Next'}</Button>\n        ) : null);\n\n    const { isMobile, isDesktop } = useBreakpoint();\n\n    // useLoadingTimeout(1000); // less jerky UI\n\n    return (\n        <div className={`d-flex flex-column flex-grow-1 flex-lg-grow-0 ${isMobile ? 'vh-100' : ''}`} data-id=\"screen\">\n            {/* HEADER */}\n\n            {/* FIXME postition fixed does not assign z-index automatically https://getbootstrap.com/docs/4.0/layout/overview/#z-index*/}\n            {!noHeader && (\n                <header className={isDesktop ? '' : 'shadow-sm border-bottom'} data-id=\"header\">\n                    {/* {!noFolders && <FolderBar />} */}\n\n                    {/* {isDesktop && !noFooter && <Footer />} */}\n                    {isDesktop && !noMenu && menu}\n\n                    {title && (\n                        // (isDesktop ? 'border-bottom' : '')\n                        <Navbar expand className=\"main-nav\">\n                            <AdaptiveContainer className=\"gap-2\">\n                                {backBtn && <Nav className=\"hstack gap-3\">{backBtn}</Nav>}\n                                <Navbar.Brand className=\"me-auto\">{title}</Navbar.Brand>\n                                {forwardBtn && <Nav className=\"hstack gap-3\">{forwardBtn}</Nav>}\n                            </AdaptiveContainer>\n                        </Navbar>\n                    )}\n\n                    {header}\n                </header>\n            )}\n\n            {/* CONTENT */}\n\n            <AdaptiveContainer\n                as=\"main\"\n                className={[\n                    isMobile ? 'overflow-y-auto overflow-x-hidden' : 'gap-3',\n                    `flex-grow-1 d-flex flex-column`,\n                    centerContent ? 'align-items-center justify-content-center' : 'justify-content-start',\n                    contentClassName,\n                    noContentPadding ? 'p-0' : 'py-3',\n                ]\n                    .filter(Boolean)\n                    .join(' ')}\n                data-id=\"content\"\n            >\n                {children}\n\n                {/* Repeat screen buttons at the bottom on desktop */}\n                {isDesktop && !noFooter && (\n                    <>\n                        {footer}\n\n                        {/* TODO Possibly introduce a prop desktopFooterBeforeButtons */}\n                        {(forwardBtn || backBtn) && (\n                            // Navbar screws up the popper\n                            <Stack gap={3} direction=\"horizontal\">\n                                {/* No container since already in container */}\n                                {backBtn && <Nav className=\"hstack gap-3\">{backBtn}</Nav>}\n                                {forwardBtn && <Nav className=\"hstack gap-3 flex-grow-1\">{forwardBtn}</Nav>}\n                            </Stack>\n                        )}\n                    </>\n                )}\n            </AdaptiveContainer>\n\n            {/* FOOTER */}\n\n            {!noMenu && !noFooter && (\n                <footer className=\"shadow-lg border-top d-block d-lg-none\" data-id=\"footer\">\n                    {!noFooter && footer}\n                    {!noMenu && menu}\n                </footer>\n            )}\n        </div>\n    );\n});\n"],"names":["Screen"],"mappings":";;;;;AA2BO,MAAM,SAA0B,KAAK,SAASA,QAAO;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AAAA;AAEb,GAAG;AAGC,YACI,YACC;AAAA;AAAA,wBAEI,QAAA,EAAO,SAAS,QAAQ,SAAQ,OAEzB,UAAA,qBAAA,UAAA,EACI,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAW,YAAY,6BAAA,CAA8B;AAAA,MAC3D,oBAAC,QAAA,EAAK,WAAU,2BAA0B,UAAA,OAAA,CAAI;AAAA,IAAA,EAAA,CAClD,EAAA,CAER;AAAA,MACA;AAER,eACI,eACC,YACG,oBAAC,QAAA,EAAO,SAAS,WAAY,UAAA,cAAc,oBAAC,QAAA,EAAK,WAAW,YAAA,CAAa,IAAU,QAAO,IAC1F;AAER,QAAM,EAAE,UAAU,UAAA,IAAc,cAAA;AAIhC,SACI,qBAAC,SAAI,WAAW,iDAAiD,WAAW,WAAW,EAAE,IAAI,WAAQ,UAIhG,UAAA;AAAA,IAAA,CAAC,iCACG,UAAA,EAAO,WAAW,YAAY,KAAK,2BAA2B,WAAQ,UAIlE,UAAA;AAAA,MAAA,aAAa,CAAC,UAAU;AAAA,MAExB;AAAA,MAEG,oBAAC,UAAO,QAAM,MAAC,WAAU,YACrB,UAAA,qBAAC,mBAAA,EAAkB,WAAU,SACxB,UAAA;AAAA,QAAA,WAAW,oBAAC,KAAA,EAAI,WAAU,gBAAgB,UAAA,SAAQ;AAAA,4BAClD,OAAO,OAAP,EAAa,WAAU,WAAW,UAAA,OAAM;AAAA,QACxC,cAAc,oBAAC,KAAA,EAAI,WAAU,gBAAgB,UAAA,WAAA,CAAW;AAAA,MAAA,EAAA,CAC7D,EAAA,CACJ;AAAA,MAGH;AAAA,IAAA,GACL;AAAA,IAKJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,WAAW;AAAA,UACP,WAAW,sCAAsC;AAAA,UACjD;AAAA,UACA,gBAAgB,8CAA8C;AAAA,UAC9D;AAAA,UACA,mBAAmB,QAAQ;AAAA,QAAA,EAE1B,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACb,WAAQ;AAAA,QAEP,UAAA;AAAA,UAAA;AAAA,UAGA,aAAa,CAAC,YACX,qBAAA,UAAA,EACK,UAAA;AAAA,YAAA;AAAA,aAGC,cAAc;AAAA,YAEZ,qBAAC,OAAA,EAAM,KAAK,GAAG,WAAU,cAEpB,UAAA;AAAA,cAAA,WAAW,oBAAC,KAAA,EAAI,WAAU,gBAAgB,UAAA,SAAQ;AAAA,cAClD,cAAc,oBAAC,KAAA,EAAI,WAAU,4BAA4B,UAAA,WAAA,CAAW;AAAA,YAAA,EAAA,CACzE;AAAA,UAAA,EAAA,CAER;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAMP,CAAC,UAAU,CAAC,iCACR,UAAA,EAAO,WAAU,0CAAyC,WAAQ,UAC9D,UAAA;AAAA,MAAA,CAAC,YAAY;AAAA,MACb,CAAC,UAAU;AAAA,IAAA,EAAA,CAChB;AAAA,EAAA,GAER;AAER,CAAC;"}

package/dist/screen.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Screen } from './screen';
+declare const meta: Meta<typeof Screen>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const LongContent: Story;
+export declare const Loader: Story;
+export declare const Centered: Story;
+export declare const ForwardCb: Story;
+export declare const ForwardIcon: Story;
+export declare const ForwardBtn: Story;
+export declare const HeaderForm: Story;
+//# sourceMappingURL=screen.stories.d.ts.map

package/dist/screen.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen.stories.d.ts","sourceRoot":"","sources":["../src/screen.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AA2ClC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CA8B7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAcpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}

package/dist/toaster.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { ToastProps } from 'react-bootstrap';
+export type ToasterProps = {
+    toast: string | {
+        message: string;
+        title?: string;
+        variant?: 'dark' | 'success' | 'danger';
+    };
+} & ToastProps;
+export declare const Toaster: FC<ToasterProps>;
+//# sourceMappingURL=toaster.d.ts.map

package/dist/toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAY,EAAE,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAS,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,YAAY,GAAG;IACvB,KAAK,EAAE,MAAM,GAAG;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAA;KAAE,CAAC;CAChG,GAAG,UAAU,CAAC;AAEf,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA6BpC,CAAC"}

package/dist/toaster.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Toast } from "react-bootstrap";
+const Toaster = function Toaster2({ toast }) {
+  const [dismissed, setDismissed] = useState(false);
+  const msg = typeof toast === "string" ? toast : toast?.message;
+  const variant = typeof toast === "string" ? "" : toast?.variant;
+  return /* @__PURE__ */ jsxs(
+    Toast,
+    {
+      onClose: () => setDismissed(true),
+      show: !dismissed,
+      delay: 1e4,
+      autohide: true,
+      bg: variant?.toLowerCase(),
+      className: "position-fixed top-50 right-50 min-w-200px z-3",
+      children: [
+        /* @__PURE__ */ jsx(Toast.Header, { children: /* @__PURE__ */ jsx("strong", { className: "me-auto", children: "Notification" }) }),
+        /* @__PURE__ */ jsx(
+          Toast.Body,
+          {
+            className: ["dark", "success", "danger"].includes(variant?.toLowerCase()) ? "text-white" : "",
+            children: msg
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Toaster
+};
+//# sourceMappingURL=toaster.js.map

package/dist/toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.js","sources":["../src/toaster.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, FC } from 'react';\nimport { Toast, ToastProps } from 'react-bootstrap';\n// import { useToaster } from '../redux/toasterSlice';\n\nexport type ToasterProps = {\n    toast: string | { message: string; title?: string; variant?: 'dark' | 'success' | 'danger' };\n} & ToastProps;\n\nexport const Toaster: FC<ToasterProps> = function Toaster({ toast }) {\n    //const { toast, setToast } = useToaster();\n    const [dismissed, setDismissed] = useState(false);\n\n    const msg = typeof toast === 'string' ? toast : toast?.message;\n    // const title = typeof toast === 'string' ? 'Notification' : toast?.title;\n    const variant = typeof toast === 'string' ? '' : toast?.variant;\n\n    return (\n        <Toast\n            onClose={() => setDismissed(true)}\n            show={!dismissed}\n            delay={10000}\n            autohide\n            bg={variant?.toLowerCase()}\n            className=\"position-fixed top-50 right-50 min-w-200px z-3\"\n        >\n            <Toast.Header>\n                <strong className=\"me-auto\">Notification</strong>\n            </Toast.Header>\n            <Toast.Body\n                className={\n                    ['dark', 'success', 'danger'].includes((variant as string)?.toLowerCase()) ? 'text-white' : ''\n                }\n            >\n                {msg}\n            </Toast.Body>\n        </Toast>\n    );\n};\n"],"names":["Toaster"],"mappings":";;;;AAUO,MAAM,UAA4B,SAASA,SAAQ,EAAE,SAAS;AAEjE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,MAAM,OAAO,UAAU,WAAW,QAAQ,OAAO;AAEvD,QAAM,UAAU,OAAO,UAAU,WAAW,KAAK,OAAO;AAExD,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,SAAS,MAAM,aAAa,IAAI;AAAA,MAChC,MAAM,CAAC;AAAA,MACP,OAAO;AAAA,MACP,UAAQ;AAAA,MACR,IAAI,SAAS,YAAA;AAAA,MACb,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,MAAM,QAAN,EACG,UAAA,oBAAC,YAAO,WAAU,WAAU,0BAAY,EAAA,CAC5C;AAAA,QACA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACG,WACI,CAAC,QAAQ,WAAW,QAAQ,EAAE,SAAU,SAAoB,YAAA,CAAa,IAAI,eAAe;AAAA,YAG/F,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/toaster.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Toaster } from './toaster';
+declare const meta: Meta<typeof Toaster>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Object: Story;
+//# sourceMappingURL=toaster.stories.d.ts.map

package/dist/toaster.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.stories.d.ts","sourceRoot":"","sources":["../src/toaster.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAGpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAS9B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC"}

package/dist/useModal.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { ModalProps, OffcanvasProps } from 'react-bootstrap';
+export type UseModalArgs = {
+    onClose?: any;
+    showOnMount?: boolean;
+};
+export type UseModalProps = {
+    children?: any;
+    show?: boolean;
+    onSubmit?: (e: any) => void;
+    submitButton?: string | any;
+    cancelButton?: string | any;
+    offcanvas?: boolean;
+    title?: string | any;
+    containerProps?: ModalProps | OffcanvasProps;
+};
+export declare function useModal({ onClose, showOnMount }?: UseModalArgs): {
+    show: boolean | undefined;
+    close: () => void;
+    open: () => void;
+    ModalDialog: FC<ModalProps>;
+};
+//# sourceMappingURL=useModal.d.ts.map

package/dist/useModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../src/useModal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAuC,EAAE,EAAQ,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAiB,UAAU,EAAa,cAAc,EAAS,MAAM,iBAAiB,CAAC;AAE9F,MAAM,MAAM,YAAY,GAAG;IAAE,OAAO,CAAC,EAAE,GAAG,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG;IACxB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;IACrB,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;CAChD,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,GAAE,YAAiB,GAAG;IACnE,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,WAAW,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC;CAC/B,CAuEA"}

package/dist/useModal.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, memo } from "react";
+import { Offcanvas, Modal, Stack, Button } from "react-bootstrap";
+function useModal({ onClose, showOnMount } = {}) {
+  const [show, setShow] = useState(showOnMount);
+  const close = useCallback(() => {
+    setShow(false);
+    onClose?.();
+  }, [onClose]);
+  const open = useCallback(() => setShow(true), []);
+  const defaultOnSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      close();
+    },
+    [close]
+  );
+  const ModalDialog = useMemo(
+    () => memo(function ModalDialog2({
+      children,
+      show: show2,
+      onSubmit = defaultOnSubmit,
+      submitButton = "Done",
+      cancelButton = "Cancel",
+      offcanvas = false,
+      title = null,
+      containerProps = {}
+    }) {
+      const Container = offcanvas ? Offcanvas : Modal;
+      const containerDefaultProps = offcanvas ? { style: { maxWidth: "85%" } } : {};
+      const Body = offcanvas ? Offcanvas.Body : Modal.Body;
+      const Header = offcanvas ? Offcanvas.Header : Modal.Header;
+      const Title = offcanvas ? Offcanvas.Title : Modal.Title;
+      return /* @__PURE__ */ jsx(Container, { ...{ ...containerDefaultProps, ...containerProps }, show: show2, onHide: close, children: /* @__PURE__ */ jsxs("form", { onSubmit, children: [
+        title && /* @__PURE__ */ jsx(Header, { closeButton: true, children: /* @__PURE__ */ jsx(Title, { children: title }) }),
+        /* @__PURE__ */ jsx(Body, { as: Stack, gap: 3, children: show2 && children }),
+        !offcanvas && (submitButton || cancelButton) && /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+          cancelButton && /* @__PURE__ */ jsx(Button, { variant: "outline-secondary", onClick: close, children: cancelButton }),
+          submitButton && /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "submit", children: submitButton })
+        ] })
+      ] }) });
+    }),
+    [close, defaultOnSubmit]
+  );
+  return { show, close, open, ModalDialog };
+}
+export {
+  useModal
+};
+//# sourceMappingURL=useModal.js.map

package/dist/useModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.js","sources":["../src/useModal.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState, JSX, FC, memo } from 'react';\nimport { Button, Modal, ModalProps, Offcanvas, OffcanvasProps, Stack } from 'react-bootstrap';\n\nexport type UseModalArgs = { onClose?: any; showOnMount?: boolean };\n\nexport type UseModalProps = {\n    children?: any;\n    show?: boolean;\n    onSubmit?: (e: any) => void;\n    submitButton?: string | any;\n    cancelButton?: string | any;\n    offcanvas?: boolean;\n    title?: string | any;\n    containerProps?: ModalProps | OffcanvasProps;\n};\n\nexport function useModal({ onClose, showOnMount }: UseModalArgs = {}): {\n    show: boolean | undefined;\n    close: () => void;\n    open: () => void;\n    ModalDialog: FC<ModalProps>;\n} {\n    const [show, setShow] = useState(showOnMount);\n\n    const close = useCallback((): void => {\n        setShow(false);\n        onClose?.();\n    }, [onClose]);\n\n    const open = useCallback((): void => setShow(true), []);\n\n    const defaultOnSubmit = useCallback(\n        (e: any) => {\n            e.preventDefault();\n            close();\n        },\n        [close],\n    );\n\n    const ModalDialog = useMemo(\n        () =>\n            memo(function ModalDialog({\n                children,\n                show,\n                onSubmit = defaultOnSubmit,\n                submitButton = 'Done',\n                cancelButton = 'Cancel',\n                offcanvas = false,\n                title = null as any,\n                containerProps = {},\n            }: ModalProps) {\n                const Container = offcanvas ? Offcanvas : Modal;\n                const containerDefaultProps = offcanvas ? { style: { maxWidth: '85%' } } : {};\n                const Body = offcanvas ? Offcanvas.Body : Modal.Body;\n                const Header = offcanvas ? Offcanvas.Header : Modal.Header;\n                const Title = offcanvas ? Offcanvas.Title : Modal.Title;\n\n                return (\n                    <Container {...{ ...containerDefaultProps, ...containerProps }} show={show} onHide={close}>\n                        <form onSubmit={onSubmit}>\n                            {title && (\n                                <Header closeButton>\n                                    <Title>{title}</Title>\n                                </Header>\n                            )}\n\n                            <Body as={Stack} gap={3}>\n                                {show && children}\n                            </Body>\n\n                            {!offcanvas && (submitButton || cancelButton) && (\n                                <Modal.Footer>\n                                    {cancelButton && (\n                                        <Button variant=\"outline-secondary\" onClick={close}>\n                                            {cancelButton}\n                                        </Button>\n                                    )}\n                                    {submitButton && (\n                                        <Button variant=\"secondary\" type=\"submit\">\n                                            {submitButton}\n                                        </Button>\n                                    )}\n                                </Modal.Footer>\n                            )}\n                        </form>\n                    </Container>\n                );\n            }),\n        [close, defaultOnSubmit],\n    );\n\n    return { show, close, open, ModalDialog };\n}\n"],"names":["ModalDialog","show"],"mappings":";;;AAgBO,SAAS,SAAS,EAAE,SAAS,YAAA,IAA8B,CAAA,GAKhE;AACE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAE5C,QAAM,QAAQ,YAAY,MAAY;AAClC,YAAQ,KAAK;AACb,cAAA;AAAA,EACJ,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,OAAO,YAAY,MAAY,QAAQ,IAAI,GAAG,CAAA,CAAE;AAEtD,QAAM,kBAAkB;AAAA,IACpB,CAAC,MAAW;AACR,QAAE,eAAA;AACF,YAAA;AAAA,IACJ;AAAA,IACA,CAAC,KAAK;AAAA,EAAA;AAGV,QAAM,cAAc;AAAA,IAChB,MACI,KAAK,SAASA,aAAY;AAAA,MACtB;AAAA,MACA,MAAAC;AAAAA,MACA,WAAW;AAAA,MACX,eAAe;AAAA,MACf,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,iBAAiB,CAAA;AAAA,IAAC,GACP;AACX,YAAM,YAAY,YAAY,YAAY;AAC1C,YAAM,wBAAwB,YAAY,EAAE,OAAO,EAAE,UAAU,MAAA,EAAM,IAAM,CAAA;AAC3E,YAAM,OAAO,YAAY,UAAU,OAAO,MAAM;AAChD,YAAM,SAAS,YAAY,UAAU,SAAS,MAAM;AACpD,YAAM,QAAQ,YAAY,UAAU,QAAQ,MAAM;AAElD,aACI,oBAAC,WAAA,EAAW,GAAG,EAAE,GAAG,uBAAuB,GAAG,kBAAkB,MAAMA,OAAM,QAAQ,OAChF,UAAA,qBAAC,UAAK,UACD,UAAA;AAAA,QAAA,6BACI,QAAA,EAAO,aAAW,MACf,UAAA,oBAAC,OAAA,EAAO,iBAAM,EAAA,CAClB;AAAA,QAGJ,oBAAC,QAAK,IAAI,OAAO,KAAK,GACjB,UAAAA,SAAQ,UACb;AAAA,QAEC,CAAC,cAAc,gBAAgB,iBAC5B,qBAAC,MAAM,QAAN,EACI,UAAA;AAAA,UAAA,oCACI,QAAA,EAAO,SAAQ,qBAAoB,SAAS,OACxC,UAAA,cACL;AAAA,UAEH,gBACG,oBAAC,QAAA,EAAO,SAAQ,aAAY,MAAK,UAC5B,UAAA,aAAA,CACL;AAAA,QAAA,EAAA,CAER;AAAA,MAAA,EAAA,CAER,EAAA,CACJ;AAAA,IAER,CAAC;AAAA,IACL,CAAC,OAAO,eAAe;AAAA,EAAA;AAG3B,SAAO,EAAE,MAAM,OAAO,MAAM,YAAA;AAChC;"}

package/dist/useModal.stories.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { UseModalProps } from './useModal';
+declare const meta: Meta<FC<UseModalProps>>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Offcanvas: Story;
+//# sourceMappingURL=useModal.stories.d.ts.map

package/dist/useModal.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.stories.d.ts","sourceRoot":"","sources":["../src/useModal.stories.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAY,aAAa,EAAE,MAAM,YAAY,CAAC;AAIrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,CA8BjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC"}

package/dist/useWrappedForm.d.ts

@@ -0,0 +1,14 @@
+import { useForm, FormState } from 'react-hook-form';
+export declare const isFormLoading: (formState: FormState<any>) => boolean;
+export declare const useWrappedForm: typeof useForm;
+/**
+ * Issue #3: Submit event still propagates to parent when using portal
+ * https://reactjs.org/docs/portals.html#event-bubbling-through-portals
+ * Event bubbling goes through React DOM instead of HTML DOM
+ * Portals don't have an effect on this one, we need to stop event propagation
+ * This should be our default form handling method
+ * https://codesandbox.io/s/react-hook-form-nested-portal-6x3fvy?file=/src/App.tsx:1905-2261
+ * https://github.com/react-hook-form/react-hook-form/issues/1005#issuecomment-988380981
+ */
+export declare const stopPropagation: (callback: any) => (e: Event) => void;
+//# sourceMappingURL=useWrappedForm.d.ts.map

package/dist/useWrappedForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWrappedForm.d.ts","sourceRoot":"","sources":["../src/useWrappedForm.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGrD,eAAO,MAAM,aAAa,GAAI,WAAW,SAAS,CAAC,GAAG,CAAC,KAAG,OAAwD,CAAC;AAEnH,eAAO,MAAM,cAAc,EAAE,OAAO,OAmBnC,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GACvB,UAAU,GAAG,MACb,GAAG,KAAK,KAAG,IAIX,CAAC"}

package/dist/useWrappedForm.js

@@ -0,0 +1,32 @@
+import { useForm } from "react-hook-form";
+import { useCallback } from "react";
+const isFormLoading = (formState) => formState.isLoading || formState.isSubmitting;
+const useWrappedForm = (options) => {
+  const form = useForm(options);
+  const handleSubmit = useCallback(
+    (onSubmit, onError) => {
+      const wrappedSubmit = async (data) => {
+        try {
+          await onSubmit(data);
+        } catch (e) {
+          form.setError("root", { type: "server", message: e.message });
+          console.error("Error submitting form", e);
+        }
+      };
+      return form.handleSubmit(wrappedSubmit, onError);
+    },
+    [form]
+  );
+  return { ...form, handleSubmit };
+};
+const stopPropagation = (callback) => (e) => {
+  e.stopPropagation();
+  e.preventDefault();
+  callback(e);
+};
+export {
+  isFormLoading,
+  stopPropagation,
+  useWrappedForm
+};
+//# sourceMappingURL=useWrappedForm.js.map

package/dist/useWrappedForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWrappedForm.js","sources":["../src/useWrappedForm.ts"],"sourcesContent":["import { useForm, FormState } from 'react-hook-form';\nimport { useCallback } from 'react';\n\nexport const isFormLoading = (formState: FormState<any>): boolean => formState.isLoading || formState.isSubmitting;\n\nexport const useWrappedForm: typeof useForm = (options) => {\n    const form = useForm(options);\n\n    const handleSubmit: typeof form.handleSubmit = useCallback(\n        (onSubmit, onError) => {\n            const wrappedSubmit: typeof onSubmit = async (data) => {\n                try {\n                    await onSubmit(data);\n                } catch (e) {\n                    form.setError('root', { type: 'server', message: (e as Error).message });\n                    console.error('Error submitting form', e);\n                }\n            };\n            return form.handleSubmit(wrappedSubmit, onError);\n        },\n        [form],\n    );\n\n    return { ...form, handleSubmit };\n};\n\n/**\n * Issue #3: Submit event still propagates to parent when using portal\n * https://reactjs.org/docs/portals.html#event-bubbling-through-portals\n * Event bubbling goes through React DOM instead of HTML DOM\n * Portals don't have an effect on this one, we need to stop event propagation\n * This should be our default form handling method\n * https://codesandbox.io/s/react-hook-form-nested-portal-6x3fvy?file=/src/App.tsx:1905-2261\n * https://github.com/react-hook-form/react-hook-form/issues/1005#issuecomment-988380981\n */\nexport const stopPropagation =\n    (callback: any) =>\n    (e: Event): void => {\n        e.stopPropagation();\n        e.preventDefault();\n        callback(e);\n    };\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAgB,CAAC,cAAuC,UAAU,aAAa,UAAU;AAE/F,MAAM,iBAAiC,CAAC,YAAY;AACvD,QAAM,OAAO,QAAQ,OAAO;AAE5B,QAAM,eAAyC;AAAA,IAC3C,CAAC,UAAU,YAAY;AACnB,YAAM,gBAAiC,OAAO,SAAS;AACnD,YAAI;AACA,gBAAM,SAAS,IAAI;AAAA,QACvB,SAAS,GAAG;AACR,eAAK,SAAS,QAAQ,EAAE,MAAM,UAAU,SAAU,EAAY,SAAS;AACvE,kBAAQ,MAAM,yBAAyB,CAAC;AAAA,QAC5C;AAAA,MACJ;AACA,aAAO,KAAK,aAAa,eAAe,OAAO;AAAA,IACnD;AAAA,IACA,CAAC,IAAI;AAAA,EAAA;AAGT,SAAO,EAAE,GAAG,MAAM,aAAA;AACtB;AAWO,MAAM,kBACT,CAAC,aACD,CAAC,MAAmB;AAChB,IAAE,gBAAA;AACF,IAAE,eAAA;AACF,WAAS,CAAC;AACd;"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@kirill.konshin/bootstrap",
+  "description": "Utilities",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "----- BUILD -----": "",
+    "clean": "rm -rf dist .tscache tsconfig.tsbuildinfo",
+    "build": "vite build",
+    "build:index": "cti create ./src",
+    "build:check-types": "attw --pack .",
+    "start": "yarn build --watch",
+    "wait": "wait-on ./dist/index.js",
+    "----- TEST -----": "",
+    "test:disabled": "vitest run --coverage",
+    "test:watch": "vitest watch --coverage",
+    "----- STORYBOOK -----": "",
+    "storybook:start": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "react-hook-form": "^7.62.0"
+  },
+  "devDependencies": {
+    "@kirill.konshin/utils-private": "*",
+    "bootstrap": "^5.3.7",
+    "bootstrap-icons": "^1.13.1",
+    "react": "^19.1.1",
+    "react-bootstrap": "^2.10.10"
+  },
+  "peerDependencies": {
+    "bootstrap": "^5",
+    "bootstrap-icons": "^1",
+    "react": "^19",
+    "react-bootstrap": "^2"
+  },
+  "peerDependenciesMeta": {
+    "bootstrap": {
+      "optional": true
+    },
+    "bootstrap-icons": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-bootstrap": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Kirill Konshin <kirill@konshin.org> (https://konshin.org)",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}

package/src/adaptiveContainer.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import { Container, ContainerProps } from 'react-bootstrap';
+import { useBreakpoint } from './responsiveHelper';
+
+export const AdaptiveContainer: FC<ContainerProps> = function AdaptiveContainer({ children, ...props }) {
+    const { isMobile } = useBreakpoint();
+    return (
+        <Container fluid={isMobile} {...props}>
+            {children}
+        </Container>
+    );
+};

package/src/controls.stories.tsx

@@ -0,0 +1,62 @@
+import React, { cloneElement, useCallback, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Select, Control, Range, Checkbox } from './controls';
+
+const defaultOptions = { num: 1, bool: false, select: 'bar' };
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Control> = {
+    title: 'Bootstrap / Controls',
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: { options: { ...defaultOptions }, setOptions: fn(), defaultOptions: { ...defaultOptions }, name: 'unused' },
+    render: function Demo(args) {
+        const [options, setOptionsRaw] = useState(args.options);
+
+        const setOptions = useCallback(
+            (options: any) =>
+                setOptionsRaw((currentOptions) => {
+                    return { ...currentOptions, ...options };
+                }),
+            [],
+        );
+
+        const controlProps = { options, setOptions, defaultOptions };
+
+        const { children, name, ...safeArgs } = args;
+
+        return <div style={{ width: '300px' }}>{cloneElement(children as any, { ...safeArgs, ...controlProps })}</div>;
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const RangeControl: Story = {
+    args: {
+        children: <Range name="Num" min={0} max={1} />,
+    },
+};
+
+export const CheckboxControl: Story = {
+    args: {
+        children: <Checkbox name="Bool" />,
+    },
+};
+
+export const SelectControl: Story = {
+    args: {
+        children: (
+            <Select name="Select">
+                <option value="foo">Foo</option>
+                <option value="bar">Bar</option>
+            </Select>
+        ),
+    },
+};