@tecsinapse/cortex-react 1.7.0-beta.2 → 1.7.0-beta.3

package/dist/cjs/components/ProgressBar/Progress.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+require('../../styles/calendar-cell.js');
+require('../../styles/groupButton.js');
+var progressBar = require('../../styles/progressBar.js');
+
+const { container, bar, progress } = progressBar.ProgressVariants();
+const Progress = ({
+  value,
+  intent = "default",
+  infinite
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: container(), "data-testid": "linear-progress" }, /* @__PURE__ */ React.createElement("div", { className: bar() }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        width: !infinite ? `${value}%` : void 0,
+        transition: !infinite ? "width 0.5s ease" : void 0
+      },
+      "data-testid": "progress-filled",
+      className: progress({ intent, infinite })
+    }
+  )));
+};
+
+exports.Progress = Progress;

package/dist/cjs/components/ProgressBar/ProgressBar.js

@@ -1,41 +1,14 @@
 'use strict';
 
 var React = require('react');
-var ProgressBarInfinite = require('./ProgressBarInfinite.js');
-var ProgressBarSegments = require('./ProgressBarSegments.js');
+var Progress = require('./Progress.js');
 
 const ProgressBar = ({
-  segments: _segments = 1,
-  valueMin = 0,
-  valueMax = 100,
-  valueCurrent = 50,
-  intentProgress = "default",
-  type = "default",
-  animated = true
+  value = 50,
+  intent = "default",
+  infinite = false
 }) => {
-  const [displayedValue, setDisplayedValue] = React.useState(0);
-  const [showAnimation, setShowAnimation] = React.useState(true);
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (valueCurrent < displayedValue) {
-        setShowAnimation(false);
-      }
-      if (animated && valueCurrent > displayedValue) setShowAnimation(true);
-      setDisplayedValue(valueCurrent);
-    }, 0);
-    return () => clearTimeout(timeout);
-  }, [valueCurrent]);
-  const totalProgress = (displayedValue - valueMin) / (valueMax - valueMin) * 100;
-  const segments = Math.max(1, _segments);
-  return type === "infinite" ? /* @__PURE__ */ React.createElement(ProgressBarInfinite.ProgressBarInfinite, { intentProgress }) : /* @__PURE__ */ React.createElement(
-    ProgressBarSegments.ProgressBarSegments,
-    {
-      segments,
-      totalProgress,
-      intentProgress,
-      showAnimation
-    }
-  );
+  return /* @__PURE__ */ React.createElement(Progress.Progress, { value, intent, infinite });
 };
 
 exports.ProgressBar = ProgressBar;

package/dist/cjs/components/Uploader/Upload.js

@@ -25,7 +25,7 @@ const File = ({ file, index, onDelete }) => {
       })
     },
     /* @__PURE__ */ React.createElement(md.MdClose, { size: 20 })
-  )), /* @__PURE__ */ React.createElement(ProgressBar.ProgressBar, { intentProgress: file.status, type: "infinite" }));
+  )), /* @__PURE__ */ React.createElement(ProgressBar.ProgressBar, { intent: "info", infinite: file.status !== "success" }));
 };
 
 exports.File = File;

package/dist/cjs/styles/progressBar.js

@@ -2,51 +2,36 @@
 
 var tailwindVariants = require('tailwind-variants');
 
-const progressBarFilled = tailwindVariants.tv({
-  base: "h-full first:rounded-l-pill last:rounded-r-pill",
-  variants: {
-    intentProgress: {
-      default: "bg-primary-medium",
-      error: "bg-error-medium",
-      info: "bg-info-medium",
-      warning: "bg-warning-medium",
-      success: "bg-success-medium",
-      uploading: ""
-    },
-    showAnimation: {
-      true: "transition-[width] duration-1000 ease-linear"
-    }
-  }
-});
-const progressBarInfiniteVariants = tailwindVariants.tv({
+const ProgressVariants = tailwindVariants.tv({
   slots: {
     container: "relative mb-mili",
-    bar: "h-1.5 w-full overflow-hidden",
-    progress: "w-full h-full origin-left-right rounded-b-mili"
+    bar: "h-1.5 w-full overflow-hidden bg-secondary-xlight",
+    progress: "w-full h-full rounded-mili"
   },
   variants: {
-    status: {
-      uploading: {
-        progress: "bg-info-medium animate-progress"
-      },
-      success: {
-        progress: "bg-success-medium"
+    intent: {
+      default: {
+        progress: "bg-primary-medium"
       },
       error: {
         progress: "bg-error-medium"
       },
-      default: {
-        progress: "bg-primary-medium"
-      },
       info: {
         progress: "bg-info-medium"
       },
       warning: {
         progress: "bg-warning-medium"
+      },
+      success: {
+        progress: "bg-success-medium"
+      }
+    },
+    infinite: {
+      true: {
+        progress: "animate-progress origin-left-right"
       }
     }
   }
 });
 
-exports.progressBarFilled = progressBarFilled;
-exports.progressBarInfiniteVariants = progressBarInfiniteVariants;
+exports.ProgressVariants = ProgressVariants;

package/dist/esm/components/ProgressBar/Progress.js

@@ -0,0 +1,25 @@
+import React__default from 'react';
+import '../../styles/calendar-cell.js';
+import '../../styles/groupButton.js';
+import { ProgressVariants } from '../../styles/progressBar.js';
+
+const { container, bar, progress } = ProgressVariants();
+const Progress = ({
+  value,
+  intent = "default",
+  infinite
+}) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: container(), "data-testid": "linear-progress" }, /* @__PURE__ */ React__default.createElement("div", { className: bar() }, /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      style: {
+        width: !infinite ? `${value}%` : void 0,
+        transition: !infinite ? "width 0.5s ease" : void 0
+      },
+      "data-testid": "progress-filled",
+      className: progress({ intent, infinite })
+    }
+  )));
+};
+
+export { Progress };

package/dist/esm/components/ProgressBar/ProgressBar.js

@@ -1,39 +1,12 @@
-import React__default, { useState, useEffect } from 'react';
-import { ProgressBarInfinite } from './ProgressBarInfinite.js';
-import { ProgressBarSegments } from './ProgressBarSegments.js';
+import React__default from 'react';
+import { Progress } from './Progress.js';
 
 const ProgressBar = ({
-  segments: _segments = 1,
-  valueMin = 0,
-  valueMax = 100,
-  valueCurrent = 50,
-  intentProgress = "default",
-  type = "default",
-  animated = true
+  value = 50,
+  intent = "default",
+  infinite = false
 }) => {
-  const [displayedValue, setDisplayedValue] = useState(0);
-  const [showAnimation, setShowAnimation] = useState(true);
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (valueCurrent < displayedValue) {
-        setShowAnimation(false);
-      }
-      if (animated && valueCurrent > displayedValue) setShowAnimation(true);
-      setDisplayedValue(valueCurrent);
-    }, 0);
-    return () => clearTimeout(timeout);
-  }, [valueCurrent]);
-  const totalProgress = (displayedValue - valueMin) / (valueMax - valueMin) * 100;
-  const segments = Math.max(1, _segments);
-  return type === "infinite" ? /* @__PURE__ */ React__default.createElement(ProgressBarInfinite, { intentProgress }) : /* @__PURE__ */ React__default.createElement(
-    ProgressBarSegments,
-    {
-      segments,
-      totalProgress,
-      intentProgress,
-      showAnimation
-    }
-  );
+  return /* @__PURE__ */ React__default.createElement(Progress, { value, intent, infinite });
 };
 
 export { ProgressBar };

package/dist/esm/components/Uploader/Upload.js

@@ -23,7 +23,7 @@ const File = ({ file, index, onDelete }) => {
       })
     },
     /* @__PURE__ */ React__default.createElement(MdClose, { size: 20 })
-  )), /* @__PURE__ */ React__default.createElement(ProgressBar, { intentProgress: file.status, type: "infinite" }));
+  )), /* @__PURE__ */ React__default.createElement(ProgressBar, { intent: "info", infinite: file.status !== "success" }));
 };
 
 export { File };

package/dist/esm/styles/progressBar.js

@@ -1,49 +1,35 @@
 import { tv } from 'tailwind-variants';
 
-const progressBarFilled = tv({
-  base: "h-full first:rounded-l-pill last:rounded-r-pill",
-  variants: {
-    intentProgress: {
-      default: "bg-primary-medium",
-      error: "bg-error-medium",
-      info: "bg-info-medium",
-      warning: "bg-warning-medium",
-      success: "bg-success-medium",
-      uploading: ""
-    },
-    showAnimation: {
-      true: "transition-[width] duration-1000 ease-linear"
-    }
-  }
-});
-const progressBarInfiniteVariants = tv({
+const ProgressVariants = tv({
   slots: {
     container: "relative mb-mili",
-    bar: "h-1.5 w-full overflow-hidden",
-    progress: "w-full h-full origin-left-right rounded-b-mili"
+    bar: "h-1.5 w-full overflow-hidden bg-secondary-xlight",
+    progress: "w-full h-full rounded-mili"
   },
   variants: {
-    status: {
-      uploading: {
-        progress: "bg-info-medium animate-progress"
-      },
-      success: {
-        progress: "bg-success-medium"
+    intent: {
+      default: {
+        progress: "bg-primary-medium"
       },
       error: {
         progress: "bg-error-medium"
       },
-      default: {
-        progress: "bg-primary-medium"
-      },
       info: {
         progress: "bg-info-medium"
       },
       warning: {
         progress: "bg-warning-medium"
+      },
+      success: {
+        progress: "bg-success-medium"
+      }
+    },
+    infinite: {
+      true: {
+        progress: "animate-progress origin-left-right"
       }
     }
   }
 });
 
-export { progressBarFilled, progressBarInfiniteVariants };
+export { ProgressVariants };

package/dist/types/components/ProgressBar/Progress.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ProgressProps {
+    value: number;
+    intent?: 'default' | 'success' | 'warning' | 'info' | 'error';
+    infinite: boolean;
+}
+export declare const Progress: ({ value, intent, infinite, }: ProgressProps) => JSX.Element;
+export {};

package/dist/types/components/ProgressBar/ProgressBar.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
 export interface ProgressBarProps {
-    segments?: number;
-    valueMin?: number;
-    valueMax?: number;
-    valueCurrent?: number;
-    intentProgress?: 'default' | 'success' | 'warning' | 'info' | 'error' | 'uploading';
-    type?: 'infinite' | 'default';
-    animated?: boolean;
+    value?: number;
+    intent?: 'default' | 'success' | 'warning' | 'info' | 'error';
+    infinite?: boolean;
 }
-export declare const ProgressBar: ({ segments: _segments, valueMin, valueMax, valueCurrent, intentProgress, type, animated, }: ProgressBarProps) => JSX.Element;
+export declare const ProgressBar: ({ value, intent, infinite, }: ProgressBarProps) => JSX.Element;

package/dist/types/styles/progressBar.d.ts

@@ -1,106 +1,23 @@
-export declare const progressBarFilled: import("tailwind-variants").TVReturnType<{
-    intentProgress: {
-        default: string;
-        error: string;
-        info: string;
-        warning: string;
-        success: string;
-        uploading: string;
-    };
-    showAnimation: {
-        true: string;
-    };
-}, undefined, "h-full first:rounded-l-pill last:rounded-r-pill", import("tailwind-variants/dist/config").TVConfig<{
-    intentProgress: {
-        default: string;
-        error: string;
-        info: string;
-        warning: string;
-        success: string;
-        uploading: string;
-    };
-    showAnimation: {
-        true: string;
-    };
-}, {
-    intentProgress: {
-        default: string;
-        error: string;
-        info: string;
-        warning: string;
-        success: string;
-        uploading: string;
-    };
-    showAnimation: {
-        true: string;
-    };
-}>, {
-    intentProgress: {
-        default: string;
-        error: string;
-        info: string;
-        warning: string;
-        success: string;
-        uploading: string;
-    };
-    showAnimation: {
-        true: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    intentProgress: {
-        default: string;
-        error: string;
-        info: string;
-        warning: string;
-        success: string;
-        uploading: string;
-    };
-    showAnimation: {
-        true: string;
-    };
-}, undefined, "h-full first:rounded-l-pill last:rounded-r-pill", import("tailwind-variants/dist/config").TVConfig<{
-    intentProgress: {
-        default: string;
-        error: string;
-        info: string;
-        warning: string;
-        success: string;
-        uploading: string;
-    };
-    showAnimation: {
-        true: string;
-    };
-}, {
-    intentProgress: {
-        default: string;
-        error: string;
-        info: string;
-        warning: string;
-        success: string;
-        uploading: string;
-    };
-    showAnimation: {
-        true: string;
-    };
-}>, unknown, unknown, undefined>>;
-export declare const progressBarInfiniteVariants: import("tailwind-variants").TVReturnType<{
-    status: {
-        uploading: {
+export declare const ProgressVariants: import("tailwind-variants").TVReturnType<{
+    intent: {
+        default: {
             progress: string;
         };
-        success: {
+        error: {
             progress: string;
         };
-        error: {
+        info: {
             progress: string;
         };
-        default: {
+        warning: {
             progress: string;
         };
-        info: {
+        success: {
             progress: string;
         };
-        warning: {
+    };
+    infinite: {
+        true: {
             progress: string;
         };
     };
@@ -109,65 +26,71 @@ export declare const progressBarInfiniteVariants: import("tailwind-variants").TV
     bar: string;
     progress: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    status: {
-        uploading: {
+    intent: {
+        default: {
             progress: string;
         };
-        success: {
+        error: {
             progress: string;
         };
-        error: {
+        info: {
             progress: string;
         };
-        default: {
+        warning: {
             progress: string;
         };
-        info: {
+        success: {
             progress: string;
         };
-        warning: {
+    };
+    infinite: {
+        true: {
             progress: string;
         };
     };
 }, {
-    status: {
-        uploading: {
+    intent: {
+        default: {
             progress: string;
         };
-        success: {
+        error: {
             progress: string;
         };
-        error: {
+        info: {
             progress: string;
         };
-        default: {
+        warning: {
             progress: string;
         };
-        info: {
+        success: {
             progress: string;
         };
-        warning: {
+    };
+    infinite: {
+        true: {
             progress: string;
         };
     };
 }>, {
-    status: {
-        uploading: {
+    intent: {
+        default: {
             progress: string;
         };
-        success: {
+        error: {
             progress: string;
         };
-        error: {
+        info: {
             progress: string;
         };
-        default: {
+        warning: {
             progress: string;
         };
-        info: {
+        success: {
             progress: string;
         };
-        warning: {
+    };
+    infinite: {
+        true: {
             progress: string;
         };
     };
@@ -176,23 +99,25 @@ export declare const progressBarInfiniteVariants: import("tailwind-variants").TV
     bar: string;
     progress: string;
 }, import("tailwind-variants").TVReturnType<{
-    status: {
-        uploading: {
+    intent: {
+        default: {
             progress: string;
         };
-        success: {
+        error: {
             progress: string;
         };
-        error: {
+        info: {
             progress: string;
         };
-        default: {
+        warning: {
             progress: string;
         };
-        info: {
+        success: {
             progress: string;
         };
-        warning: {
+    };
+    infinite: {
+        true: {
             progress: string;
         };
     };
@@ -201,44 +126,48 @@ export declare const progressBarInfiniteVariants: import("tailwind-variants").TV
     bar: string;
     progress: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    status: {
-        uploading: {
+    intent: {
+        default: {
             progress: string;
         };
-        success: {
+        error: {
             progress: string;
         };
-        error: {
+        info: {
             progress: string;
         };
-        default: {
+        warning: {
             progress: string;
         };
-        info: {
+        success: {
             progress: string;
         };
-        warning: {
+    };
+    infinite: {
+        true: {
             progress: string;
         };
     };
 }, {
-    status: {
-        uploading: {
+    intent: {
+        default: {
             progress: string;
         };
-        success: {
+        error: {
             progress: string;
         };
-        error: {
+        info: {
             progress: string;
         };
-        default: {
+        warning: {
             progress: string;
         };
-        info: {
+        success: {
             progress: string;
         };
-        warning: {
+    };
+    infinite: {
+        true: {
             progress: string;
         };
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.7.0-beta.2",
+  "version": "1.7.0-beta.3",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "5f1743019ab6fa1d0cb67905737d89bc42f20a2a"
+  "gitHead": "c97f1fcd1035ed4383b7d6b52eadd7ff473c88c7"
 }

package/dist/cjs/components/ProgressBar/ProgressBarInfinite.js

@@ -1,15 +0,0 @@
-'use strict';
-
-var React = require('react');
-require('../../styles/calendar-cell.js');
-require('../../styles/groupButton.js');
-var progressBar = require('../../styles/progressBar.js');
-
-const { container, bar, progress } = progressBar.progressBarInfiniteVariants();
-const ProgressBarInfinite = ({
-  intentProgress
-}) => {
-  return /* @__PURE__ */ React.createElement("div", { className: container() }, /* @__PURE__ */ React.createElement("div", { className: bar(), "data-testid": "infinite-progress-bar" }, /* @__PURE__ */ React.createElement("div", { className: progress({ status: intentProgress }) })));
-};
-
-exports.ProgressBarInfinite = ProgressBarInfinite;

package/dist/cjs/components/ProgressBar/ProgressBarSegments.js

@@ -1,48 +0,0 @@
-'use strict';
-
-var React = require('react');
-require('../../styles/calendar-cell.js');
-require('../../styles/groupButton.js');
-var progressBar = require('../../styles/progressBar.js');
-
-const ProgressBarSegments = ({
-  segments,
-  totalProgress,
-  intentProgress,
-  showAnimation
-}) => {
-  const lengthSeg = 100 / segments;
-  const items = [...Array(segments).keys()];
-  const progressStyle = React.useCallback(
-    (width, index) => {
-      return {
-        width: `${width}%`,
-        transitionDelay: `${showAnimation ? `${index * 1e3}ms` : `0ms`}`
-      };
-    },
-    [showAnimation]
-  );
-  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-nano flex-row", "data-testid": "progress-bar" }, items.map((_, index) => {
-    const max = lengthSeg * (index + 1);
-    const min = lengthSeg * index;
-    const minmax = (totalProgress - min) / (max - min);
-    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: index,
-        className: "h-[0.5rem] bg-secondary-light flex flex-1 first:rounded-l-pill last:rounded-r-pill"
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: progressStyle(width, index),
-          "data-testid": "div-segment-filled",
-          className: progressBar.progressBarFilled({ intentProgress, showAnimation })
-        }
-      )
-    );
-  }));
-};
-
-exports.ProgressBarSegments = ProgressBarSegments;

package/dist/esm/components/ProgressBar/ProgressBarInfinite.js

@@ -1,13 +0,0 @@
-import React__default from 'react';
-import '../../styles/calendar-cell.js';
-import '../../styles/groupButton.js';
-import { progressBarInfiniteVariants } from '../../styles/progressBar.js';
-
-const { container, bar, progress } = progressBarInfiniteVariants();
-const ProgressBarInfinite = ({
-  intentProgress
-}) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: container() }, /* @__PURE__ */ React__default.createElement("div", { className: bar(), "data-testid": "infinite-progress-bar" }, /* @__PURE__ */ React__default.createElement("div", { className: progress({ status: intentProgress }) })));
-};
-
-export { ProgressBarInfinite };

package/dist/esm/components/ProgressBar/ProgressBarSegments.js

@@ -1,46 +0,0 @@
-import React__default, { useCallback } from 'react';
-import '../../styles/calendar-cell.js';
-import '../../styles/groupButton.js';
-import { progressBarFilled } from '../../styles/progressBar.js';
-
-const ProgressBarSegments = ({
-  segments,
-  totalProgress,
-  intentProgress,
-  showAnimation
-}) => {
-  const lengthSeg = 100 / segments;
-  const items = [...Array(segments).keys()];
-  const progressStyle = useCallback(
-    (width, index) => {
-      return {
-        width: `${width}%`,
-        transitionDelay: `${showAnimation ? `${index * 1e3}ms` : `0ms`}`
-      };
-    },
-    [showAnimation]
-  );
-  return /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-x-nano flex-row", "data-testid": "progress-bar" }, items.map((_, index) => {
-    const max = lengthSeg * (index + 1);
-    const min = lengthSeg * index;
-    const minmax = (totalProgress - min) / (max - min);
-    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
-    return /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        key: index,
-        className: "h-[0.5rem] bg-secondary-light flex flex-1 first:rounded-l-pill last:rounded-r-pill"
-      },
-      /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          style: progressStyle(width, index),
-          "data-testid": "div-segment-filled",
-          className: progressBarFilled({ intentProgress, showAnimation })
-        }
-      )
-    );
-  }));
-};
-
-export { ProgressBarSegments };

package/dist/types/components/ProgressBar/ProgressBarInfinite.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-interface ProgressBarInfiniteProps {
-    intentProgress?: 'default' | 'success' | 'warning' | 'info' | 'error' | 'uploading';
-}
-export declare const ProgressBarInfinite: ({ intentProgress, }: ProgressBarInfiniteProps) => JSX.Element;
-export {};

package/dist/types/components/ProgressBar/ProgressBarSegments.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-interface ProgressBarSegmentsProps {
-    segments: number;
-    totalProgress: number;
-    intentProgress?: 'default' | 'success' | 'warning' | 'info' | 'error' | 'uploading';
-    showAnimation: boolean;
-}
-export declare const ProgressBarSegments: ({ segments, totalProgress, intentProgress, showAnimation, }: ProgressBarSegmentsProps) => JSX.Element;
-export {};