@rufous/ui 0.1.39 → 0.1.43

package/dist/chunk-YRFUVQDN.js

@@ -0,0 +1,31 @@
+// lib/Progress/circularProgress.tsx
+import * as React from "react";
+var CircularProgess = ({
+  size = 50,
+  color = "#a81c08",
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "rufous-loader",
+      style: { width: size, height: size },
+      ...props
+    },
+    /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React.createElement(
+      "circle",
+      {
+        className: "rufous-loader-circle",
+        cx: "50",
+        cy: "50",
+        r: "45",
+        stroke: color
+      }
+    ))
+  );
+};
+var circularProgress_default = CircularProgess;
+
+export {
+  circularProgress_default
+};

package/dist/icons/index.js

@@ -1,4 +1,7 @@
 import "../chunk-IR7ZKMED.js";
+import {
+  unsubscribeIcon_default
+} from "../chunk-NMMC4ATV.js";
 import {
   uploadIcon_default
 } from "../chunk-DXJ745NZ.js";
@@ -11,6 +14,9 @@ import {
 import {
   workItemIcon_default
 } from "../chunk-QJPQC544.js";
+import {
+  rufousLauncherBird_default
+} from "../chunk-QZFGQ5JM.js";
 import {
   sidebarIcon_default
 } from "../chunk-CSKTBLQQ.js";
@@ -33,8 +39,8 @@ import {
   unArchivedIcon_default
 } from "../chunk-ZJAV3FEQ.js";
 import {
-  unsubscribeIcon_default
-} from "../chunk-NMMC4ATV.js";
+  questionTypeDescriptiveIcon_default
+} from "../chunk-C7B23GTE.js";
 import {
   questionTypeMultipleIcon_default
 } from "../chunk-XCLXQOLP.js";
@@ -57,8 +63,8 @@ import {
   rufousBirdIcon_default
 } from "../chunk-DMP72IAP.js";
 import {
-  rufousLauncherBird_default
-} from "../chunk-QZFGQ5JM.js";
+  nineDotMenuIcon_default
+} from "../chunk-GESVGIAP.js";
 import {
   notificationIcon_default
 } from "../chunk-QIEQRNBE.js";
@@ -81,8 +87,8 @@ import {
   questionTypeCodingIcon_default
 } from "../chunk-FOUXNPQA.js";
 import {
-  questionTypeDescriptiveIcon_default
-} from "../chunk-C7B23GTE.js";
+  hierarchyIcon_default
+} from "../chunk-WZAU77G7.js";
 import {
   inactiveGroupIcon_default
 } from "../chunk-7WNPZ4B7.js";
@@ -102,8 +108,8 @@ import {
   minExperienceIcon_default
 } from "../chunk-MKK7M3BH.js";
 import {
-  nineDotMenuIcon_default
-} from "../chunk-GESVGIAP.js";
+  dollarIcon_default
+} from "../chunk-GL43GPEM.js";
 import {
   downloadIcon_default
 } from "../chunk-IOEQAR2M.js";
@@ -126,8 +132,8 @@ import {
   helpOutlinedIcon_default
 } from "../chunk-5UEJAVFK.js";
 import {
-  hierarchyIcon_default
-} from "../chunk-WZAU77G7.js";
+  archivedIcon_default
+} from "../chunk-3IBCGGN3.js";
 import {
   assignGroupIcon_default
 } from "../chunk-MNPAE2ZF.js";
@@ -149,15 +155,9 @@ import {
 import {
   difficultyMediumIcon_default
 } from "../chunk-XPJVVKOU.js";
-import {
-  dollarIcon_default
-} from "../chunk-GL43GPEM.js";
 import {
   activateUserIcon_default
 } from "../chunk-AH6RCYDL.js";
-import {
-  archivedIcon_default
-} from "../chunk-3IBCGGN3.js";
 export {
   activateUserIcon_default as ActivateUserIcon,
   archivedIcon_default as ArchivedIcon,

package/dist/main.cjs

@@ -1094,41 +1094,95 @@ var AddButton = ({ children, ...props }) => {
 var addButton_default = AddButton;
 
 // lib/Buttons/submitButton.tsx
+var React56 = __toESM(require("react"), 1);
+
+// lib/Progress/circularProgress.tsx
 var React55 = __toESM(require("react"), 1);
+var CircularProgess = ({
+  size = 50,
+  color = "#a81c08",
+  ...props
+}) => {
+  return /* @__PURE__ */ React55.createElement(
+    "div",
+    {
+      className: "rufous-loader",
+      style: { width: size, height: size },
+      ...props
+    },
+    /* @__PURE__ */ React55.createElement("svg", { viewBox: "0 0 100 100" }, /* @__PURE__ */ React55.createElement(
+      "circle",
+      {
+        className: "rufous-loader-circle",
+        cx: "50",
+        cy: "50",
+        r: "45",
+        stroke: color
+      }
+    ))
+  );
+};
+var circularProgress_default = CircularProgess;
+
+// lib/Buttons/submitButton.tsx
 var SubmitButton = ({
   children,
   type = "submit",
   onClick,
-  loading = false,
+  onDoubleClick,
+  isLoading = false,
   bgGradiant = false,
   ...props
 }) => {
+  const [loading, setLoading] = React56.useState(false);
+  const handleClick = async (e) => {
+    if (loading) return;
+    if (onClick) {
+      setLoading(true);
+      try {
+        await onClick(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+  const handleDoubleClick = async (e) => {
+    if (loading) return;
+    if (onDoubleClick) {
+      setLoading(true);
+      try {
+        await onDoubleClick(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
   const buttonProps = {
     ...props,
-    className: `btn submit-btn ${bgGradiant && "submit-btn-gradiant"} ${props.className ?? ""}`,
-    onClick,
-    disabled: props.disabled || loading,
-    ...onClick ? {} : { type }
-    // only set type when no onClick
+    className: `btn submit-btn ${bgGradiant ? "submit-btn-gradiant" : ""} ${props.className ?? ""}`,
+    disabled: props.disabled || loading || isLoading,
+    ...onClick ? {} : { type },
+    onClick: handleClick,
+    onDoubleClick: handleDoubleClick
   };
-  return /* @__PURE__ */ React55.createElement("button", { ...buttonProps }, loading ? "Loading..." : children);
+  return /* @__PURE__ */ React56.createElement("button", { ...buttonProps }, /* @__PURE__ */ React56.createElement("span", { className: "btn-content" }, children, (loading || isLoading) && /* @__PURE__ */ React56.createElement("span", { className: "btn-loader" }, /* @__PURE__ */ React56.createElement(circularProgress_default, { size: 18 }))));
 };
 var submitButton_default = SubmitButton;
 
 // lib/Buttons/cancelButton.tsx
-var React56 = __toESM(require("react"), 1);
-var CancelButton = ({ children, ...props }) => /* @__PURE__ */ React56.createElement("button", { className: "btn cancel-btn", ...props }, children);
+var React57 = __toESM(require("react"), 1);
+var CancelButton = ({ children, ...props }) => /* @__PURE__ */ React57.createElement("button", { className: "btn cancel-btn", ...props }, children);
 var cancelButton_default = CancelButton;
 
 // lib/Buttons/stdButton.tsx
-var React57 = __toESM(require("react"), 1);
+var React58 = __toESM(require("react"), 1);
 var StandardButton = ({ children, ...props }) => {
-  return /* @__PURE__ */ React57.createElement("button", { className: "btn standard-btn", ...props }, children);
+  return /* @__PURE__ */ React58.createElement("button", { className: "btn standard-btn", ...props }, children);
 };
 var stdButton_default = StandardButton;
 
 // lib/Dialogs/BaseDialog.tsx
-var React58 = __toESM(require("react"), 1);
+var React59 = __toESM(require("react"), 1);
 var import_react13 = require("react");
 var BaseDialog = ({
   open = false,
@@ -1158,7 +1212,7 @@ var BaseDialog = ({
   const { theme } = useRufousTheme();
   const successBtnRef = (0, import_react13.useRef)(null);
   if (!open) return null;
-  const renderButtons = () => /* @__PURE__ */ React58.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React58.createElement(
+  const renderButtons = () => /* @__PURE__ */ React59.createElement("div", { className: "dialog-footer", style: { justifyContent: buttonAlign } }, showCancelButton && /* @__PURE__ */ React59.createElement(
     "button",
     {
       className: "btn-cancel",
@@ -1166,7 +1220,7 @@ var BaseDialog = ({
       disabled: isLoading
     },
     cancelText
-  ), onConfirm && /* @__PURE__ */ React58.createElement(
+  ), onConfirm && /* @__PURE__ */ React59.createElement(
     "button",
     {
       ref: successBtnRef,
@@ -1178,9 +1232,9 @@ var BaseDialog = ({
         if (successBtnRef.current) successBtnRef.current.disabled = false;
       }
     },
-    loading ? /* @__PURE__ */ React58.createElement("span", { className: "spinner" }) : /* @__PURE__ */ React58.createElement("span", null, confirmText)
+    loading ? /* @__PURE__ */ React59.createElement("span", { className: "spinner" }) : /* @__PURE__ */ React59.createElement("span", null, confirmText)
   ));
-  return /* @__PURE__ */ React58.createElement("div", { className: `dialog-overlay ${fullScreen ? "fullscreen" : ""}` }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement("div", { className: `dialog-overlay ${fullScreen ? "fullscreen" : ""}` }, /* @__PURE__ */ React59.createElement(
     "div",
     {
       className: `dialog-container ${className || ""}`,
@@ -1190,9 +1244,9 @@ var BaseDialog = ({
         width: fullWidth ? "100%" : "auto"
       }
     },
-    /* @__PURE__ */ React58.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React58.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase() : title), showCloseButton && /* @__PURE__ */ React58.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React58.createElement(closeIcon_default, { color: theme?.customStyles?.iconColor || "#707070" }))),
-    /* @__PURE__ */ React58.createElement("div", { className: "dialog-divider" }),
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.createElement("div", { className: "dialog-title" }, /* @__PURE__ */ React59.createElement("h2", null, formatTitle ? title?.charAt(0).toUpperCase() + title?.slice(1).toLowerCase() : title), showCloseButton && /* @__PURE__ */ React59.createElement("button", { className: "btn-close", onClick: onClose }, /* @__PURE__ */ React59.createElement(closeIcon_default, { color: theme?.customStyles?.iconColor || "#707070" }))),
+    /* @__PURE__ */ React59.createElement("div", { className: "dialog-divider" }),
+    /* @__PURE__ */ React59.createElement(
       "div",
       {
         className: "dialog-body",

package/dist/main.css

@@ -58,16 +58,34 @@
   background: #a21b07;
   color: #fff;
   transition: background-color 250ms ease-in-out;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
 }
-.submit-btn:hover {
+.submit-btn:hover:not(:disabled) {
   background-color: #9b1906;
 }
 .submit-btn.submit-btn-gradiant {
   background:
-    transparent linear-gradient(
+    linear-gradient(
       250deg,
       #9b1906 0%,
-      #e62508 100%) 0% 0% no-repeat padding-box;
+      #e62508 100%);
+}
+.submit-btn:disabled {
+  background-color: #e0e0e0;
+  color: #9e9e9e;
+  cursor: not-allowed;
+}
+.btn-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.btn-loader {
+  display: flex;
+  align-items: center;
 }
 .add-btn {
   min-width: fit-content;
@@ -206,6 +224,43 @@
   }
 }
 
+/* lib/styles/progress.css */
+.rufous-loader {
+  position: relative;
+  display: inline-block;
+}
+.rufous-loader svg {
+  transform: rotate(-45deg);
+}
+.rufous-loader-circle {
+  fill: none;
+  stroke-width: 9;
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  stroke-dashoffset: 280;
+  transform-origin: 50% 50%;
+  animation: rufous-rotate 1.3s linear infinite, rufous-dash 1.3s ease-in-out infinite;
+}
+@keyframes rufous-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rufous-dash {
+  0% {
+    stroke-dasharray: 1, 283;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 180, 283;
+    stroke-dashoffset: -70;
+  }
+  100% {
+    stroke-dasharray: 1, 283;
+    stroke-dashoffset: -260;
+  }
+}
+
 /* lib/style.css */
 .theme-rufous .act-icon svg {
   color: #a81c08 !important;

package/dist/main.js

@@ -2,6 +2,9 @@ import {
   BaseDialog_default
 } from "./chunk-CPLUOEPG.js";
 import "./chunk-IR7ZKMED.js";
+import {
+  unsubscribeIcon_default
+} from "./chunk-NMMC4ATV.js";
 import {
   uploadIcon_default
 } from "./chunk-DXJ745NZ.js";
@@ -14,6 +17,9 @@ import {
 import {
   workItemIcon_default
 } from "./chunk-QJPQC544.js";
+import {
+  rufousLauncherBird_default
+} from "./chunk-QZFGQ5JM.js";
 import {
   sidebarIcon_default
 } from "./chunk-CSKTBLQQ.js";
@@ -36,8 +42,8 @@ import {
   unArchivedIcon_default
 } from "./chunk-ZJAV3FEQ.js";
 import {
-  unsubscribeIcon_default
-} from "./chunk-NMMC4ATV.js";
+  questionTypeDescriptiveIcon_default
+} from "./chunk-C7B23GTE.js";
 import {
   questionTypeMultipleIcon_default
 } from "./chunk-XCLXQOLP.js";
@@ -60,8 +66,8 @@ import {
   rufousBirdIcon_default
 } from "./chunk-DMP72IAP.js";
 import {
-  rufousLauncherBird_default
-} from "./chunk-QZFGQ5JM.js";
+  nineDotMenuIcon_default
+} from "./chunk-GESVGIAP.js";
 import {
   notificationIcon_default
 } from "./chunk-QIEQRNBE.js";
@@ -84,8 +90,8 @@ import {
   questionTypeCodingIcon_default
 } from "./chunk-FOUXNPQA.js";
 import {
-  questionTypeDescriptiveIcon_default
-} from "./chunk-C7B23GTE.js";
+  hierarchyIcon_default
+} from "./chunk-WZAU77G7.js";
 import {
   inactiveGroupIcon_default
 } from "./chunk-7WNPZ4B7.js";
@@ -105,8 +111,8 @@ import {
   minExperienceIcon_default
 } from "./chunk-MKK7M3BH.js";
 import {
-  nineDotMenuIcon_default
-} from "./chunk-GESVGIAP.js";
+  dollarIcon_default
+} from "./chunk-GL43GPEM.js";
 import {
   downloadIcon_default
 } from "./chunk-IOEQAR2M.js";
@@ -129,8 +135,8 @@ import {
   helpOutlinedIcon_default
 } from "./chunk-5UEJAVFK.js";
 import {
-  hierarchyIcon_default
-} from "./chunk-WZAU77G7.js";
+  archivedIcon_default
+} from "./chunk-3IBCGGN3.js";
 import {
   assignGroupIcon_default
 } from "./chunk-MNPAE2ZF.js";
@@ -152,9 +158,6 @@ import {
 import {
   difficultyMediumIcon_default
 } from "./chunk-XPJVVKOU.js";
-import {
-  dollarIcon_default
-} from "./chunk-GL43GPEM.js";
 import {
   RufousThemeProvider,
   useRufousTheme
@@ -165,9 +168,6 @@ import {
 import {
   activateUserIcon_default
 } from "./chunk-AH6RCYDL.js";
-import {
-  archivedIcon_default
-} from "./chunk-3IBCGGN3.js";
 import "./chunk-QPGJCRBS.js";
 import {
   addButton_default
@@ -180,7 +180,8 @@ import {
 } from "./chunk-R3GARAVJ.js";
 import {
   submitButton_default
-} from "./chunk-3WUD5EX4.js";
+} from "./chunk-VJUSHVAE.js";
+import "./chunk-YRFUVQDN.js";
 export {
   APP_THEMES,
   activateUserIcon_default as ActivateUserIcon,

package/dist/style.css

@@ -58,16 +58,34 @@
   background: #a21b07;
   color: #fff;
   transition: background-color 250ms ease-in-out;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
 }
-.submit-btn:hover {
+.submit-btn:hover:not(:disabled) {
   background-color: #9b1906;
 }
 .submit-btn.submit-btn-gradiant {
   background:
-    transparent linear-gradient(
+    linear-gradient(
       250deg,
       #9b1906 0%,
-      #e62508 100%) 0% 0% no-repeat padding-box;
+      #e62508 100%);
+}
+.submit-btn:disabled {
+  background-color: #e0e0e0;
+  color: #9e9e9e;
+  cursor: not-allowed;
+}
+.btn-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.btn-loader {
+  display: flex;
+  align-items: center;
 }
 .add-btn {
   min-width: fit-content;
@@ -206,6 +224,43 @@
   }
 }
 
+/* lib/styles/progress.css */
+.rufous-loader {
+  position: relative;
+  display: inline-block;
+}
+.rufous-loader svg {
+  transform: rotate(-45deg);
+}
+.rufous-loader-circle {
+  fill: none;
+  stroke-width: 9;
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  stroke-dashoffset: 280;
+  transform-origin: 50% 50%;
+  animation: rufous-rotate 1.3s linear infinite, rufous-dash 1.3s ease-in-out infinite;
+}
+@keyframes rufous-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rufous-dash {
+  0% {
+    stroke-dasharray: 1, 283;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 180, 283;
+    stroke-dashoffset: -70;
+  }
+  100% {
+    stroke-dasharray: 1, 283;
+    stroke-dashoffset: -260;
+  }
+}
+
 /* lib/style.css */
 .theme-rufous .act-icon svg {
   color: #a81c08 !important;

package/dist/styles/button.css

@@ -58,16 +58,34 @@
   background: #a21b07;
   color: #fff;
   transition: background-color 250ms ease-in-out;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
 }
-.submit-btn:hover {
+.submit-btn:hover:not(:disabled) {
   background-color: #9b1906;
 }
 .submit-btn.submit-btn-gradiant {
   background:
-    transparent linear-gradient(
+    linear-gradient(
       250deg,
       #9b1906 0%,
-      #e62508 100%) 0% 0% no-repeat padding-box;
+      #e62508 100%);
+}
+.submit-btn:disabled {
+  background-color: #e0e0e0;
+  color: #9e9e9e;
+  cursor: not-allowed;
+}
+.btn-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.btn-loader {
+  display: flex;
+  align-items: center;
 }
 .add-btn {
   min-width: fit-content;

package/dist/styles/progress.css

@@ -0,0 +1,36 @@
+/* lib/styles/progress.css */
+.rufous-loader {
+  position: relative;
+  display: inline-block;
+}
+.rufous-loader svg {
+  transform: rotate(-45deg);
+}
+.rufous-loader-circle {
+  fill: none;
+  stroke-width: 9;
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  stroke-dashoffset: 280;
+  transform-origin: 50% 50%;
+  animation: rufous-rotate 1.3s linear infinite, rufous-dash 1.3s ease-in-out infinite;
+}
+@keyframes rufous-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rufous-dash {
+  0% {
+    stroke-dasharray: 1, 283;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 180, 283;
+    stroke-dashoffset: -70;
+  }
+  100% {
+    stroke-dasharray: 1, 283;
+    stroke-dashoffset: -260;
+  }
+}

package/dist/styles/progress.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/styles/progress.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.1.39",
+  "version": "0.1.43",
   "type": "module",
   "style": "./dist/style.css",
   "files": [

package/dist/chunk-3WUD5EX4.js

@@ -1,25 +0,0 @@
-// lib/Buttons/submitButton.tsx
-import * as React from "react";
-var SubmitButton = ({
-  children,
-  type = "submit",
-  onClick,
-  loading = false,
-  bgGradiant = false,
-  ...props
-}) => {
-  const buttonProps = {
-    ...props,
-    className: `btn submit-btn ${bgGradiant && "submit-btn-gradiant"} ${props.className ?? ""}`,
-    onClick,
-    disabled: props.disabled || loading,
-    ...onClick ? {} : { type }
-    // only set type when no onClick
-  };
-  return /* @__PURE__ */ React.createElement("button", { ...buttonProps }, loading ? "Loading..." : children);
-};
-var submitButton_default = SubmitButton;
-
-export {
-  submitButton_default
-};