@kirill.konshin/bootstrap 0.0.1 → 0.0.2

package/.ctirc

@@ -1,11 +1,20 @@
 {
-  "addNewline": true,
-  "fileExcludePatterns": [
-    "*.stories.*",
-    "*.test.*",
-    "*.fixture.*"
-  ],
-  "verbose": false,
-  "withoutBackupFile": true,
-  "withoutComment": true
-}
+  "options": [
+    {
+      "mode": "create",
+      "project": "tsconfig.json",
+      "include": "src/**/*.{ts,tsx}",
+      "exclude": [
+        "**/*.stories.*",
+        "**/*.test.*",
+        "**/*.fixture.*"
+      ],
+      "startFrom": "src",
+      "backup": false,
+      "overwrite": true,
+      "generationStyle": "default-alias-named-star",
+      "output": "src",
+      "verbose": true
+    }
+  ]
+}

package/.turbo/turbo-build.log

@@ -1,24 +1,31 @@
 vite v7.0.6 building SSR bundle for production...
-create succeeded: /home/runner/work/utils/utils/packages/bootstrap/src
+- ctix 'create' mode start, ...
+✔ /home/runner/work/utils/utils/packages/bootstrap/tsconfig.json loading complete!
+✔ analysis export statements completed!
+- build "index.ts" file start
+- output file exists check, ...
+
+
+✔ ctix 'create' mode complete!
 transforming...
 ✓ 13 modules transformed.
 rendering chunks...
 
 [vite:dts] Start generate declaration files...
-dist/adaptiveContainer.js  0.42 kB │ map: 0.71 kB
-dist/globalLoading.js      0.45 kB │ map: 0.92 kB
+dist/adaptiveContainer.js  0.46 kB │ map: 0.80 kB
+dist/globalLoading.js      0.49 kB │ map: 0.94 kB
 dist/loading.js            0.59 kB │ map: 1.12 kB
-dist/error.js              0.81 kB │ map: 1.70 kB
-dist/field.js              0.81 kB │ map: 1.66 kB
+dist/error.js              0.84 kB │ map: 1.72 kB
+dist/field.js              0.85 kB │ map: 1.68 kB
 dist/useWrappedForm.js     0.90 kB │ map: 2.27 kB
 dist/index.js              0.97 kB │ map: 0.10 kB
-dist/toaster.js            1.08 kB │ map: 2.12 kB
-dist/footer.js             1.58 kB │ map: 2.87 kB
-dist/responsiveHelper.js   1.82 kB │ map: 3.02 kB
-dist/useModal.js           2.08 kB │ map: 4.90 kB
+dist/toaster.js            1.09 kB │ map: 2.14 kB
+dist/footer.js             1.62 kB │ map: 2.97 kB
+dist/responsiveHelper.js   1.83 kB │ map: 3.04 kB
+dist/useModal.js           2.08 kB │ map: 4.91 kB
 dist/controls.js           2.69 kB │ map: 5.90 kB
 dist/screen.js             3.42 kB │ map: 7.17 kB
-[vite:dts] Declaration files built in 3375ms.
+[vite:dts] Declaration files built in 3640ms.
 
-✓ built in 4.10s
+✓ built in 7.24s
 Updated package.json with exports

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @kirill.konshin/bootstrap
+
+## 0.0.2
+
+### Patch Changes
+
+- 63fdba8: Agent-assisted refactoring
+- 63fdba8: Divided core to browser/node/worker-specific packages, CTIX upgrade, etc.

package/dist/adaptiveContainer.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
 import { ContainerProps } from 'react-bootstrap';
-export declare const AdaptiveContainer: FC<ContainerProps>;
+export type AdaptiveContainerProps = ContainerProps;
+export declare const AdaptiveContainer: FC<AdaptiveContainerProps>;
 //# sourceMappingURL=adaptiveContainer.d.ts.map

package/dist/adaptiveContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"adaptiveContainer.d.ts","sourceRoot":"","sources":["../src/adaptiveContainer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAa,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG5D,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,cAAc,CAOhD,CAAC"}
+{"version":3,"file":"adaptiveContainer.d.ts","sourceRoot":"","sources":["../src/adaptiveContainer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AACxC,OAAO,EAAa,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG5D,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAOvD,CAAC"}

package/dist/adaptiveContainer.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { Container } from "react-bootstrap";
 import { useBreakpoint } from "./responsiveHelper.js";
-const AdaptiveContainer = function AdaptiveContainer2({ children, ...props }) {
+const AdaptiveContainer = memo(function AdaptiveContainer2({ children, ...props }) {
   const { isMobile } = useBreakpoint();
   return /* @__PURE__ */ jsx(Container, { fluid: isMobile, ...props, children });
-};
+});
 export {
   AdaptiveContainer
 };

package/dist/adaptiveContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"adaptiveContainer.js","sources":["../src/adaptiveContainer.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Container, ContainerProps } from 'react-bootstrap';\nimport { useBreakpoint } from './responsiveHelper';\n\nexport const AdaptiveContainer: FC<ContainerProps> = function AdaptiveContainer({ children, ...props }) {\n    const { isMobile } = useBreakpoint();\n    return (\n        <Container fluid={isMobile} {...props}>\n            {children}\n        </Container>\n    );\n};\n"],"names":["AdaptiveContainer"],"mappings":";;;AAIO,MAAM,oBAAwC,SAASA,mBAAkB,EAAE,UAAU,GAAG,SAAS;AACpG,QAAM,EAAE,SAAA,IAAa,cAAA;AACrB,6BACK,WAAA,EAAU,OAAO,UAAW,GAAG,OAC3B,UACL;AAER;"}
+{"version":3,"file":"adaptiveContainer.js","sources":["../src/adaptiveContainer.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { Container, ContainerProps } from 'react-bootstrap';\nimport { useBreakpoint } from './responsiveHelper';\n\nexport type AdaptiveContainerProps = ContainerProps;\n\nexport const AdaptiveContainer: FC<AdaptiveContainerProps> = memo(function AdaptiveContainer({ children, ...props }) {\n    const { isMobile } = useBreakpoint();\n    return (\n        <Container fluid={isMobile} {...props}>\n            {children}\n        </Container>\n    );\n});\n"],"names":["AdaptiveContainer"],"mappings":";;;;AAMO,MAAM,oBAAgD,KAAK,SAASA,mBAAkB,EAAE,UAAU,GAAG,SAAS;AACjH,QAAM,EAAE,SAAA,IAAa,cAAA;AACrB,6BACK,WAAA,EAAU,OAAO,UAAW,GAAG,OAC3B,UACL;AAER,CAAC;"}

package/dist/adaptiveContainer.stories.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"adaptiveContainer.stories.d.ts","sourceRoot":"","sources":["../src/adaptiveContainer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAWxC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAC"}

package/dist/error.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../src/error.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAA6B,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEzE,MAAM,MAAM,eAAe,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,GAAG,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAwB1C,CAAC"}
+{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../src/error.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AACxC,OAAO,EAA6B,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEzE,MAAM,MAAM,eAAe,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,GAAG,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IACpB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAwBzC,CAAC"}

package/dist/error.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { Alert, Button } from "react-bootstrap";
-const ErrorAlert = function ErrorAlert2({ onRetry, children, buttonProps, ...props }) {
+const ErrorAlert = memo(function ErrorAlert2({ onRetry, children, buttonProps, ...props }) {
   if (!children) return null;
   return /* @__PURE__ */ jsxs(Alert, { variant: "danger", ...props, children: [
     /* @__PURE__ */ jsx("div", { children: children.message || children.toString() }),
@@ -20,7 +21,7 @@ const ErrorAlert = function ErrorAlert2({ onRetry, children, buttonProps, ...pro
       }
     ) })
   ] });
-};
+});
 export {
   ErrorAlert
 };

package/dist/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","sources":["../src/error.tsx"],"sourcesContent":["'use client';\n\nimport React, { FC } from 'react';\nimport { Alert, AlertProps, Button, ButtonProps } from 'react-bootstrap';\n\nexport type ErrorAlertProps = {\n    children?: Error | string | any;\n    onRetry?: () => any;\n    buttonProps?: ButtonProps;\n};\n\n//TODO Create MUI-specific?\nexport const ErrorAlert: FC<ErrorAlertProps> = function ErrorAlert({ onRetry, children, buttonProps, ...props }) {\n    if (!children) return null;\n\n    return (\n        <Alert variant=\"danger\" {...props}>\n            <div>{children.message || children.toString()}</div>\n            {onRetry && (\n                <div>\n                    <Button\n                        variant=\"link\"\n                        className=\"alert-link\"\n                        {...buttonProps}\n                        onClick={(e) => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            onRetry();\n                        }}\n                    >\n                        Retry\n                    </Button>\n                </div>\n            )}\n        </Alert>\n    );\n};\n"],"names":["ErrorAlert"],"mappings":";;;AAYO,MAAM,aAAkC,SAASA,YAAW,EAAE,SAAS,UAAU,aAAa,GAAG,SAAS;AAC7G,MAAI,CAAC,SAAU,QAAO;AAEtB,SACI,qBAAC,OAAA,EAAM,SAAQ,UAAU,GAAG,OACxB,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAK,UAAA,SAAS,WAAW,SAAS,YAAW;AAAA,IAC7C,+BACI,OAAA,EACG,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,SAAQ;AAAA,QACR,WAAU;AAAA,QACT,GAAG;AAAA,QACJ,SAAS,CAAC,MAAM;AACZ,YAAE,eAAA;AACF,YAAE,gBAAA;AACF,kBAAA;AAAA,QACJ;AAAA,QACH,UAAA;AAAA,MAAA;AAAA,IAAA,EAED,CACJ;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"error.js","sources":["../src/error.tsx"],"sourcesContent":["'use client';\n\nimport React, { FC, memo } from 'react';\nimport { Alert, AlertProps, Button, ButtonProps } from 'react-bootstrap';\n\nexport type ErrorAlertProps = {\n    children?: Error | string | any;\n    onRetry?: () => any;\n    buttonProps?: ButtonProps;\n};\n\n//TODO Create MUI-specific?\nexport const ErrorAlert: FC<ErrorAlertProps> = memo(function ErrorAlert({ onRetry, children, buttonProps, ...props }) {\n    if (!children) return null;\n\n    return (\n        <Alert variant=\"danger\" {...props}>\n            <div>{children.message || children.toString()}</div>\n            {onRetry && (\n                <div>\n                    <Button\n                        variant=\"link\"\n                        className=\"alert-link\"\n                        {...buttonProps}\n                        onClick={(e) => {\n                            e.preventDefault();\n                            e.stopPropagation();\n                            onRetry();\n                        }}\n                    >\n                        Retry\n                    </Button>\n                </div>\n            )}\n        </Alert>\n    );\n});\n"],"names":["ErrorAlert"],"mappings":";;;;AAYO,MAAM,aAAkC,KAAK,SAASA,YAAW,EAAE,SAAS,UAAU,aAAa,GAAG,SAAS;AAClH,MAAI,CAAC,SAAU,QAAO;AAEtB,SACI,qBAAC,OAAA,EAAM,SAAQ,UAAU,GAAG,OACxB,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAK,UAAA,SAAS,WAAW,SAAS,YAAW;AAAA,IAC7C,+BACI,OAAA,EACG,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,SAAQ;AAAA,QACR,WAAU;AAAA,QACT,GAAG;AAAA,QACJ,SAAS,CAAC,MAAM;AACZ,YAAE,eAAA;AACF,YAAE,gBAAA;AACF,kBAAA;AAAA,QACJ;AAAA,QACH,UAAA;AAAA,MAAA;AAAA,IAAA,EAED,CACJ;AAAA,EAAA,GAER;AAER,CAAC;"}

package/dist/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEtF,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG;IAC3C,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAyB1C,CAAC"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AACxC,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEtF,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG;IAC3C,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAyBzC,CAAC"}

package/dist/field.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { Form } from "react-bootstrap";
-const FieldGroup = function FieldGroup2({
+const FieldGroup = memo(function FieldGroup2({
   label,
   labelProps = {},
   text,
@@ -22,7 +23,7 @@ const FieldGroup = function FieldGroup2({
     text && !horizontal && /* @__PURE__ */ jsx(Form.Text, { ...textProps, children: text }),
     " "
   ] });
-};
+});
 export {
   FieldGroup
 };

package/dist/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../src/field.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Form, FormGroupProps, FormLabelProps, FormTextProps } from 'react-bootstrap';\n\nexport type FieldGroupProps = FormGroupProps & {\n    label?: any;\n    labelProps?: FormLabelProps;\n    text?: any;\n    textProps?: FormTextProps;\n    horizontal?: boolean;\n};\n\nexport const FieldGroup: FC<FieldGroupProps> = function FieldGroup({\n    label,\n    labelProps = {},\n    text,\n    textProps = {},\n    horizontal,\n    children,\n    ...props\n}) {\n    if (horizontal) {\n        props.className = 'hstack gap-3 ' + (props.className || '');\n        labelProps.className = 'm-0 ' + (labelProps.className || '');\n    }\n\n    if (text && horizontal) {\n        throw new Error('Cannot use text and horizontal together');\n    }\n\n    return (\n        <Form.Group {...props}>\n            {label && <Form.Label {...labelProps}>{label}</Form.Label>}\n            {children}\n            {text && !horizontal && <Form.Text {...textProps}>{text}</Form.Text>}{' '}\n        </Form.Group>\n    );\n};\n"],"names":["FieldGroup"],"mappings":";;AAWO,MAAM,aAAkC,SAASA,YAAW;AAAA,EAC/D;AAAA,EACA,aAAa,CAAA;AAAA,EACb;AAAA,EACA,YAAY,CAAA;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAG;AACC,MAAI,YAAY;AACZ,UAAM,YAAY,mBAAmB,MAAM,aAAa;AACxD,eAAW,YAAY,UAAU,WAAW,aAAa;AAAA,EAC7D;AAEA,MAAI,QAAQ,YAAY;AACpB,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC7D;AAEA,SACI,qBAAC,KAAK,OAAL,EAAY,GAAG,OACX,UAAA;AAAA,IAAA,6BAAU,KAAK,OAAL,EAAY,GAAG,YAAa,UAAA,OAAM;AAAA,IAC5C;AAAA,IACA,QAAQ,CAAC,cAAc,oBAAC,KAAK,MAAL,EAAW,GAAG,WAAY,UAAA,MAAK;AAAA,IAAc;AAAA,EAAA,GAC1E;AAER;"}
+{"version":3,"file":"field.js","sources":["../src/field.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { Form, FormGroupProps, FormLabelProps, FormTextProps } from 'react-bootstrap';\n\nexport type FieldGroupProps = FormGroupProps & {\n    label?: any;\n    labelProps?: FormLabelProps;\n    text?: any;\n    textProps?: FormTextProps;\n    horizontal?: boolean;\n};\n\nexport const FieldGroup: FC<FieldGroupProps> = memo(function FieldGroup({\n    label,\n    labelProps = {},\n    text,\n    textProps = {},\n    horizontal,\n    children,\n    ...props\n}) {\n    if (horizontal) {\n        props.className = 'hstack gap-3 ' + (props.className || '');\n        labelProps.className = 'm-0 ' + (labelProps.className || '');\n    }\n\n    if (text && horizontal) {\n        throw new Error('Cannot use text and horizontal together');\n    }\n\n    return (\n        <Form.Group {...props}>\n            {label && <Form.Label {...labelProps}>{label}</Form.Label>}\n            {children}\n            {text && !horizontal && <Form.Text {...textProps}>{text}</Form.Text>}{' '}\n        </Form.Group>\n    );\n});\n"],"names":["FieldGroup"],"mappings":";;;AAWO,MAAM,aAAkC,KAAK,SAASA,YAAW;AAAA,EACpE;AAAA,EACA,aAAa,CAAA;AAAA,EACb;AAAA,EACA,YAAY,CAAA;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAG;AACC,MAAI,YAAY;AACZ,UAAM,YAAY,mBAAmB,MAAM,aAAa;AACxD,eAAW,YAAY,UAAU,WAAW,aAAa;AAAA,EAC7D;AAEA,MAAI,QAAQ,YAAY;AACpB,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC7D;AAEA,SACI,qBAAC,KAAK,OAAL,EAAY,GAAG,OACX,UAAA;AAAA,IAAA,6BAAU,KAAK,OAAL,EAAY,GAAG,YAAa,UAAA,OAAM;AAAA,IAC5C;AAAA,IACA,QAAQ,CAAC,cAAc,oBAAC,KAAK,MAAL,EAAW,GAAG,WAAY,UAAA,MAAK;AAAA,IAAc;AAAA,EAAA,GAC1E;AAER,CAAC;"}

package/dist/footer.d.ts

@@ -6,5 +6,8 @@ export type FooterNavItemProps = {
     children?: string | undefined;
 };
 export declare const FooterNavItem: FC<FooterNavItemProps>;
-export declare const Footer: FC<any>;
+export type FooterProps = {
+    children: any;
+};
+export declare const Footer: FC<FooterProps>;
 //# sourceMappingURL=footer.d.ts.map

package/dist/footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../src/footer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKlC,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,GAAG,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAgChD,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,GAAG,CAc1B,CAAC"}
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../src/footer.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAKxC,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,GAAG,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAgC/C,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG;IACtB,QAAQ,EAAE,GAAG,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAcjC,CAAC"}

package/dist/footer.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { Nav, Navbar } from "react-bootstrap";
 import { useBreakpoint } from "./responsiveHelper.js";
 import { AdaptiveContainer } from "./adaptiveContainer.js";
-const FooterNavItem = function FooterNavItem2({
+const FooterNavItem = memo(function FooterNavItem2({
   href,
   icon,
   active = false,
@@ -27,8 +28,8 @@ const FooterNavItem = function FooterNavItem2({
     }
   );
   return /* @__PURE__ */ jsx(Nav.Item, { style: { flex: 1 }, children: link });
-};
-const Footer = function Footer2({ children }) {
+});
+const Footer = memo(function Footer2({ children }) {
   const { isDesktop } = useBreakpoint();
   return (
     // border-bottom
@@ -37,7 +38,7 @@ const Footer = function Footer2({ children }) {
       /* @__PURE__ */ jsx(Nav, { className: isDesktop ? "me-auto" : "justify-content-center flex-nowrap w-100", children })
     ] }) }) })
   );
-};
+});
 export {
   Footer,
   FooterNavItem

package/dist/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sources":["../src/footer.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Nav, Navbar } from 'react-bootstrap';\nimport { useBreakpoint } from './responsiveHelper';\nimport { AdaptiveContainer } from './adaptiveContainer';\n\nexport type FooterNavItemProps = {\n    href: any;\n    icon: any;\n    active?: boolean | undefined;\n    children?: string | undefined;\n};\n\nexport const FooterNavItem: FC<FooterNavItemProps> = function FooterNavItem({\n    href,\n    icon,\n    active = false,\n    children = '',\n}) {\n    // const pathname = usePathname();\n\n    const isFilepath = icon.includes('.');\n    let iconElement;\n\n    if (isFilepath) {\n        iconElement = <img src={icon} alt=\"icon\" className=\"me-lg-2\" />;\n    } else {\n        iconElement = <span className={`lead me-lg-2 ${icon}`} />;\n    }\n\n    // const active = isActivePath(href, pathname);\n\n    const link = (\n        <Nav.Link\n            // as={Link}\n            href={href}\n            // active={active} // has no effect when not pills or tabs\n            className={`px-0 px-lg-3 d-flex align-items-center flex-column flex-lg-row ${active ? 'text-primary' : ''}`}\n        >\n            {iconElement}\n            {children}\n        </Nav.Link>\n    );\n\n    return <Nav.Item style={{ flex: 1 }}>{link}</Nav.Item>;\n};\n\nexport const Footer: FC<any> = function Footer({ children }) {\n    const { isDesktop } = useBreakpoint();\n\n    return (\n        // border-bottom\n        <div className={isDesktop ? '' : 'border-top'}>\n            <Navbar className={isDesktop ? '' : 'py-0'}>\n                <AdaptiveContainer>\n                    {isDesktop && <Navbar.Brand href=\"/\">Le Brand</Navbar.Brand>}\n                    <Nav className={isDesktop ? 'me-auto' : 'justify-content-center flex-nowrap w-100'}>{children}</Nav>\n                </AdaptiveContainer>\n            </Navbar>\n        </div>\n    );\n};\n"],"names":["FooterNavItem","Footer"],"mappings":";;;;AAYO,MAAM,gBAAwC,SAASA,eAAc;AAAA,EACxE;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AACf,GAAG;AAGC,QAAM,aAAa,KAAK,SAAS,GAAG;AACpC,MAAI;AAEJ,MAAI,YAAY;AACZ,sCAAe,OAAA,EAAI,KAAK,MAAM,KAAI,QAAO,WAAU,WAAU;AAAA,EACjE,OAAO;AACH,kBAAc,oBAAC,QAAA,EAAK,WAAW,gBAAgB,IAAI,IAAI;AAAA,EAC3D;AAIA,QAAM,OACF;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MAEG;AAAA,MAEA,WAAW,kEAAkE,SAAS,iBAAiB,EAAE;AAAA,MAExG,UAAA;AAAA,QAAA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIT,SAAO,oBAAC,IAAI,MAAJ,EAAS,OAAO,EAAE,MAAM,EAAA,GAAM,UAAA,MAAK;AAC/C;AAEO,MAAM,SAAkB,SAASC,QAAO,EAAE,YAAY;AACzD,QAAM,EAAE,UAAA,IAAc,cAAA;AAEtB;AAAA;AAAA,IAEI,oBAAC,OAAA,EAAI,WAAW,YAAY,KAAK,cAC7B,UAAA,oBAAC,QAAA,EAAO,WAAW,YAAY,KAAK,QAChC,+BAAC,mBAAA,EACI,UAAA;AAAA,MAAA,iCAAc,OAAO,OAAP,EAAa,MAAK,KAAI,UAAA,YAAQ;AAAA,0BAC5C,KAAA,EAAI,WAAW,YAAY,YAAY,4CAA6C,SAAA,CAAS;AAAA,IAAA,EAAA,CAClG,GACJ,EAAA,CACJ;AAAA;AAER;"}
+{"version":3,"file":"footer.js","sources":["../src/footer.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\nimport { Nav, Navbar } from 'react-bootstrap';\nimport { useBreakpoint } from './responsiveHelper';\nimport { AdaptiveContainer } from './adaptiveContainer';\n\nexport type FooterNavItemProps = {\n    href: any;\n    icon: any;\n    active?: boolean | undefined;\n    children?: string | undefined;\n};\n\nexport const FooterNavItem: FC<FooterNavItemProps> = memo(function FooterNavItem({\n    href,\n    icon,\n    active = false,\n    children = '',\n}) {\n    // const pathname = usePathname();\n\n    const isFilepath = icon.includes('.');\n    let iconElement;\n\n    if (isFilepath) {\n        iconElement = <img src={icon} alt=\"icon\" className=\"me-lg-2\" />;\n    } else {\n        iconElement = <span className={`lead me-lg-2 ${icon}`} />;\n    }\n\n    // const active = isActivePath(href, pathname);\n\n    const link = (\n        <Nav.Link\n            // as={Link}\n            href={href}\n            // active={active} // has no effect when not pills or tabs\n            className={`px-0 px-lg-3 d-flex align-items-center flex-column flex-lg-row ${active ? 'text-primary' : ''}`}\n        >\n            {iconElement}\n            {children}\n        </Nav.Link>\n    );\n\n    return <Nav.Item style={{ flex: 1 }}>{link}</Nav.Item>;\n});\n\nexport type FooterProps = {\n    children: any;\n};\n\nexport const Footer: FC<FooterProps> = memo(function Footer({ children }) {\n    const { isDesktop } = useBreakpoint();\n\n    return (\n        // border-bottom\n        <div className={isDesktop ? '' : 'border-top'}>\n            <Navbar className={isDesktop ? '' : 'py-0'}>\n                <AdaptiveContainer>\n                    {isDesktop && <Navbar.Brand href=\"/\">Le Brand</Navbar.Brand>}\n                    <Nav className={isDesktop ? 'me-auto' : 'justify-content-center flex-nowrap w-100'}>{children}</Nav>\n                </AdaptiveContainer>\n            </Navbar>\n        </div>\n    );\n});\n"],"names":["FooterNavItem","Footer"],"mappings":";;;;;AAYO,MAAM,gBAAwC,KAAK,SAASA,eAAc;AAAA,EAC7E;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AACf,GAAG;AAGC,QAAM,aAAa,KAAK,SAAS,GAAG;AACpC,MAAI;AAEJ,MAAI,YAAY;AACZ,sCAAe,OAAA,EAAI,KAAK,MAAM,KAAI,QAAO,WAAU,WAAU;AAAA,EACjE,OAAO;AACH,kBAAc,oBAAC,QAAA,EAAK,WAAW,gBAAgB,IAAI,IAAI;AAAA,EAC3D;AAIA,QAAM,OACF;AAAA,IAAC,IAAI;AAAA,IAAJ;AAAA,MAEG;AAAA,MAEA,WAAW,kEAAkE,SAAS,iBAAiB,EAAE;AAAA,MAExG,UAAA;AAAA,QAAA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIT,SAAO,oBAAC,IAAI,MAAJ,EAAS,OAAO,EAAE,MAAM,EAAA,GAAM,UAAA,MAAK;AAC/C,CAAC;AAMM,MAAM,SAA0B,KAAK,SAASC,QAAO,EAAE,YAAY;AACtE,QAAM,EAAE,UAAA,IAAc,cAAA;AAEtB;AAAA;AAAA,IAEI,oBAAC,OAAA,EAAI,WAAW,YAAY,KAAK,cAC7B,UAAA,oBAAC,QAAA,EAAO,WAAW,YAAY,KAAK,QAChC,+BAAC,mBAAA,EACI,UAAA;AAAA,MAAA,iCAAc,OAAO,OAAP,EAAa,MAAK,KAAI,UAAA,YAAQ;AAAA,0BAC5C,KAAA,EAAI,WAAW,YAAY,YAAY,4CAA6C,SAAA,CAAS;AAAA,IAAA,EAAA,CAClG,GACJ,EAAA,CACJ;AAAA;AAER,CAAC;"}

package/dist/footer.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Footer, FooterNavItem } from './footer';
+declare const meta: Meta<typeof Footer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithActiveItem: Story;
+export declare const ManyItems: Story;
+export declare const NavItemDefault: StoryObj<typeof FooterNavItem>;
+export declare const NavItemActive: StoryObj<typeof FooterNavItem>;
+export declare const NavItemIconOnly: StoryObj<typeof FooterNavItem>;
+//# sourceMappingURL=footer.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.stories.d.ts","sourceRoot":"","sources":["../src/footer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAQ7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAmB5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAsBvB,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,OAAO,aAAa,CAWzD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,OAAO,aAAa,CAYxD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,QAAQ,CAAC,OAAO,aAAa,CAU1D,CAAC"}

package/dist/globalLoading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"globalLoading.d.ts","sourceRoot":"","sources":["../src/globalLoading.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,MAAM,kBAAkB,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEtD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAYhD,CAAC"}
+{"version":3,"file":"globalLoading.d.ts","sourceRoot":"","sources":["../src/globalLoading.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,kBAAkB,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEtD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAY/C,CAAC"}

package/dist/globalLoading.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { Loading } from "./loading.js";
-const GlobalLoading = function GlobalLoading2({ loading }) {
+const GlobalLoading = memo(function GlobalLoading2({ loading }) {
   if (!loading) return null;
   return /* @__PURE__ */ jsx("div", { className: "bg-white position-absolute top-0 start-0 w-100 h-100 z-3 d-flex align-items-center justify-content-center", children: /* @__PURE__ */ jsx(Loading, {}) });
-};
+});
 export {
   GlobalLoading
 };

package/dist/globalLoading.js.map

@@ -1 +1 @@
-{"version":3,"file":"globalLoading.js","sources":["../src/globalLoading.tsx"],"sourcesContent":["import React, { FC } from 'react';\n// import { useLoading, useLoadingTimeout } from '../redux/loadingSlice';\nimport { Loading } from './loading';\n\nexport type GlobalLoadingProps = { loading: boolean };\n\nexport const GlobalLoading: FC<GlobalLoadingProps> = function GlobalLoading({ loading }) {\n    // const { loading } = useLoading();\n\n    // useLoadingTimeout(15000); // escape latch if something is stuck\n\n    if (!loading) return null;\n\n    return (\n        <div className=\"bg-white position-absolute top-0 start-0 w-100 h-100 z-3 d-flex align-items-center justify-content-center\">\n            <Loading />\n        </div>\n    );\n};\n"],"names":["GlobalLoading"],"mappings":";;AAMO,MAAM,gBAAwC,SAASA,eAAc,EAAE,WAAW;AAKrF,MAAI,CAAC,QAAS,QAAO;AAErB,6BACK,OAAA,EAAI,WAAU,6GACX,UAAA,oBAAC,WAAQ,GACb;AAER;"}
+{"version":3,"file":"globalLoading.js","sources":["../src/globalLoading.tsx"],"sourcesContent":["import React, { FC, memo } from 'react';\n// import { useLoading, useLoadingTimeout } from '../redux/loadingSlice';\nimport { Loading } from './loading';\n\nexport type GlobalLoadingProps = { loading: boolean };\n\nexport const GlobalLoading: FC<GlobalLoadingProps> = memo(function GlobalLoading({ loading }) {\n    // const { loading } = useLoading();\n\n    // useLoadingTimeout(15000); // escape latch if something is stuck\n\n    if (!loading) return null;\n\n    return (\n        <div className=\"bg-white position-absolute top-0 start-0 w-100 h-100 z-3 d-flex align-items-center justify-content-center\">\n            <Loading />\n        </div>\n    );\n});\n"],"names":["GlobalLoading"],"mappings":";;;AAMO,MAAM,gBAAwC,KAAK,SAASA,eAAc,EAAE,WAAW;AAK1F,MAAI,CAAC,QAAS,QAAO;AAErB,6BACK,OAAA,EAAI,WAAU,6GACX,UAAA,oBAAC,WAAQ,GACb;AAER,CAAC;"}

package/dist/responsiveHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"responsiveHelper.d.ts","sourceRoot":"","sources":["../src/responsiveHelper.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAEvD,wBAAgB,aAAa,IAAI;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACtB,CAiCA;AAED,eAAO,MAAM,kBAAkB,EAAE,EAWhC,CAAC"}
+{"version":3,"file":"responsiveHelper.d.ts","sourceRoot":"","sources":["../src/responsiveHelper.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,EAAE,EAA6B,MAAM,OAAO,CAAC;AAE7D,wBAAgB,aAAa,IAAI;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACtB,CAiCA;AAED,eAAO,MAAM,kBAAkB,EAAE,EAW/B,CAAC"}

package/dist/responsiveHelper.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { memo, useState, useEffect } from "react";
 function useBreakpoint() {
   const [breakpoint, setBreakpoint] = useState("xs");
   useEffect(() => {
@@ -29,7 +29,7 @@ function useBreakpoint() {
   const isMobile = ["xs", "sm", "md"].includes(breakpoint);
   return { breakpoint, isMobile, isDesktop: !isMobile };
 }
-const ResponsiveHelperBS = function ResponsiveHelperBS2() {
+const ResponsiveHelperBS = memo(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" }),
@@ -38,7 +38,7 @@ const ResponsiveHelperBS = function ResponsiveHelperBS2() {
     /* @__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

package/dist/responsiveHelper.js.map

@@ -1 +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;"}
+{"version":3,"file":"responsiveHelper.js","sources":["../src/responsiveHelper.tsx"],"sourcesContent":["'use client';\n\nimport React, { FC, memo, 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 = memo(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,KAAK,SAASA,sBAAqB;AACrE,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,CAAC;"}

package/dist/responsiveHelper.stories.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"responsiveHelper.stories.d.ts","sourceRoot":"","sources":["../src/responsiveHelper.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAiB,MAAM,oBAAoB,CAAC;AAEvE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAQzC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AA8CF,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC"}

package/dist/toaster.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../src/toaster.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAY,EAAE,EAAQ,MAAM,OAAO,CAAC;AAClD,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,CA6BnC,CAAC"}

package/dist/toaster.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { memo, useState } from "react";
 import { Toast } from "react-bootstrap";
-const Toaster = function Toaster2({ toast }) {
+const Toaster = memo(function Toaster2({ toast }) {
   const [dismissed, setDismissed] = useState(false);
   const msg = typeof toast === "string" ? toast : toast?.message;
   const variant = typeof toast === "string" ? "" : toast?.variant;
@@ -27,7 +27,7 @@ const Toaster = function Toaster2({ toast }) {
       ]
     }
   );
-};
+});
 export {
   Toaster
 };

package/dist/toaster.js.map

@@ -1 +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;"}
+{"version":3,"file":"toaster.js","sources":["../src/toaster.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, FC, memo } 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> = memo(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,KAAK,SAASA,SAAQ,EAAE,SAAS;AAEtE,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,CAAC;"}

package/dist/useModal.js.map

@@ -1 +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;"}
+{"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: FC<UseModalProps> = 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            }) {\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,cAAiC;AAAA,IACnC,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,GACnB;AACC,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/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@kirill.konshin/bootstrap",
   "description": "Utilities",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "----- BUILD -----": "",
     "clean": "rm -rf dist .tscache tsconfig.tsbuildinfo",
     "build": "vite build",
-    "build:index": "cti create ./src",
+    "build:index": "ctix build",
     "build:check-types": "attw --pack .",
     "start": "yarn build --watch",
     "wait": "wait-on ./dist/index.js",

package/src/adaptiveContainer.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AdaptiveContainer } from './adaptiveContainer';
+
+const meta: Meta<typeof AdaptiveContainer> = {
+    title: 'Bootstrap / AdaptiveContainer',
+    component: AdaptiveContainer,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        children: { control: 'text' },
+        className: { control: 'text' },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children:
+            'This container adapts to the viewport size. On mobile it becomes fluid, on desktop it has max-width.',
+    },
+};
+
+export const WithClassName: Story = {
+    args: {
+        children: 'Container with custom class',
+        className: 'bg-light p-3',
+    },
+};
+
+export const WithContent: Story = {
+    render: () => (
+        <AdaptiveContainer className="py-4">
+            <h1>Adaptive Container Demo</h1>
+            <p>
+                Resize the viewport to see how this container behaves. On mobile viewports (xs, sm, md), it becomes
+                fluid and takes full width. On desktop viewports (lg, xl, xxl), it has a max-width constraint.
+            </p>
+            <div className="row">
+                <div className="col-md-6">
+                    <div className="card">
+                        <div className="card-body">Column 1</div>
+                    </div>
+                </div>
+                <div className="col-md-6">
+                    <div className="card">
+                        <div className="card-body">Column 2</div>
+                    </div>
+                </div>
+            </div>
+        </AdaptiveContainer>
+    ),
+};

package/src/adaptiveContainer.tsx

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

package/src/error.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { Alert, AlertProps, Button, ButtonProps } from 'react-bootstrap';
 
 export type ErrorAlertProps = {
@@ -10,7 +10,7 @@ export type ErrorAlertProps = {
 };
 
 //TODO Create MUI-specific?
-export const ErrorAlert: FC<ErrorAlertProps> = function ErrorAlert({ onRetry, children, buttonProps, ...props }) {
+export const ErrorAlert: FC<ErrorAlertProps> = memo(function ErrorAlert({ onRetry, children, buttonProps, ...props }) {
     if (!children) return null;
 
     return (
@@ -34,4 +34,4 @@ export const ErrorAlert: FC<ErrorAlertProps> = function ErrorAlert({ onRetry, ch
             )}
         </Alert>
     );
-};
+});

package/src/field.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { Form, FormGroupProps, FormLabelProps, FormTextProps } from 'react-bootstrap';
 
 export type FieldGroupProps = FormGroupProps & {
@@ -9,7 +9,7 @@ export type FieldGroupProps = FormGroupProps & {
     horizontal?: boolean;
 };
 
-export const FieldGroup: FC<FieldGroupProps> = function FieldGroup({
+export const FieldGroup: FC<FieldGroupProps> = memo(function FieldGroup({
     label,
     labelProps = {},
     text,
@@ -34,4 +34,4 @@ export const FieldGroup: FC<FieldGroupProps> = function FieldGroup({
             {text && !horizontal && <Form.Text {...textProps}>{text}</Form.Text>}{' '}
         </Form.Group>
     );
-};
+});

package/src/footer.stories.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Footer, FooterNavItem } from './footer';
+
+const meta: Meta<typeof Footer> = {
+    title: 'Bootstrap / Footer',
+    component: Footer,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: (
+            <>
+                <FooterNavItem href="#" icon="bi-house">
+                    Home
+                </FooterNavItem>
+                <FooterNavItem href="#" icon="bi-search">
+                    Search
+                </FooterNavItem>
+                <FooterNavItem href="#" icon="bi-person">
+                    Profile
+                </FooterNavItem>
+            </>
+        ),
+    },
+};
+
+export const WithActiveItem: Story = {
+    args: {
+        children: (
+            <>
+                <FooterNavItem href="#" icon="bi-house" active>
+                    Home
+                </FooterNavItem>
+                <FooterNavItem href="#" icon="bi-search">
+                    Search
+                </FooterNavItem>
+                <FooterNavItem href="#" icon="bi-gear">
+                    Settings
+                </FooterNavItem>
+                <FooterNavItem href="#" icon="bi-person">
+                    Profile
+                </FooterNavItem>
+            </>
+        ),
+    },
+};
+
+export const ManyItems: Story = {
+    args: {
+        children: (
+            <>
+                <FooterNavItem href="#" icon="bi-house">
+                    Home
+                </FooterNavItem>
+                <FooterNavItem href="#" icon="bi-search">
+                    Search
+                </FooterNavItem>
+                <FooterNavItem href="#" icon="bi-bell">
+                    Notifications
+                </FooterNavItem>
+                <FooterNavItem href="#" icon="bi-chat">
+                    Messages
+                </FooterNavItem>
+                <FooterNavItem href="#" icon="bi-person">
+                    Profile
+                </FooterNavItem>
+            </>
+        ),
+    },
+};
+
+// FooterNavItem stories - rendered within Footer for proper context
+export const NavItemDefault: StoryObj<typeof FooterNavItem> = {
+    args: {
+        href: '#',
+        icon: 'bi-house',
+        children: 'Home',
+    },
+    render: (args) => (
+        <Footer>
+            <FooterNavItem {...args} />
+        </Footer>
+    ),
+};
+
+export const NavItemActive: StoryObj<typeof FooterNavItem> = {
+    args: {
+        href: '#',
+        icon: 'bi-house',
+        children: 'Home',
+        active: true,
+    },
+    render: (args) => (
+        <Footer>
+            <FooterNavItem {...args} />
+        </Footer>
+    ),
+};
+
+export const NavItemIconOnly: StoryObj<typeof FooterNavItem> = {
+    args: {
+        href: '#',
+        icon: 'bi-bell',
+    },
+    render: (args) => (
+        <Footer>
+            <FooterNavItem {...args} />
+        </Footer>
+    ),
+};

package/src/footer.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { Nav, Navbar } from 'react-bootstrap';
 import { useBreakpoint } from './responsiveHelper';
 import { AdaptiveContainer } from './adaptiveContainer';
@@ -10,7 +10,7 @@ export type FooterNavItemProps = {
     children?: string | undefined;
 };
 
-export const FooterNavItem: FC<FooterNavItemProps> = function FooterNavItem({
+export const FooterNavItem: FC<FooterNavItemProps> = memo(function FooterNavItem({
     href,
     icon,
     active = false,
@@ -42,9 +42,13 @@ export const FooterNavItem: FC<FooterNavItemProps> = function FooterNavItem({
     );
 
     return <Nav.Item style={{ flex: 1 }}>{link}</Nav.Item>;
+});
+
+export type FooterProps = {
+    children: any;
 };
 
-export const Footer: FC<any> = function Footer({ children }) {
+export const Footer: FC<FooterProps> = memo(function Footer({ children }) {
     const { isDesktop } = useBreakpoint();
 
     return (
@@ -58,4 +62,4 @@ export const Footer: FC<any> = function Footer({ children }) {
             </Navbar>
         </div>
     );
-};
+});

package/src/globalLoading.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 // import { useLoading, useLoadingTimeout } from '../redux/loadingSlice';
 import { Loading } from './loading';
 
 export type GlobalLoadingProps = { loading: boolean };
 
-export const GlobalLoading: FC<GlobalLoadingProps> = function GlobalLoading({ loading }) {
+export const GlobalLoading: FC<GlobalLoadingProps> = memo(function GlobalLoading({ loading }) {
     // const { loading } = useLoading();
 
     // useLoadingTimeout(15000); // escape latch if something is stuck
@@ -16,4 +16,4 @@ export const GlobalLoading: FC<GlobalLoadingProps> = function GlobalLoading({ lo
             <Loading />
         </div>
     );
-};
+});

package/src/responsiveHelper.stories.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ResponsiveHelperBS, useBreakpoint } from './responsiveHelper';
+
+const meta: Meta<typeof ResponsiveHelperBS> = {
+    title: 'Bootstrap / ResponsiveHelperBS',
+    component: ResponsiveHelperBS,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'A small indicator in the bottom-right corner showing the current Bootstrap breakpoint. Resize the viewport to see it change.',
+            },
+        },
+    },
+    render: () => (
+        <div style={{ minHeight: '200px', position: 'relative' }}>
+            <div className="p-4">
+                <h4>Responsive Helper</h4>
+                <p>Look at the bottom-right corner to see the current breakpoint indicator.</p>
+                <p>Resize the viewport to see it change between XS, SM, MD, LG, XL, and XXL.</p>
+            </div>
+            <ResponsiveHelperBS />
+        </div>
+    ),
+};
+
+// Demo component for useBreakpoint hook
+function UseBreakpointDemo() {
+    const { breakpoint, isMobile, isDesktop } = useBreakpoint();
+
+    return (
+        <div className="p-4">
+            <h4>useBreakpoint Hook Demo</h4>
+            <table className="table">
+                <tbody>
+                    <tr>
+                        <th>Current Breakpoint</th>
+                        <td>
+                            <code>{breakpoint}</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>isMobile</th>
+                        <td>
+                            <code>{isMobile ? 'true' : 'false'}</code>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>isDesktop</th>
+                        <td>
+                            <code>{isDesktop ? 'true' : 'false'}</code>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div className="alert alert-info">
+                <strong>Breakpoint ranges:</strong>
+                <ul className="mb-0 mt-2">
+                    <li>
+                        <strong>Mobile:</strong> xs (&lt;576px), sm (≥576px), md (≥768px)
+                    </li>
+                    <li>
+                        <strong>Desktop:</strong> lg (≥992px), xl (≥1200px), xxl (≥1400px)
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+}
+
+export const UseBreakpointHook: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates the `useBreakpoint` hook which provides the current breakpoint and mobile/desktop flags.',
+            },
+        },
+    },
+    render: () => <UseBreakpointDemo />,
+};
+
+export const CombinedDemo: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Shows both the visual indicator and the hook values together.',
+            },
+        },
+    },
+    render: () => (
+        <div style={{ minHeight: '300px', position: 'relative' }}>
+            <UseBreakpointDemo />
+            <ResponsiveHelperBS />
+        </div>
+    ),
+};

package/src/responsiveHelper.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, memo, useEffect, useState } from 'react';
 
 export function useBreakpoint(): {
     breakpoint: string;
@@ -41,7 +41,7 @@ export function useBreakpoint(): {
     return { breakpoint, isMobile, isDesktop: !isMobile };
 }
 
-export const ResponsiveHelperBS: FC = function ResponsiveHelperBS() {
+export const ResponsiveHelperBS: FC = memo(function ResponsiveHelperBS() {
     return (
         <span className="small position-fixed bottom-0 z-3" style={{ fontSize: '9px', right: 1, lineHeight: 1 }}>
             <small className="d-block d-sm-none">XS</small>
@@ -52,4 +52,4 @@ export const ResponsiveHelperBS: FC = function ResponsiveHelperBS() {
             <small className="d-none d-xxl-block">XXL</small>
         </span>
     );
-};
+});

package/src/toaster.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, FC } from 'react';
+import React, { useState, FC, memo } from 'react';
 import { Toast, ToastProps } from 'react-bootstrap';
 // import { useToaster } from '../redux/toasterSlice';
 
@@ -8,7 +8,7 @@ export type ToasterProps = {
     toast: string | { message: string; title?: string; variant?: 'dark' | 'success' | 'danger' };
 } & ToastProps;
 
-export const Toaster: FC<ToasterProps> = function Toaster({ toast }) {
+export const Toaster: FC<ToasterProps> = memo(function Toaster({ toast }) {
     //const { toast, setToast } = useToaster();
     const [dismissed, setDismissed] = useState(false);
 
@@ -37,4 +37,4 @@ export const Toaster: FC<ToasterProps> = function Toaster({ toast }) {
             </Toast.Body>
         </Toast>
     );
-};
+});

package/src/useModal.tsx

@@ -37,7 +37,7 @@ export function useModal({ onClose, showOnMount }: UseModalArgs = {}): {
         [close],
     );
 
-    const ModalDialog = useMemo(
+    const ModalDialog: FC<UseModalProps> = useMemo(
         () =>
             memo(function ModalDialog({
                 children,
@@ -48,7 +48,7 @@ export function useModal({ onClose, showOnMount }: UseModalArgs = {}): {
                 offcanvas = false,
                 title = null as any,
                 containerProps = {},
-            }: ModalProps) {
+            }) {
                 const Container = offcanvas ? Offcanvas : Modal;
                 const containerDefaultProps = offcanvas ? { style: { maxWidth: '85%' } } : {};
                 const Body = offcanvas ? Offcanvas.Body : Modal.Body;