@rufous/ui 0.1.23 → 0.1.27

package/dist/main.cjs

@@ -34,7 +34,9 @@ __export(main_exports, {
   AddButton: () => addButton_default,
   ArchivedIcon: () => archivedIcon_default,
   AssignGroupIcon: () => assignGroupIcon_default,
+  BaseDialog: () => BaseDialog_default,
   CancelButton: () => cancelButton_default,
+  CloseIcon: () => closeIcon_default,
   CopyIcon: () => copyIcon_default,
   DifficultyAllIcon: () => difficultyAllIcon_default,
   DifficultyEasyIcon: () => difficultyEasyIcon_default,
@@ -1066,15 +1068,20 @@ var React50 = __toESM(require("react"), 1);
 var RufousAiIcon = ({ color = "#3a3a3a", ...props }) => /* @__PURE__ */ React50.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React50.createElement("path", { d: "M16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31Z", stroke: color, "stroke-width": "2" }), /* @__PURE__ */ React50.createElement("path", { d: "M16.0999 20.167C16.1447 20.0478 16.2145 19.9396 16.3045 19.8495C16.3945 19.7595 16.5028 19.6898 16.6219 19.645L21.3489 17.87L16.6219 16.097C16.5026 16.0524 16.3941 15.9827 16.3039 15.8926C16.2137 15.8026 16.1438 15.6943 16.0989 15.575L14.3239 10.846L12.5509 15.574L12.5419 15.597C12.4955 15.7114 12.4259 15.8149 12.3374 15.9009C12.2489 15.987 12.1436 16.0538 12.0279 16.097L7.29895 17.87L12.0279 19.645C12.1471 19.6898 12.2554 19.7595 12.3454 19.8495C12.4354 19.9396 12.5052 20.0478 12.5499 20.167L14.3229 24.894L16.0999 20.167Z", stroke: color, "stroke-width": "1.5" }), /* @__PURE__ */ React50.createElement("path", { d: "M22.372 11.523C22.4108 11.4198 22.4712 11.3261 22.5492 11.2482C22.6271 11.1702 22.7209 11.1098 22.824 11.071L24.831 10.317L22.824 9.564C22.7242 9.52656 22.6332 9.46884 22.5568 9.39449C22.4804 9.32014 22.4202 9.23077 22.38 9.132L22.372 9.112L21.618 7.104L20.865 9.112L20.858 9.131C20.8178 9.23002 20.7575 9.31961 20.6809 9.39414C20.6043 9.46867 20.5131 9.52651 20.413 9.564L18.405 10.317L20.413 11.071C20.5163 11.1096 20.6101 11.17 20.6881 11.248C20.7661 11.3259 20.8264 11.4197 20.865 11.523L21.618 13.53L22.372 11.523Z", stroke: color, "stroke-width": "1.2" }));
 var rufousAiIcon_default = RufousAiIcon;
 
-// lib/Buttons/addButton.tsx
+// lib/icons/closeIcon.tsx
 var React51 = __toESM(require("react"), 1);
+var CloseIcon = ({ color = "#3a3a3a", ...props }) => /* @__PURE__ */ React51.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "336", height: "336", viewBox: "0 0 336 336", fill: "none", ...props }, /* @__PURE__ */ React51.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M132.323 167.676L0 299.999L35.3553 335.356L167.68 203.032L300.003 335.356L335.36 299.999L203.037 167.676L335.357 35.3553L300 0L167.68 132.319L35.3593 0L0.00398954 35.3553L132.323 167.676Z", fill: color }));
+var closeIcon_default = CloseIcon;
+
+// lib/Buttons/addButton.tsx
+var React52 = __toESM(require("react"), 1);
 var AddButton = ({ children, ...props }) => {
-  return /* @__PURE__ */ React51.createElement("button", { className: "add-btn", ...props }, "+ ", children);
+  return /* @__PURE__ */ React52.createElement("button", { className: "add-btn", ...props }, "+ ", children);
 };
 var addButton_default = AddButton;
 
 // lib/Buttons/submitButton.tsx
-var React52 = __toESM(require("react"), 1);
+var React53 = __toESM(require("react"), 1);
 var SubmitButton = ({
   children,
   type = "submit",
@@ -1090,22 +1097,103 @@ var SubmitButton = ({
     ...onClick ? {} : { type }
     // only set type when no onClick
   };
-  return /* @__PURE__ */ React52.createElement("button", { ...buttonProps }, loading ? "Loading..." : children);
+  return /* @__PURE__ */ React53.createElement("button", { ...buttonProps }, loading ? "Loading..." : children);
 };
 var submitButton_default = SubmitButton;
 
 // lib/Buttons/cancelButton.tsx
-var React53 = __toESM(require("react"), 1);
-var CancelButton = ({ children, ...props }) => /* @__PURE__ */ React53.createElement("button", { className: "cancel-btn", ...props }, children);
+var React54 = __toESM(require("react"), 1);
+var CancelButton = ({ children, ...props }) => /* @__PURE__ */ React54.createElement("button", { className: "cancel-btn", ...props }, children);
 var cancelButton_default = CancelButton;
 
+// lib/Dialogs/BaseDialog.tsx
+var React55 = __toESM(require("react"), 1);
+var import_react13 = require("react");
+var BaseDialog = ({
+  open = false,
+  onConfirm,
+  onClose,
+  onCancel,
+  children,
+  minWidth,
+  minHeight,
+  customButtons,
+  cancelText = "Cancel",
+  confirmText = "Ok",
+  submitText = "Submit",
+  title = "",
+  isLoading = false,
+  disableConfirmBtn = false,
+  fullScreen = false,
+  loading = false,
+  showCloseButton = true,
+  buttonAlign = "flex-end",
+  showCancelButton = true,
+  formatTitle = true,
+  fullWidth = false,
+  className,
+  dialogBodyStyle = {}
+}) => {
+  const { theme } = useRufousTheme();
+  const successBtnRef = (0, import_react13.useRef)(null);
+  if (!open) return null;
+  const renderButtons = () => /* @__PURE__ */ React55.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React55.createElement(
+    "button",
+    {
+      className: "btn-cancel",
+      onClick: onCancel || onClose,
+      disabled: isLoading
+    },
+    cancelText
+  ), onConfirm && /* @__PURE__ */ React55.createElement(
+    "button",
+    {
+      ref: successBtnRef,
+      className: "btn-confirm",
+      disabled: disableConfirmBtn || loading,
+      onClick: async () => {
+        if (successBtnRef.current) successBtnRef.current.disabled = true;
+        await onConfirm?.();
+        if (successBtnRef.current) successBtnRef.current.disabled = false;
+      }
+    },
+    loading ? /* @__PURE__ */ React55.createElement("span", { className: "spinner" }) : /* @__PURE__ */ React55.createElement("span", null, confirmText)
+  ));
+  return /* @__PURE__ */ React55.createElement("div", { className: `dialog-overlay ${fullScreen ? "fullscreen" : ""}` }, /* @__PURE__ */ React55.createElement(
+    "div",
+    {
+      className: `dialog-container ${className || ""}`,
+      style: {
+        minWidth: minWidth || (fullScreen ? "100%" : "685px"),
+        minHeight,
+        width: fullWidth ? "100%" : "auto"
+      }
+    },
+    /* @__PURE__ */ React55.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React55.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase() : title), showCloseButton && /* @__PURE__ */ React55.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React55.createElement(closeIcon_default, { color: theme?.customStyles?.iconColor || "#707070" }))),
+    /* @__PURE__ */ React55.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React55.createElement(
+      "div",
+      {
+        className: "dialog-body",
+        style: {
+          ...fullScreen ? { height: "100%" } : { maxHeight: "700px", minHeight },
+          ...dialogBodyStyle
+        }
+      },
+      children
+    ),
+    customButtons || renderButtons()
+  ));
+};
+var BaseDialog_default = BaseDialog;
+
 // lib/Contexts/rufousThemeProvider.tsx
-var import_react13 = __toESM(require("react"), 1);
-var RufousThemeContext = (0, import_react13.createContext)(null);
+var import_react14 = __toESM(require("react"), 1);
+var RufousThemeContext = (0, import_react14.createContext)(null);
 var RufousThemeProvider = ({ children }) => {
-  const [committedThemeKey, setCommittedThemeKey] = (0, import_react13.useState)("default");
-  const [previewThemeKey, setPreviewThemeKey] = (0, import_react13.useState)("default");
-  const [settings, setSettings] = (0, import_react13.useState)(null);
+  const [committedThemeKey, setCommittedThemeKey] = (0, import_react14.useState)("default");
+  const [previewThemeKey, setPreviewThemeKey] = (0, import_react14.useState)("default");
+  const [settings, setSettings] = (0, import_react14.useState)(null);
   const getGeneralSettings = async () => {
     try {
       const theme = localStorage.getItem("theme") || "default";
@@ -1115,10 +1203,10 @@ var RufousThemeProvider = ({ children }) => {
       console.error("Error fetching general settings:", err);
     }
   };
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     getGeneralSettings();
   }, []);
-  const fullTheme = (0, import_react13.useMemo)(() => {
+  const fullTheme = (0, import_react14.useMemo)(() => {
     return {
       themeKey: previewThemeKey || settings.theme,
       customStyles: APP_THEMES[previewThemeKey || settings.theme]
@@ -1131,7 +1219,7 @@ var RufousThemeProvider = ({ children }) => {
     setCommittedThemeKey(key);
   };
   const cancelTheme = () => setPreviewThemeKey(committedThemeKey);
-  return /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react14.default.createElement(
     RufousThemeContext.Provider,
     {
       value: {
@@ -1145,7 +1233,7 @@ var RufousThemeProvider = ({ children }) => {
         updateSettings: (v) => setSettings(v)
       }
     },
-    /* @__PURE__ */ import_react13.default.createElement(
+    /* @__PURE__ */ import_react14.default.createElement(
       "div",
       {
         className: `theme-${previewThemeKey || committedThemeKey || "default"}`
@@ -1154,7 +1242,7 @@ var RufousThemeProvider = ({ children }) => {
     )
   );
 };
-var useRufousTheme = () => (0, import_react13.useContext)(RufousThemeContext);
+var useRufousTheme = () => (0, import_react14.useContext)(RufousThemeContext);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   APP_THEMES,
@@ -1162,7 +1250,9 @@ var useRufousTheme = () => (0, import_react13.useContext)(RufousThemeContext);
   AddButton,
   ArchivedIcon,
   AssignGroupIcon,
+  BaseDialog,
   CancelButton,
+  CloseIcon,
   CopyIcon,
   DifficultyAllIcon,
   DifficultyEasyIcon,

package/dist/main.css

@@ -31,6 +31,59 @@
   cursor: not-allowed;
 }
 .submit-btn {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  margin: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family:
+    "Roboto",
+    "Helvetica",
+    "Arial",
+    sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  letter-spacing: 0.02857em;
+  min-width: 64px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  -webkit-transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background: #a81c07;
+  border: 1px solid #a81c07;
   background-color: #9b1906;
   color: #fff;
   font-size: 12px;
@@ -68,6 +121,98 @@
   color: #ffffff;
 }
 
+/* lib/styles/dialog.css */
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1300;
+}
+.dialog-container {
+  background: white;
+  border-radius: 8px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+.dialog-title {
+  background: #fff;
+  padding: 8px 16px;
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #707070;
+  z-index: 2;
+}
+.dialog-title h2 {
+  font-size: 1.125rem;
+  margin: 0;
+}
+.btn-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.dialog-divider {
+  border-top: 1px solid #e0e0e0;
+}
+.dialog-body {
+  overflow: auto;
+  padding: 16px 30px;
+  flex: 1;
+}
+.dialog-footer {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+}
+.btn-cancel {
+  border: 1px solid #a41b06;
+  border-radius: 34px;
+  padding: 7px 10px;
+  background: #fff;
+  color: #a41b06;
+  font-size: 12px;
+  cursor: pointer;
+}
+.btn-cancel:hover {
+  background: #f5f5f5;
+}
+.btn-confirm {
+  border-radius: 34px;
+  padding: 7px 16px;
+  background: #a21b07;
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+}
+.btn-confirm:hover {
+  background: #a21b07;
+}
+.spinner {
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #c5c5c5;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  animation: spin 1s linear infinite;
+  display: inline-block;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* lib/style.css */
 .theme-rufous .act-icon svg {
   color: #a81c08 !important;

package/dist/main.d.cts

@@ -49,8 +49,10 @@ export { default as MinExperienceIcon } from './icons/minExperienceIcon.cjs';
 export { default as ProjectIcon } from './icons/projectIcon.cjs';
 export { default as RolesIcon } from './icons/rolesIcon.cjs';
 export { default as RufousAiIcon } from './icons/rufousAiIcon.cjs';
+export { default as CloseIcon } from './icons/closeIcon.cjs';
 export { default as AddButton } from './Buttons/addButton.cjs';
 export { default as SubmitButton } from './Buttons/submitButton.cjs';
 export { default as CancelButton } from './Buttons/cancelButton.cjs';
+export { default as BaseDialog } from './Dialogs/BaseDialog.cjs';
 export { RufousThemeProvider, useRufousTheme } from './Contexts/rufousThemeProvider.cjs';
 import 'react';

package/dist/main.d.ts

@@ -49,8 +49,10 @@ export { default as MinExperienceIcon } from './icons/minExperienceIcon.js';
 export { default as ProjectIcon } from './icons/projectIcon.js';
 export { default as RolesIcon } from './icons/rolesIcon.js';
 export { default as RufousAiIcon } from './icons/rufousAiIcon.js';
+export { default as CloseIcon } from './icons/closeIcon.js';
 export { default as AddButton } from './Buttons/addButton.js';
 export { default as SubmitButton } from './Buttons/submitButton.js';
 export { default as CancelButton } from './Buttons/cancelButton.js';
+export { default as BaseDialog } from './Dialogs/BaseDialog.js';
 export { RufousThemeProvider, useRufousTheme } from './Contexts/rufousThemeProvider.js';
 import 'react';

package/dist/main.js

@@ -1,4 +1,19 @@
-import "./chunk-2WPUS5VV.js";
+import {
+  BaseDialog_default
+} from "./chunk-CPLUOEPG.js";
+import "./chunk-QGUQF6OF.js";
+import {
+  workItemIcon_default
+} from "./chunk-QJPQC544.js";
+import {
+  tickIcon_default
+} from "./chunk-ITZTTNM2.js";
+import {
+  timerIcon_default
+} from "./chunk-WWAHNTUH.js";
+import {
+  trashIcon_default
+} from "./chunk-6KIFTMUN.js";
 import {
   unArchivedIcon_default
 } from "./chunk-ZJAV3FEQ.js";
@@ -15,8 +30,14 @@ import {
   viewIcon_default
 } from "./chunk-XPRBPIS5.js";
 import {
-  workItemIcon_default
-} from "./chunk-QJPQC544.js";
+  resendInviteIcon_default
+} from "./chunk-WG3Q6GZN.js";
+import {
+  rolesIcon_default
+} from "./chunk-RJ43D3XB.js";
+import {
+  rufousAiIcon_default
+} from "./chunk-DE73YGRW.js";
 import {
   rufousBirdIcon_default
 } from "./chunk-DMP72IAP.js";
@@ -33,14 +54,14 @@ import {
   suspendUserIcon_default
 } from "./chunk-5BB3H3YO.js";
 import {
-  tickIcon_default
-} from "./chunk-ITZTTNM2.js";
+  questionStatusPrivateIcon_default
+} from "./chunk-WZTZFC36.js";
 import {
-  timerIcon_default
-} from "./chunk-WWAHNTUH.js";
+  questionStatusPublicIcon_default
+} from "./chunk-QA2AYT4A.js";
 import {
-  trashIcon_default
-} from "./chunk-6KIFTMUN.js";
+  questionTypeAllIcon_default
+} from "./chunk-WHGVO3HV.js";
 import {
   questionTypeCodingIcon_default
 } from "./chunk-FOUXNPQA.js";
@@ -57,14 +78,14 @@ import {
   refreshIcon_default
 } from "./chunk-RNA4TTYR.js";
 import {
-  resendInviteIcon_default
-} from "./chunk-WG3Q6GZN.js";
+  industryIcon_default
+} from "./chunk-NSW6ZGZF.js";
 import {
-  rolesIcon_default
-} from "./chunk-RJ43D3XB.js";
+  invoiceIcon_default
+} from "./chunk-KYJ3475B.js";
 import {
-  rufousAiIcon_default
-} from "./chunk-DE73YGRW.js";
+  logsIcon_default
+} from "./chunk-N4EJKMJK.js";
 import {
   minExperienceIcon_default
 } from "./chunk-MKK7M3BH.js";
@@ -81,14 +102,14 @@ import {
   questionStatusAllIcon_default
 } from "./chunk-GYLL3HRD.js";
 import {
-  questionStatusPrivateIcon_default
-} from "./chunk-WZTZFC36.js";
+  editChatIcon_default
+} from "./chunk-QONKYAQ5.js";
 import {
-  questionStatusPublicIcon_default
-} from "./chunk-QA2AYT4A.js";
+  editIcon_default
+} from "./chunk-H372BAXA.js";
 import {
-  questionTypeAllIcon_default
-} from "./chunk-WHGVO3HV.js";
+  engagementIcon_default
+} from "./chunk-FSRABKKC.js";
 import {
   functionIcon_default
 } from "./chunk-ZAYWFYP4.js";
@@ -102,14 +123,14 @@ import {
   inactiveGroupIcon_default
 } from "./chunk-7WNPZ4B7.js";
 import {
-  industryIcon_default
-} from "./chunk-NSW6ZGZF.js";
+  closeIcon_default
+} from "./chunk-WXXJX3FF.js";
 import {
-  invoiceIcon_default
-} from "./chunk-KYJ3475B.js";
+  copyIcon_default
+} from "./chunk-6FEUS4CQ.js";
 import {
-  logsIcon_default
-} from "./chunk-N4EJKMJK.js";
+  difficultyAllIcon_default
+} from "./chunk-PPNZC5ZQ.js";
 import {
   difficultyEasyIcon_default
 } from "./chunk-JI5XMLWT.js";
@@ -125,15 +146,6 @@ import {
 import {
   downloadIcon_default
 } from "./chunk-IOEQAR2M.js";
-import {
-  editChatIcon_default
-} from "./chunk-QONKYAQ5.js";
-import {
-  editIcon_default
-} from "./chunk-H372BAXA.js";
-import {
-  engagementIcon_default
-} from "./chunk-FSRABKKC.js";
 import {
   RufousThemeProvider,
   useRufousTheme
@@ -150,12 +162,6 @@ import {
 import {
   assignGroupIcon_default
 } from "./chunk-MNPAE2ZF.js";
-import {
-  copyIcon_default
-} from "./chunk-6FEUS4CQ.js";
-import {
-  difficultyAllIcon_default
-} from "./chunk-PPNZC5ZQ.js";
 import "./chunk-JSGUIKOH.js";
 import {
   addButton_default
@@ -172,7 +178,9 @@ export {
   addButton_default as AddButton,
   archivedIcon_default as ArchivedIcon,
   assignGroupIcon_default as AssignGroupIcon,
+  BaseDialog_default as BaseDialog,
   cancelButton_default as CancelButton,
+  closeIcon_default as CloseIcon,
   copyIcon_default as CopyIcon,
   difficultyAllIcon_default as DifficultyAllIcon,
   difficultyEasyIcon_default as DifficultyEasyIcon,

package/dist/style.css

@@ -31,6 +31,59 @@
   cursor: not-allowed;
 }
 .submit-btn {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  margin: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family:
+    "Roboto",
+    "Helvetica",
+    "Arial",
+    sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  letter-spacing: 0.02857em;
+  min-width: 64px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  -webkit-transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background: #a81c07;
+  border: 1px solid #a81c07;
   background-color: #9b1906;
   color: #fff;
   font-size: 12px;
@@ -68,6 +121,98 @@
   color: #ffffff;
 }
 
+/* lib/styles/dialog.css */
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1300;
+}
+.dialog-container {
+  background: white;
+  border-radius: 8px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+.dialog-title {
+  background: #fff;
+  padding: 8px 16px;
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #707070;
+  z-index: 2;
+}
+.dialog-title h2 {
+  font-size: 1.125rem;
+  margin: 0;
+}
+.btn-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.dialog-divider {
+  border-top: 1px solid #e0e0e0;
+}
+.dialog-body {
+  overflow: auto;
+  padding: 16px 30px;
+  flex: 1;
+}
+.dialog-footer {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+}
+.btn-cancel {
+  border: 1px solid #a41b06;
+  border-radius: 34px;
+  padding: 7px 10px;
+  background: #fff;
+  color: #a41b06;
+  font-size: 12px;
+  cursor: pointer;
+}
+.btn-cancel:hover {
+  background: #f5f5f5;
+}
+.btn-confirm {
+  border-radius: 34px;
+  padding: 7px 16px;
+  background: #a21b07;
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  border: none;
+}
+.btn-confirm:hover {
+  background: #a21b07;
+}
+.spinner {
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #c5c5c5;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  animation: spin 1s linear infinite;
+  display: inline-block;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* lib/style.css */
 .theme-rufous .act-icon svg {
   color: #a81c08 !important;