@rufous/ui 0.1.23 → 0.1.29

package/dist/Dialogs/BaseDialog.cjs

@@ -0,0 +1,125 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// lib/Dialogs/BaseDialog.tsx
+var BaseDialog_exports = {};
+__export(BaseDialog_exports, {
+  default: () => BaseDialog_default
+});
+module.exports = __toCommonJS(BaseDialog_exports);
+var React3 = __toESM(require("react"), 1);
+var import_react2 = require("react");
+
+// lib/icons/closeIcon.tsx
+var React = __toESM(require("react"), 1);
+var CloseIcon = ({ color = "#3a3a3a", ...props }) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "336", height: "336", viewBox: "0 0 336 336", fill: "none", ...props }, /* @__PURE__ */ React.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/Contexts/rufousThemeProvider.tsx
+var import_react = __toESM(require("react"), 1);
+var RufousThemeContext = (0, import_react.createContext)(null);
+var useRufousTheme = () => (0, import_react.useContext)(RufousThemeContext);
+
+// lib/Dialogs/BaseDialog.tsx
+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_react2.useRef)(null);
+  if (!open) return null;
+  const renderButtons = () => /* @__PURE__ */ React3.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      className: "btn-cancel",
+      onClick: onCancel || onClose,
+      disabled: isLoading
+    },
+    cancelText
+  ), onConfirm && /* @__PURE__ */ React3.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__ */ React3.createElement("span", { className: "spinner" }) : /* @__PURE__ */ React3.createElement("span", null, confirmText)
+  ));
+  return /* @__PURE__ */ React3.createElement("div", { className: `dialog-overlay ${fullScreen ? "fullscreen" : ""}` }, /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      className: `dialog-container ${className || ""}`,
+      style: {
+        minWidth: minWidth || (fullScreen ? "100%" : "685px"),
+        minHeight,
+        width: fullWidth ? "100%" : "auto"
+      }
+    },
+    /* @__PURE__ */ React3.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React3.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase() : title), showCloseButton && /* @__PURE__ */ React3.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React3.createElement(closeIcon_default, { color: theme?.customStyles?.iconColor || "#707070" }))),
+    /* @__PURE__ */ React3.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        className: "dialog-body",
+        style: {
+          ...fullScreen ? { height: "100%" } : { maxHeight: "700px", minHeight },
+          ...dialogBodyStyle
+        }
+      },
+      children
+    ),
+    customButtons || renderButtons()
+  ));
+};
+var BaseDialog_default = BaseDialog;

package/dist/Dialogs/BaseDialog.css

@@ -0,0 +1,224 @@
+/* lib/styles/button.css */
+.cancel-btn {
+  text-transform: uppercase;
+  min-width: 84px;
+  font-weight: normal;
+  font-size: 12px;
+  padding: 7px 10px;
+  border: 1px solid rgb(164, 27, 6);
+  border-radius: 34px;
+  background: #fff;
+  color: rgb(164, 27, 6);
+  cursor: pointer;
+  transition:
+    background-color 250ms,
+    box-shadow 250ms,
+    border-color 250ms,
+    color 250ms;
+  box-shadow:
+    rgba(0, 0, 0, 0.2) 0px 3px 1px -2px,
+    rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
+    rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+}
+.cancel-btn:hover {
+  box-shadow:
+    rgba(0, 0, 0, 0.2) 0px 2px 4px -1px,
+    rgba(0, 0, 0, 0.14) 0px 4px 5px 0px,
+    rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
+}
+.cancel-btn:disabled {
+  background-color: #e0e0e0;
+  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;
+  text-transform: uppercase;
+  min-width: 92px;
+  height: 38px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 250ms ease-in-out;
+  font-size: 600;
+}
+.submit-btn:hover {
+  background-color: #9b1906;
+}
+.submit-btn:disabled {
+  background-color: #e0e0e0;
+  cursor: not-allowed;
+}
+.add-btn {
+  background: #ffffff;
+  border: 1px solid #a41b06;
+  border-radius: 34px;
+  font-weight: normal;
+  font-size: 12px;
+  padding: 7px 12px;
+  color: #a41b06;
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  text-transform: uppercase;
+  box-shadow: none;
+}
+.add-btn:hover {
+  background: #a41b06;
+  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;
+}
+.theme-default .act-icon svg {
+  color: #707070 !important;
+}
+.act-icon {
+}

package/dist/Dialogs/BaseDialog.d.cts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+interface BaseDialogProps {
+    open?: boolean;
+    onConfirm?: () => Promise<void> | void;
+    onClose?: () => void;
+    onCancel?: () => void;
+    children?: React.ReactNode;
+    minWidth?: number | string;
+    minHeight?: number | string;
+    customButtons?: React.ReactNode;
+    cancelText?: string;
+    confirmText?: string;
+    submitText?: string;
+    title?: string;
+    isLoading?: boolean;
+    disableConfirmBtn?: boolean;
+    fullScreen?: boolean;
+    loading?: boolean;
+    showCloseButton?: boolean;
+    buttonAlign?: "flex-start" | "flex-end" | "center";
+    showCancelButton?: boolean;
+    formatTitle?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+    dialogBodyStyle?: React.CSSProperties;
+}
+declare const BaseDialog: React.FC<BaseDialogProps>;
+
+export { BaseDialog as default };

package/dist/Dialogs/BaseDialog.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+interface BaseDialogProps {
+    open?: boolean;
+    onConfirm?: () => Promise<void> | void;
+    onClose?: () => void;
+    onCancel?: () => void;
+    children?: React.ReactNode;
+    minWidth?: number | string;
+    minHeight?: number | string;
+    customButtons?: React.ReactNode;
+    cancelText?: string;
+    confirmText?: string;
+    submitText?: string;
+    title?: string;
+    isLoading?: boolean;
+    disableConfirmBtn?: boolean;
+    fullScreen?: boolean;
+    loading?: boolean;
+    showCloseButton?: boolean;
+    buttonAlign?: "flex-start" | "flex-end" | "center";
+    showCancelButton?: boolean;
+    formatTitle?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+    dialogBodyStyle?: React.CSSProperties;
+}
+declare const BaseDialog: React.FC<BaseDialogProps>;
+
+export { BaseDialog as default };

package/dist/Dialogs/BaseDialog.js

@@ -0,0 +1,65 @@
+import {
+  BaseDialog_default
+} from "../chunk-CPLUOEPG.js";
+import "../chunk-HYVDDN42.js";
+import "../chunk-XPRBPIS5.js";
+import "../chunk-QJPQC544.js";
+import "../chunk-5BB3H3YO.js";
+import "../chunk-ITZTTNM2.js";
+import "../chunk-WWAHNTUH.js";
+import "../chunk-6KIFTMUN.js";
+import "../chunk-ZJAV3FEQ.js";
+import "../chunk-NMMC4ATV.js";
+import "../chunk-DXJ745NZ.js";
+import "../chunk-BH53P2UM.js";
+import "../chunk-RNA4TTYR.js";
+import "../chunk-WG3Q6GZN.js";
+import "../chunk-RJ43D3XB.js";
+import "../chunk-DE73YGRW.js";
+import "../chunk-DMP72IAP.js";
+import "../chunk-QZFGQ5JM.js";
+import "../chunk-CSKTBLQQ.js";
+import "../chunk-ZDVP4SUD.js";
+import "../chunk-GYLL3HRD.js";
+import "../chunk-WZTZFC36.js";
+import "../chunk-QA2AYT4A.js";
+import "../chunk-WHGVO3HV.js";
+import "../chunk-FOUXNPQA.js";
+import "../chunk-C7B23GTE.js";
+import "../chunk-XCLXQOLP.js";
+import "../chunk-ZJYLZ6I6.js";
+import "../chunk-NSW6ZGZF.js";
+import "../chunk-KYJ3475B.js";
+import "../chunk-UTYIBUY2.js";
+import "../chunk-N4EJKMJK.js";
+import "../chunk-MKK7M3BH.js";
+import "../chunk-GESVGIAP.js";
+import "../chunk-QIEQRNBE.js";
+import "../chunk-BYJP2WNC.js";
+import "../chunk-QONKYAQ5.js";
+import "../chunk-H372BAXA.js";
+import "../chunk-FSRABKKC.js";
+import "../chunk-ZAYWFYP4.js";
+import "../chunk-5UEJAVFK.js";
+import "../chunk-WZAU77G7.js";
+import "../chunk-7WNPZ4B7.js";
+import "../chunk-WXXJX3FF.js";
+import "../chunk-6FEUS4CQ.js";
+import "../chunk-PPNZC5ZQ.js";
+import "../chunk-JI5XMLWT.js";
+import "../chunk-WXANSSXF.js";
+import "../chunk-XPJVVKOU.js";
+import "../chunk-GL43GPEM.js";
+import "../chunk-IOEQAR2M.js";
+import "../chunk-BCGCLMKA.js";
+import "../chunk-2FHTGYR4.js";
+import "../chunk-AH6RCYDL.js";
+import "../chunk-3IBCGGN3.js";
+import "../chunk-MNPAE2ZF.js";
+import "../chunk-JSGUIKOH.js";
+import "../chunk-MB7R5AKK.js";
+import "../chunk-UF3Q3GWG.js";
+import "../chunk-7DL4MCF7.js";
+export {
+  BaseDialog_default as default
+};

package/dist/Dialogs/index.cjs

@@ -0,0 +1,131 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// lib/Dialogs/index.ts
+var Dialogs_exports = {};
+__export(Dialogs_exports, {
+  BaseDialog: () => BaseDialog_default
+});
+module.exports = __toCommonJS(Dialogs_exports);
+
+// lib/Dialogs/BaseDialog.tsx
+var React3 = __toESM(require("react"), 1);
+var import_react2 = require("react");
+
+// lib/icons/closeIcon.tsx
+var React = __toESM(require("react"), 1);
+var CloseIcon = ({ color = "#3a3a3a", ...props }) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "336", height: "336", viewBox: "0 0 336 336", fill: "none", ...props }, /* @__PURE__ */ React.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/Contexts/rufousThemeProvider.tsx
+var import_react = __toESM(require("react"), 1);
+var RufousThemeContext = (0, import_react.createContext)(null);
+var useRufousTheme = () => (0, import_react.useContext)(RufousThemeContext);
+
+// lib/Dialogs/BaseDialog.tsx
+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_react2.useRef)(null);
+  if (!open) return null;
+  const renderButtons = () => /* @__PURE__ */ React3.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      className: "btn-cancel",
+      onClick: onCancel || onClose,
+      disabled: isLoading
+    },
+    cancelText
+  ), onConfirm && /* @__PURE__ */ React3.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__ */ React3.createElement("span", { className: "spinner" }) : /* @__PURE__ */ React3.createElement("span", null, confirmText)
+  ));
+  return /* @__PURE__ */ React3.createElement("div", { className: `dialog-overlay ${fullScreen ? "fullscreen" : ""}` }, /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      className: `dialog-container ${className || ""}`,
+      style: {
+        minWidth: minWidth || (fullScreen ? "100%" : "685px"),
+        minHeight,
+        width: fullWidth ? "100%" : "auto"
+      }
+    },
+    /* @__PURE__ */ React3.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React3.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase() : title), showCloseButton && /* @__PURE__ */ React3.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React3.createElement(closeIcon_default, { color: theme?.customStyles?.iconColor || "#707070" }))),
+    /* @__PURE__ */ React3.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        className: "dialog-body",
+        style: {
+          ...fullScreen ? { height: "100%" } : { maxHeight: "700px", minHeight },
+          ...dialogBodyStyle
+        }
+      },
+      children
+    ),
+    customButtons || renderButtons()
+  ));
+};
+var BaseDialog_default = BaseDialog;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BaseDialog
+});