@homecode/ui 4.23.4 → 4.24.2

package/dist/esm/index.js

@@ -26,6 +26,8 @@ export { Paranja } from './src/components/Paranja/Paranja.js';
 export { ANIMATION_DURATION, Popup } from './src/components/Popup/Popup.js';
 export { Portal } from './src/components/Portal/Portal.js';
 export { PopupMenu } from './src/components/PopupMenu/PopupMenu.js';
+export { Progress } from './src/components/Progress/Progress.js';
+export { ProgressCircular } from './src/components/ProgressCircular/ProgressCircular.js';
 export { Router, RouterContext, RouterStore } from './src/components/Router/Router.js';
 export { RequiredStar } from './src/components/RequiredStar/RequiredStar.js';
 export { Select, SelectHelpers } from './src/components/Select/Select.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -49,6 +49,8 @@ import { Menu } from '../Menu/Menu.js';
 import '../Notifications/store.js';
 import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
+import '../Progress/Progress.styl.js';
+import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';

package/dist/esm/src/components/Input/Input.js

@@ -47,6 +47,8 @@ import '../Menu/Menu.js';
 import '../Notifications/store.js';
 import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
+import '../Progress/Progress.styl.js';
+import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';

package/dist/esm/src/components/InputFile/InputFile.js

@@ -47,6 +47,8 @@ import '../Menu/Menu.js';
 import '../Notifications/store.js';
 import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
+import '../Progress/Progress.styl.js';
+import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';

package/dist/esm/src/components/Progress/Progress.helpers.js

@@ -0,0 +1,5 @@
+const calculateProgress = (value) => {
+    return Math.min(100, Math.max(0, value));
+};
+
+export { calculateProgress };

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

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { calculateProgress } from './Progress.helpers.js';
+import S from './Progress.styl.js';
+
+function Progress({ value, showPercentage, size = 'm', alignText = 'center', className, }) {
+    const progress = calculateProgress(value);
+    const classes = cn(S.root, S[`size-${size}`], S[`align-${alignText}`], value > 0 && S.animated, className);
+    return (jsxs("div", { className: classes, children: [jsx("div", { className: S.bar, style: { width: `${progress}%` } }), showPercentage && jsxs("div", { className: S.label, children: [Math.round(progress), "%"] })] }));
+}
+
+export { Progress };

package/dist/esm/src/components/Progress/Progress.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Progress_root__gGPO9{background-color:var(--accent-color-alpha-100);border-radius:50px;position:relative;width:100%}.Progress_size-s__Xl7Vl{font-size:14px;height:2px}.Progress_size-m__2vNe8{font-size:16px;height:8px}.Progress_size-l__GYI3y{font-size:18px;height:12px}.Progress_bar__guoEx{background-color:var(--active-color);border-radius:inherit;height:100%}.Progress_animated__rfWjG .Progress_bar__guoEx{transition:width .3s ease}.Progress_hasLabel__1Xx16{margin-top:1em}.Progress_label__rQqsN{bottom:100%;color:var(--accent-color);font-weight:700;margin-bottom:4px;position:absolute}.Progress_align-left__p45c1 .Progress_label__rQqsN{left:var(--indent-s)}.Progress_align-center__HheKi .Progress_label__rQqsN{left:50%;transform:translate(-50%)}.Progress_align-right__lIRT2 .Progress_label__rQqsN{right:var(--indent-s)}";
+var S = {"root":"Progress_root__gGPO9","size-s":"Progress_size-s__Xl7Vl","size-m":"Progress_size-m__2vNe8","size-l":"Progress_size-l__GYI3y","bar":"Progress_bar__guoEx","animated":"Progress_animated__rfWjG","hasLabel":"Progress_hasLabel__1Xx16","label":"Progress_label__rQqsN","align-left":"Progress_align-left__p45c1","align-center":"Progress_align-center__HheKi","align-right":"Progress_align-right__lIRT2"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/ProgressCircular/ProgressCircular.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { calculateProgress } from '../Progress/Progress.helpers.js';
+import S from './ProgressCircular.styl.js';
+
+const SIZE_MAP = {
+    s: 20,
+    m: 30,
+    l: 60,
+    xl: 120,
+};
+function ProgressCircular({ value, showPercentage, size = 'm', strokeWidth, className, }) {
+    const progress = calculateProgress(value);
+    const pixelSize = SIZE_MAP[size];
+    const calculatedStrokeWidth = strokeWidth ?? pixelSize / 10;
+    const radius = (pixelSize - calculatedStrokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = circumference - (progress / 100) * circumference;
+    return (jsxs("svg", { width: pixelSize, height: pixelSize, viewBox: `0 0 ${pixelSize} ${pixelSize}`, className: cn(S.root, value > 0 && S.animated, className), children: [jsx("circle", { className: S.background, cx: pixelSize / 2, cy: pixelSize / 2, r: radius, fill: "none", strokeWidth: calculatedStrokeWidth }), jsx("circle", { cx: pixelSize / 2, cy: pixelSize / 2, r: radius, fill: "none", stroke: "var(--active-color)", strokeWidth: calculatedStrokeWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: strokeDashoffset, transform: `rotate(-90 ${pixelSize / 2} ${pixelSize / 2})`, className: S.progress }), showPercentage && (jsxs("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", fontSize: "16", fontWeight: "bold", children: [Math.round(progress), "%"] }))] }));
+}
+
+export { ProgressCircular };

package/dist/esm/src/components/ProgressCircular/ProgressCircular.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ProgressCircular_root__z7xBm .ProgressCircular_background__Rlqcq{stroke:var(--accent-color-alpha-100)}.ProgressCircular_root__z7xBm.ProgressCircular_animated__w3Bpf .ProgressCircular_progress__QVG7n{transition:stroke-dashoffset .3s ease-in-out}.ProgressCircular_root__z7xBm text{fill:var(--accent-color)}";
+var S = {"root":"ProgressCircular_root__z7xBm","background":"ProgressCircular_background__Rlqcq","animated":"ProgressCircular_animated__w3Bpf","progress":"ProgressCircular_progress__QVG7n"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/types/src/components/Icon/Icon.d.ts

@@ -1,5 +1,9 @@
 import * as T from './Icon.types';
 export declare const icons: {
+    arrowRight: () => Promise<any>;
+    arrowLeft: () => Promise<any>;
+    arrowUp: () => Promise<any>;
+    arrowDown: () => Promise<any>;
     avatar: () => Promise<any>;
     bookmark: () => Promise<any>;
     bookmarkAdd: () => Promise<any>;
@@ -18,6 +22,7 @@ export declare const icons: {
     chevronRight: () => Promise<any>;
     chevronLeft: () => Promise<any>;
     clearAll: () => Promise<any>;
+    cubes: () => Promise<any>;
     delete: () => Promise<any>;
     draft: () => Promise<any>;
     dragHandlerHorizontal: () => Promise<any>;
@@ -56,8 +61,10 @@ export declare const icons: {
     plus: () => Promise<any>;
     redo: () => Promise<any>;
     undo: () => Promise<any>;
+    usage: () => Promise<any>;
     requiredStar: () => Promise<any>;
     rewind: () => Promise<any>;
+    rocket: () => Promise<any>;
     route: () => Promise<any>;
     routeFrom: () => Promise<any>;
     routeTo: () => Promise<any>;
@@ -66,11 +73,13 @@ export declare const icons: {
     send: () => Promise<any>;
     settings: () => Promise<any>;
     shoppingBag: () => Promise<any>;
+    soundWave: () => Promise<any>;
     sparks: () => Promise<any>;
     star: () => Promise<any>;
     syncArrows: () => Promise<any>;
     table: () => Promise<any>;
     telegram: () => Promise<any>;
+    tool: () => Promise<any>;
     trafficLight: () => Promise<any>;
 };
 export type { IconType } from './Icon.types';

package/dist/esm/types/src/components/Progress/Progress.d.ts

@@ -0,0 +1,2 @@
+import { ProgressProps } from './Progress.types';
+export declare function Progress({ value, showPercentage, size, alignText, className, }: ProgressProps): JSX.Element;

package/dist/esm/types/src/components/Progress/Progress.helpers.d.ts

@@ -0,0 +1 @@
+export declare const calculateProgress: (value: number) => number;

package/dist/esm/types/src/components/Progress/Progress.types.d.ts

@@ -0,0 +1,10 @@
+import { Size } from 'uilib/types';
+export interface CommonProgressProps {
+    value: number;
+    showPercentage?: boolean;
+    size?: Size;
+    className?: string;
+}
+export interface ProgressProps extends CommonProgressProps {
+    alignText?: 'left' | 'center' | 'right';
+}

package/dist/esm/types/src/components/ProgressCircular/ProgressCircular.d.ts

@@ -0,0 +1,3 @@
+import { ProgressCircularProps } from './ProgressCircular.types';
+export type { ProgressCircularProps } from './ProgressCircular.types';
+export declare function ProgressCircular({ value, showPercentage, size, strokeWidth, className, }: ProgressCircularProps): JSX.Element;

package/dist/esm/types/src/components/ProgressCircular/ProgressCircular.types.d.ts

@@ -0,0 +1,4 @@
+import { CommonProgressProps } from '../Progress/Progress.types';
+export interface ProgressCircularProps extends CommonProgressProps {
+    strokeWidth?: number;
+}

package/dist/esm/types/src/components/index.d.ts

@@ -26,6 +26,8 @@ export * from './Paranja/Paranja';
 export * from './Popup/Popup';
 export * from './Portal/Portal';
 export * from './PopupMenu/PopupMenu';
+export * from './Progress/Progress';
+export * from './ProgressCircular/ProgressCircular';
 export * from './Router/Router';
 export * from './RequiredStar/RequiredStar';
 export * from './Select/Select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.23.4",
+  "version": "4.24.2",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",