@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.11

package/dist/components/common/SolidSettings/LlmSettings/OpenAiProviderComponent.tsx

@@ -1,44 +1,34 @@
-import { InputText } from "primereact/inputtext";
-import { Password } from "primereact/password";
+import { SolidInput, SolidPasswordInput } from "../../../shad-cn-ui";
 
 export const OpenAiProviderComponent = ({ profile, onUpdate }: any) => {
   return (
-    <div className="grid">
-      <div className="field col-12 md:col-6 pl-3">
-        <div className="flex flex-column gap-2 mt-3">
-          <label htmlFor="displayName" className="form-field-label">
-            Base URL
-          </label>
-          <InputText
-            value={profile?.baseUrl || ""}
-            onChange={(e) => onUpdate("baseUrl", e.target.value)}
-            className="w-full"
-          />
-        </div>
-
-        <div className="flex flex-column gap-2 mt-3">
-          <label htmlFor="displayName" className="form-field-label">
-            Api Key
-          </label>
-          <Password
-            className="w-full"
-            value={profile?.apiKey || ""}
-            onChange={(e) => onUpdate("apiKey", e.target.value)}
-            toggleMask
-            feedback={false}
-            inputClassName="w-full"
-          />
-        </div>
-        <div className="flex flex-column gap-2 mt-3">
-          <label htmlFor="displayName" className="form-field-label">
-            Model Name
-          </label>
-          <InputText
-            value={profile?.modelName || ""}
-            onChange={(e) => onUpdate("modelName", e.target.value)}
-            className="w-full"
-          />
-        </div>
+    <div className="flex flex-column gap-4 mt-3">
+      <div className="flex flex-column gap-2">
+        <label className="form-field-label">Base URL</label>
+        <SolidInput
+          placeholder="https://api.provider.com"
+          value={profile?.baseUrl || ""}
+          onChange={(e) => onUpdate("baseUrl", e.target.value)}
+          className="w-full"
+        />
+      </div>
+      <div className="flex flex-column gap-2">
+        <label className="form-field-label">API Key</label>
+        <SolidPasswordInput
+          className="w-full"
+          value={profile?.apiKey || ""}
+          onChange={(e) => onUpdate("apiKey", e.target.value)}
+          toggle
+        />
+      </div>
+      <div className="flex flex-column gap-2">
+        <label className="form-field-label">Model Name</label>
+        <SolidInput
+          placeholder="e.g. gpt-4o-mini"
+          value={profile?.modelName || ""}
+          onChange={(e) => onUpdate("modelName", e.target.value)}
+          className="w-full"
+        />
       </div>
     </div>
   );

package/dist/components/common/SolidSettings/SettingDropzoneActivePlaceholder.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from 'primereact/button';
+import { SolidButton } from '../../shad-cn-ui';
 export var SettingDropzoneActivePlaceholder = function (_a) {
     var note = _a.note;
-    return (_jsxs("div", { className: 'solid-dropzone', children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M11 16V7.85L8.4 10.45L7 9L12 4L17 9L15.6 10.45L13 7.85V16H11ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z", fill: "#666666" }) }), _jsxs("div", { className: 'font-bold mt-2 text-center', children: ["Drag and Drop or ", _jsx("span", { className: 'text-primary', children: " Logo" }), " to upload"] }), _jsx("p", { className: 'text-center', children: "Supported format:PNG, JPG, JPEG, SVG, WEBP | Max size: 2 MB" }), _jsxs("small", { className: 'mb-2 text-center', children: ["Note: ", note ? note : "200px image width is ideal"] }), _jsx("div", { children: _jsx(Button, { outlined: true, size: 'small', severity: 'secondary', label: 'Click to Browse', type: "button" }) })] }));
+    return (_jsxs("div", { className: 'solid-dropzone', children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M11 16V7.85L8.4 10.45L7 9L12 4L17 9L15.6 10.45L13 7.85V16H11ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z", fill: "#666666" }) }), _jsxs("div", { className: 'font-bold mt-2 text-center', children: ["Drag and Drop or ", _jsx("span", { className: 'text-primary', children: " Logo" }), " to upload"] }), _jsx("p", { className: 'text-center', children: "Supported format:PNG, JPG, JPEG, SVG, WEBP | Max size: 2 MB" }), _jsxs("small", { className: 'mb-2 text-center', children: ["Note: ", note ? note : "200px image width is ideal"] }), _jsx("div", { children: _jsx(SolidButton, { variant: "outline", size: "sm", severity: "secondary", label: 'Click to Browse', type: "button" }) })] }));
 };
 //# sourceMappingURL=SettingDropzoneActivePlaceholder.js.map

package/dist/components/common/SolidSettings/SettingDropzoneActivePlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingDropzoneActivePlaceholder.js","sourceRoot":"","sources":["../../../../src/components/common/SolidSettings/SettingDropzoneActivePlaceholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAG1C,MAAM,CAAC,IAAM,gCAAgC,GAAG,UAAC,EAAU;QAAT,IAAI,UAAA;IAClD,OAAO,CACH,eAAK,SAAS,EAAC,gBAAgB,aAC3B,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,YAC1F,eAAM,CAAC,EAAC,uOAAuO,EAAC,IAAI,EAAC,SAAS,GAAG,GAC/P,EACN,eAAK,SAAS,EAAC,4BAA4B,kCACtB,eAAM,SAAS,EAAC,cAAc,sBAAa,kBAC1D,EACN,YAAG,SAAS,EAAC,aAAa,4EAAgE,EAC1F,iBAAO,SAAS,EAAC,kBAAkB,uBAAQ,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,4BAA4B,IAAS,EAC9F,wBACI,KAAC,MAAM,IAAC,QAAQ,QAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAC,WAAW,EAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,GAAG,GACzF,IACJ,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { Button } from 'primereact/button'\nimport React from 'react'\n\nexport const SettingDropzoneActivePlaceholder = ({note}:any) => {\n    return (\n        <div className='solid-dropzone'>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M11 16V7.85L8.4 10.45L7 9L12 4L17 9L15.6 10.45L13 7.85V16H11ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z\" fill=\"#666666\" />\n            </svg>\n            <div className='font-bold mt-2 text-center'>\n                Drag and Drop or <span className='text-primary'> Logo</span> to upload\n            </div>\n            <p className='text-center'>Supported format:PNG, JPG, JPEG, SVG, WEBP | Max size: 2 MB</p>\n            <small className='mb-2 text-center'>Note: {note ? note : \"200px image width is ideal\"}</small>\n            <div>\n                <Button outlined size='small' severity='secondary' label='Click to Browse' type=\"button\" />\n            </div>\n        </div>\n    )\n}"]}
+{"version":3,"file":"SettingDropzoneActivePlaceholder.js","sourceRoot":"","sources":["../../../../src/components/common/SolidSettings/SettingDropzoneActivePlaceholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,MAAM,CAAC,IAAM,gCAAgC,GAAG,UAAC,EAAU;QAAT,IAAI,UAAA;IAClD,OAAO,CACH,eAAK,SAAS,EAAC,gBAAgB,aAC3B,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,YAC1F,eAAM,CAAC,EAAC,uOAAuO,EAAC,IAAI,EAAC,SAAS,GAAG,GAC/P,EACN,eAAK,SAAS,EAAC,4BAA4B,kCACtB,eAAM,SAAS,EAAC,cAAc,sBAAa,kBAC1D,EACN,YAAG,SAAS,EAAC,aAAa,4EAAgE,EAC1F,iBAAO,SAAS,EAAC,kBAAkB,uBAAQ,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,4BAA4B,IAAS,EAC9F,wBACI,KAAC,WAAW,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,GAAG,GACpG,IACJ,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { SolidButton } from '../../shad-cn-ui'\nimport React from 'react'\n\nexport const SettingDropzoneActivePlaceholder = ({note}:any) => {\n    return (\n        <div className='solid-dropzone'>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M11 16V7.85L8.4 10.45L7 9L12 4L17 9L15.6 10.45L13 7.85V16H11ZM6 20C5.45 20 4.97917 19.8042 4.5875 19.4125C4.19583 19.0208 4 18.55 4 18V15H6V18H18V15H20V18C20 18.55 19.8042 19.0208 19.4125 19.4125C19.0208 19.8042 18.55 20 18 20H6Z\" fill=\"#666666\" />\n            </svg>\n            <div className='font-bold mt-2 text-center'>\n                Drag and Drop or <span className='text-primary'> Logo</span> to upload\n            </div>\n            <p className='text-center'>Supported format:PNG, JPG, JPEG, SVG, WEBP | Max size: 2 MB</p>\n            <small className='mb-2 text-center'>Note: {note ? note : \"200px image width is ideal\"}</small>\n            <div>\n                <SolidButton variant=\"outline\" size=\"sm\" severity=\"secondary\" label='Click to Browse' type=\"button\" />\n            </div>\n        </div>\n    )\n}\n"]}

package/dist/components/common/SolidSettings/SettingDropzoneActivePlaceholder.tsx

@@ -1,4 +1,4 @@
-import { Button } from 'primereact/button'
+import { SolidButton } from '../../shad-cn-ui'
 import React from 'react'
 
 export const SettingDropzoneActivePlaceholder = ({note}:any) => {
@@ -13,8 +13,8 @@ export const SettingDropzoneActivePlaceholder = ({note}:any) => {
             <p className='text-center'>Supported format:PNG, JPG, JPEG, SVG, WEBP | Max size: 2 MB</p>
             <small className='mb-2 text-center'>Note: {note ? note : "200px image width is ideal"}</small>
             <div>
-                <Button outlined size='small' severity='secondary' label='Click to Browse' type="button" />
+                <SolidButton variant="outline" size="sm" severity="secondary" label='Click to Browse' type="button" />
             </div>
         </div>
     )
-}
+}

package/dist/components/common/SolidSettings/SettingsImageRemoveButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from 'primereact/button';
+import { SolidButton } from '../../shad-cn-ui';
 export var SettingsImageRemoveButton = function (_a) {
     var onClick = _a.onClick;
-    return (_jsx(Button, { label: "Remove", severity: "danger", icon: "pi pi-times", size: "small", className: "mt-2", onClick: onClick }));
+    return (_jsx(SolidButton, { label: "Remove", severity: "danger", icon: "pi pi-times", size: "small", className: "mt-2", onClick: onClick }));
 };
 //# sourceMappingURL=SettingsImageRemoveButton.js.map

package/dist/components/common/SolidSettings/SettingsImageRemoveButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsImageRemoveButton.js","sourceRoot":"","sources":["../../../../src/components/common/SolidSettings/SettingsImageRemoveButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAG1C,MAAM,CAAC,IAAM,yBAAyB,GAAG,UAAC,EAAgB;QAAd,OAAO,aAAA;IAC/C,OAAO,CACH,KAAC,MAAM,IACH,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAC,QAAQ,EACjB,IAAI,EAAC,aAAa,EAClB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,OAAO,GAClB,CACL,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { Button } from 'primereact/button'\nimport React from 'react'\n\nexport const SettingsImageRemoveButton = ({ onClick }: any) => {\n    return (\n        <Button\n            label=\"Remove\"\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            size=\"small\"\n            className=\"mt-2\"\n            onClick={onClick}\n        />\n    )\n}"]}
+{"version":3,"file":"SettingsImageRemoveButton.js","sourceRoot":"","sources":["../../../../src/components/common/SolidSettings/SettingsImageRemoveButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAG9C,MAAM,CAAC,IAAM,yBAAyB,GAAG,UAAC,EAAgB;QAAd,OAAO,aAAA;IAC/C,OAAO,CACH,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAC,QAAQ,EACjB,IAAI,EAAC,aAAa,EAClB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,OAAO,GAClB,CACL,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { SolidButton } from '../../shad-cn-ui'\nimport React from 'react'\n\nexport const SettingsImageRemoveButton = ({ onClick }: any) => {\n    return (\n        <SolidButton\n            label=\"Remove\"\n            severity=\"danger\"\n            icon=\"pi pi-times\"\n            size=\"small\"\n            className=\"mt-2\"\n            onClick={onClick}\n        />\n    )\n}\n"]}

package/dist/components/common/SolidSettings/SettingsImageRemoveButton.tsx

@@ -1,9 +1,9 @@
-import { Button } from 'primereact/button'
+import { SolidButton } from '../../shad-cn-ui'
 import React from 'react'
 
 export const SettingsImageRemoveButton = ({ onClick }: any) => {
     return (
-        <Button
+        <SolidButton
             label="Remove"
             severity="danger"
             icon="pi pi-times"
@@ -12,4 +12,4 @@ export const SettingsImageRemoveButton = ({ onClick }: any) => {
             onClick={onClick}
         />
     )
-}
+}

package/dist/components/common/SolidToastProvider.d.ts

@@ -0,0 +1,2 @@
+export declare const SolidToastProvider: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SolidToastProvider.d.ts.map

package/dist/components/common/SolidToastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidToastProvider.d.ts","sourceRoot":"","sources":["../../../src/components/common/SolidToastProvider.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,kBAAkB,sDA0B9B,CAAC"}

package/dist/components/common/SolidToastProvider.js

@@ -0,0 +1,45 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { clearToast } from "../../redux/features/toastSlice";
+import { SolidToast } from "../shad-cn-ui";
+var toastId = 0;
+export var SolidToastProvider = function () {
+    var dispatch = useDispatch();
+    var message = useSelector(function (state) { return state.toast.message; });
+    var _a = useState([]), queue = _a[0], setQueue = _a[1];
+    useEffect(function () {
+        if (!message)
+            return;
+        toastId += 1;
+        setQueue(function (current) { return __spreadArray(__spreadArray([], current, true), [__assign({ id: toastId }, message)], false); });
+        dispatch(clearToast());
+    }, [dispatch, message]);
+    var handleClose = function (id) {
+        setQueue(function (current) { return current.filter(function (toast) { return toast.id !== id; }); });
+    };
+    if (!queue.length)
+        return null;
+    return (_jsx("div", { className: "solid-toast-viewport", "aria-live": "polite", "aria-atomic": "true", children: queue.map(function (toast) { return (_jsx(SolidToast, __assign({}, toast, { onClose: handleClose }), toast.id)); }) }));
+};
+//# sourceMappingURL=SolidToastProvider.js.map

package/dist/components/common/SolidToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidToastProvider.js","sourceRoot":"","sources":["../../../src/components/common/SolidToastProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAgB,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM3C,IAAI,OAAO,GAAG,CAAC,CAAC;AAEhB,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAChC,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAM,OAAO,GAAG,WAAW,CAAC,UAAC,KAAgB,IAAK,OAAA,KAAK,CAAC,KAAK,CAAC,OAAO,EAAnB,CAAmB,CAAC,CAAC;IACjE,IAAA,KAAoB,QAAQ,CAAe,EAAE,CAAC,EAA7C,KAAK,QAAA,EAAE,QAAQ,QAA8B,CAAC;IAErD,SAAS,CAAC;QACR,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,OAAO,IAAI,CAAC,CAAC;QACb,QAAQ,CAAC,UAAC,OAAO,IAAK,uCAAI,OAAO,qBAAI,EAAE,EAAE,OAAO,IAAK,OAAO,YAAtC,CAAyC,CAAC,CAAC;QACjE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAExB,IAAM,WAAW,GAAG,UAAC,EAAU;QAC7B,QAAQ,CAAC,UAAC,OAAO,IAAK,OAAA,OAAO,CAAC,MAAM,CAAC,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,EAAE,KAAK,EAAE,EAAf,CAAe,CAAC,EAA1C,CAA0C,CAAC,CAAC;IACpE,CAAC,CAAC;IAEF,IAAI,CAAC,KAAK,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAE/B,OAAO,CACL,cAAK,SAAS,EAAC,sBAAsB,eAAW,QAAQ,iBAAa,MAAM,YACxE,KAAK,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,CACpB,KAAC,UAAU,eAAoB,KAAK,IAAE,OAAO,EAAE,WAAW,KAAzC,KAAK,CAAC,EAAE,CAAqC,CAC/D,EAFqB,CAErB,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { RootState } from \"../../types/solid-core\";\nimport { clearToast, ToastMessage } from \"../../redux/features/toastSlice\";\nimport { SolidToast } from \"../shad-cn-ui\";\n\ntype QueueToast = ToastMessage & {\n  id: number;\n};\n\nlet toastId = 0;\n\nexport const SolidToastProvider = () => {\n  const dispatch = useDispatch();\n  const message = useSelector((state: RootState) => state.toast.message);\n  const [queue, setQueue] = useState<QueueToast[]>([]);\n\n  useEffect(() => {\n    if (!message) return;\n\n    toastId += 1;\n    setQueue((current) => [...current, { id: toastId, ...message }]);\n    dispatch(clearToast());\n  }, [dispatch, message]);\n\n  const handleClose = (id: number) => {\n    setQueue((current) => current.filter((toast) => toast.id !== id));\n  };\n\n  if (!queue.length) return null;\n\n  return (\n    <div className=\"solid-toast-viewport\" aria-live=\"polite\" aria-atomic=\"true\">\n      {queue.map((toast) => (\n        <SolidToast key={toast.id} {...toast} onClose={handleClose} />\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/components/common/SolidToastProvider.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../types/solid-core";
+import { clearToast, ToastMessage } from "../../redux/features/toastSlice";
+import { SolidToast } from "../shad-cn-ui";
+
+type QueueToast = ToastMessage & {
+  id: number;
+};
+
+let toastId = 0;
+
+export const SolidToastProvider = () => {
+  const dispatch = useDispatch();
+  const message = useSelector((state: RootState) => state.toast.message);
+  const [queue, setQueue] = useState<QueueToast[]>([]);
+
+  useEffect(() => {
+    if (!message) return;
+
+    toastId += 1;
+    setQueue((current) => [...current, { id: toastId, ...message }]);
+    dispatch(clearToast());
+  }, [dispatch, message]);
+
+  const handleClose = (id: number) => {
+    setQueue((current) => current.filter((toast) => toast.id !== id));
+  };
+
+  if (!queue.length) return null;
+
+  return (
+    <div className="solid-toast-viewport" aria-live="polite" aria-atomic="true">
+      {queue.map((toast) => (
+        <SolidToast key={toast.id} {...toast} onClose={handleClose} />
+      ))}
+    </div>
+  );
+};

package/dist/components/common/error.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../../src/components/common/error.tsx"],"names":[],"mappings":"AAEA,UAAU,WAAY,SAAQ,KAAK;IACjC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,2CAiBA"}
+{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../../src/components/common/error.tsx"],"names":[],"mappings":"AAGA,UAAU,WAAY,SAAQ,KAAK;IACjC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,2CAUA"}

package/dist/components/common/error.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Error components must be Client Components
+import { SolidErrorStatePage } from "./SolidErrorStatePage";
 export default function Error(_a) {
     var error = _a.error, reset = _a.reset;
-    return (_jsx("div", { children: _jsx("div", { className: "d-flex justify-content-center align-items-center vh-100", children: _jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "display-4 fw-bold", children: error === null || error === void 0 ? void 0 : error.errMessage }), _jsxs("p", { className: "fs-3", children: [_jsx("span", { className: "text-danger", children: "Opps!" }), " Something went wrong!"] }), _jsx("p", { className: "lead", children: "Sorry for inconvience" }), _jsx("button", { className: "btn btn-primary", onClick: function () { return reset === null || reset === void 0 ? void 0 : reset(); }, children: "Try again" })] }) }) }));
+    return (_jsx(SolidErrorStatePage, { statusCode: "500", title: "Something went wrong", description: (error === null || error === void 0 ? void 0 : error.errMessage) || "Sorry for the inconvenience.", actionLabel: "Try again", onAction: function () { return reset === null || reset === void 0 ? void 0 : reset(); } }));
 }
 //# sourceMappingURL=error.js.map

package/dist/components/common/error.js.map

@@ -1 +1 @@
-{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/components/common/error.tsx"],"names":[],"mappings":";AAMA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAM7B;QALC,KAAK,WAAA,EACL,KAAK,WAAA;IAKL,OAAO,CACL,wBACE,cAAK,SAAS,EAAC,yDAAyD,YACtE,eAAK,SAAS,EAAC,aAAa,aAC1B,aAAI,SAAS,EAAC,mBAAmB,YAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,GAAM,EAC1D,aAAG,SAAS,EAAC,MAAM,aACjB,eAAM,SAAS,EAAC,aAAa,sBAAa,8BACxC,EACJ,YAAG,SAAS,EAAC,MAAM,sCAA0B,EAC7C,iBAAQ,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,cAAM,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,EAAI,EAAT,CAAS,0BAEnD,IACL,GACF,GACF,CACP,CAAC;AACJ,CAAC","sourcesContent":[" // Error components must be Client Components\n\ninterface CustomError extends Error {\n  errMessage: string;\n}\n\nexport default function Error({\n  error,\n  reset,\n}: {\n  error: CustomError;\n  reset?: () => void;\n}) {\n  return (\n    <div>\n      <div className=\"d-flex justify-content-center align-items-center vh-100\">\n        <div className=\"text-center\">\n          <h2 className=\"display-4 fw-bold\">{error?.errMessage}</h2>\n          <p className=\"fs-3\">\n            <span className=\"text-danger\">Opps!</span> Something went wrong!\n          </p>\n          <p className=\"lead\">Sorry for inconvience</p>\n          <button className=\"btn btn-primary\" onClick={() => reset?.()}>\n            Try again\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"error.js","sourceRoot":"","sources":["../../../src/components/common/error.tsx"],"names":[],"mappings":";AAAA,6CAA6C;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAM5D,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAM7B;QALC,KAAK,WAAA,EACL,KAAK,WAAA;IAKL,OAAO,CACL,KAAC,mBAAmB,IAClB,UAAU,EAAC,KAAK,EAChB,KAAK,EAAC,sBAAsB,EAC5B,WAAW,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,KAAI,8BAA8B,EAChE,WAAW,EAAC,WAAW,EACvB,QAAQ,EAAE,cAAM,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,EAAI,EAAT,CAAS,GACzB,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Error components must be Client Components\nimport { SolidErrorStatePage } from \"./SolidErrorStatePage\";\n\ninterface CustomError extends Error {\n  errMessage: string;\n}\n\nexport default function Error({\n  error,\n  reset,\n}: {\n  error: CustomError;\n  reset?: () => void;\n}) {\n  return (\n    <SolidErrorStatePage\n      statusCode=\"500\"\n      title=\"Something went wrong\"\n      description={error?.errMessage || \"Sorry for the inconvenience.\"}\n      actionLabel=\"Try again\"\n      onAction={() => reset?.()}\n    />\n  );\n}\n"]}

package/dist/components/common/error.tsx

@@ -1,4 +1,5 @@
- // Error components must be Client Components
+// Error components must be Client Components
+import { SolidErrorStatePage } from "./SolidErrorStatePage";
 
 interface CustomError extends Error {
   errMessage: string;
@@ -12,19 +13,12 @@ export default function Error({
   reset?: () => void;
 }) {
   return (
-    <div>
-      <div className="d-flex justify-content-center align-items-center vh-100">
-        <div className="text-center">
-          <h2 className="display-4 fw-bold">{error?.errMessage}</h2>
-          <p className="fs-3">
-            <span className="text-danger">Opps!</span> Something went wrong!
-          </p>
-          <p className="lead">Sorry for inconvience</p>
-          <button className="btn btn-primary" onClick={() => reset?.()}>
-            Try again
-          </button>
-        </div>
-      </div>
-    </div>
+    <SolidErrorStatePage
+      statusCode="500"
+      title="Something went wrong"
+      description={error?.errMessage || "Sorry for the inconvenience."}
+      actionLabel="Try again"
+      onAction={() => reset?.()}
+    />
   );
 }