@vinyasa/feedback 1.0.21 → 1.0.23

package/dist/esm/147.js

@@ -1,18 +1,32 @@
 import "./147.css";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useSyncExternalStore } from "react";
+import { forwardRef, useSyncExternalStore } from "react";
 import { XIcon } from "@vinyasa/icons";
 import { createRuntimeFn } from "./953.js";
 import { statusIcons } from "./277.js";
-var body = '_1xil9gel';
-var closeButton = '_1xil9geo';
-var description = '_1xil9gen';
-var enterFromBottom = '_1xil9geh';
-var enterFromTop = '_1xil9geg';
-var exitToBottom = '_1xil9gej';
-var exitToTop = '_1xil9gei';
-var icon = '_1xil9gek';
-var stack = createRuntimeFn({
+import * as __rspack_external__radix_ui_react_toast_5fd51b0f from "@radix-ui/react-toast";
+var action = '_1xil9gel';
+var body = '_1xil9geh';
+var closeButton = '_1xil9gek';
+var description = '_1xil9gej';
+var icon = '_1xil9geg';
+var title = '_1xil9gei';
+var toastCard = createRuntimeFn({
+    defaultClassName: '_1xil9geb',
+    variantClassNames: {
+        status: {
+            info: '_1xil9gec',
+            success: '_1xil9ged',
+            warning: '_1xil9gee',
+            error: '_1xil9gef'
+        }
+    },
+    defaultVariants: {
+        status: 'info'
+    },
+    compoundVariants: []
+});
+var viewport = createRuntimeFn({
     defaultClassName: '_1xil9ge0',
     variantClassNames: {
         position: {
@@ -29,22 +43,65 @@ var stack = createRuntimeFn({
     },
     compoundVariants: []
 });
-var title = '_1xil9gem';
-var toastCard = createRuntimeFn({
-    defaultClassName: '_1xil9ge7',
-    variantClassNames: {
-        status: {
-            info: '_1xil9ge8',
-            success: '_1xil9ge9',
-            warning: '_1xil9gea',
-            error: '_1xil9geb'
-        }
-    },
-    defaultVariants: {
-        status: 'info'
-    },
-    compoundVariants: []
-});
+const ToastTitle = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref)=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_toast_5fd51b0f.Title, {
+        ref: ref,
+        className: className ? `${title} ${className}` : title,
+        ...rest
+    }));
+ToastTitle.displayName = 'ToastTitle';
+const ToastDescription = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref)=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_toast_5fd51b0f.Description, {
+        ref: ref,
+        className: className ? `${description} ${className}` : description,
+        ...rest
+    }));
+ToastDescription.displayName = "ToastDescription";
+const ToastAction = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref)=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_toast_5fd51b0f.Action, {
+        ref: ref,
+        className: className ? `${action} ${className}` : action,
+        ...rest
+    }));
+ToastAction.displayName = 'ToastAction';
+const ToastClose = /*#__PURE__*/ forwardRef(({ className, ...rest }, ref)=>/*#__PURE__*/ jsx(__rspack_external__radix_ui_react_toast_5fd51b0f.Close, {
+        ref: ref,
+        className: className ? `${closeButton} ${className}` : closeButton,
+        ...rest
+    }));
+ToastClose.displayName = 'ToastClose';
+const ToasterItem = ({ status, title: itemTitle, description: itemDescription, duration, open, edge, onOpenChange })=>{
+    const Icon = statusIcons[status];
+    return /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_toast_5fd51b0f.Root, {
+        className: toastCard({
+            status
+        }),
+        "data-edge": edge,
+        open: open,
+        duration: 0 === duration ? 1 / 0 : duration,
+        onOpenChange: onOpenChange,
+        forceMount: true,
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                className: icon,
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: body,
+                children: [
+                    /*#__PURE__*/ jsx(ToastTitle, {
+                        children: itemTitle
+                    }),
+                    itemDescription ? /*#__PURE__*/ jsx(ToastDescription, {
+                        children: itemDescription
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsx(ToastClose, {
+                "aria-label": "Dismiss",
+                children: /*#__PURE__*/ jsx(XIcon, {})
+            })
+        ]
+    });
+};
+const toaster_ToasterItem = ToasterItem;
 const TOAST_EXIT_DURATION_MS = 150;
 let toasts = [];
 const listeners = new Set();
@@ -68,7 +125,7 @@ const show = (options)=>{
         title: options.title,
         description: options.description,
         duration: options.duration ?? 4000,
-        exiting: false
+        open: true
     };
     toasts = [
         ...toasts,
@@ -79,10 +136,10 @@ const show = (options)=>{
 };
 const dismiss = (id)=>{
     const target = toasts.find((item)=>item.id === id);
-    if (!target || target.exiting) return;
+    if (!target?.open) return;
     toasts = toasts.map((item)=>item.id === id ? {
             ...item,
-            exiting: true
+            open: false
         } : item);
     notify();
     setTimeout(()=>{
@@ -94,71 +151,28 @@ const toast = {
     show: show,
     dismiss: dismiss
 };
-const ToastItemView = ({ id, status, title: itemTitle, description: itemDescription, duration, exiting, edge })=>{
-    useEffect(()=>{
-        if (duration <= 0) return;
-        const timer = setTimeout(()=>{
-            dismiss(id);
-        }, duration);
-        return ()=>{
-            clearTimeout(timer);
-        };
-    }, [
-        id,
-        duration
-    ]);
-    const Icon = statusIcons[status];
-    const animationClass = exiting ? 'top' === edge ? exitToTop : exitToBottom : 'top' === edge ? enterFromTop : enterFromBottom;
-    return /*#__PURE__*/ jsxs("div", {
-        className: `${toastCard({
-            status
-        })} ${animationClass}`,
-        role: "status",
-        children: [
-            /*#__PURE__*/ jsx(Icon, {
-                className: icon,
-                "aria-hidden": "true"
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: body,
-                children: [
-                    /*#__PURE__*/ jsx("p", {
-                        className: title,
-                        children: itemTitle
-                    }),
-                    itemDescription ? /*#__PURE__*/ jsx("p", {
-                        className: description,
-                        children: itemDescription
-                    }) : null
-                ]
-            }),
-            /*#__PURE__*/ jsx("button", {
-                type: "button",
-                className: closeButton,
-                onClick: ()=>{
-                    dismiss(id);
-                },
-                "aria-label": "Dismiss",
-                children: /*#__PURE__*/ jsx(XIcon, {})
-            })
-        ]
-    });
-};
-const toaster_ToastItemView = ToastItemView;
 const emptySnapshot = [];
 const Toaster = ({ position = 'bottom-right' })=>{
     const items = useSyncExternalStore(subscribe, getSnapshot, ()=>emptySnapshot);
     const edge = position.startsWith('top') ? 'top' : 'bottom';
-    return /*#__PURE__*/ jsx("div", {
-        className: stack({
-            position
-        }),
-        children: items.map((item)=>/*#__PURE__*/ jsx(toaster_ToastItemView, {
-                ...item,
-                edge: edge
-            }, item.id))
+    return /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_toast_5fd51b0f.Provider, {
+        duration: 4000,
+        children: [
+            items.map((item)=>/*#__PURE__*/ jsx(toaster_ToasterItem, {
+                    ...item,
+                    edge: edge,
+                    onOpenChange: (open)=>{
+                        if (!open) dismiss(item.id);
+                    }
+                }, item.id)),
+            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_toast_5fd51b0f.Viewport, {
+                className: viewport({
+                    position
+                })
+            })
+        ]
     });
 };
 Toaster.displayName = 'Toaster';
 const toaster_Toaster = Toaster;
-export { toast, toaster_Toaster as Toaster };
+export { ToastAction, ToastClose, ToastDescription, ToastTitle, toast, toaster_Toaster as Toaster };

package/dist/esm/158.js

@@ -1,31 +1,43 @@
 import "./158.css";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import box from "@vinyasa/layout/box";
-import { forwardRef } from "react";
+import { createContext, forwardRef, useContext } from "react";
 import { Spinner as spinner_Spinner } from "./703.js";
 var backdrop = '_1vw410a2';
 var overlay = '_1vw410a1';
 var wrapper = '_1vw410a0';
+const LoadingOverlayContext = /*#__PURE__*/ createContext(false);
 const LoadingOverlay = /*#__PURE__*/ forwardRef(({ visible, className, children, ...rest }, ref)=>{
     const classes = className ? `${wrapper} ${className}` : wrapper;
-    return /*#__PURE__*/ jsxs(box, {
-        ref: ref,
-        className: classes,
-        ...rest,
-        children: [
-            children,
-            visible ? /*#__PURE__*/ jsxs("div", {
-                className: overlay,
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: backdrop
-                    }),
-                    /*#__PURE__*/ jsx(spinner_Spinner, {})
-                ]
-            }) : null
-        ]
+    return /*#__PURE__*/ jsx(LoadingOverlayContext.Provider, {
+        value: visible,
+        children: /*#__PURE__*/ jsx(box, {
+            ref: ref,
+            className: classes,
+            ...rest,
+            children: children
+        })
     });
 });
 LoadingOverlay.displayName = 'LoadingOverlay';
 const loading_overlay_LoadingOverlay = LoadingOverlay;
-export { loading_overlay_LoadingOverlay as LoadingOverlay };
+const LoadingOverlayBackdrop = ({ className, ...rest })=>{
+    const visible = useContext(LoadingOverlayContext);
+    if (!visible) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: className ? `${backdrop} ${className}` : backdrop,
+        ...rest
+    });
+};
+LoadingOverlayBackdrop.displayName = 'LoadingOverlayBackdrop';
+const LoadingOverlayContent = ({ className, children, ...rest })=>{
+    const visible = useContext(LoadingOverlayContext);
+    if (!visible) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: className ? `${overlay} ${className}` : overlay,
+        ...rest,
+        children: children ?? /*#__PURE__*/ jsx(spinner_Spinner, {})
+    });
+};
+LoadingOverlayContent.displayName = 'LoadingOverlayContent';
+export { LoadingOverlayBackdrop, LoadingOverlayContent, loading_overlay_LoadingOverlay as LoadingOverlay };

package/dist/esm/266.js

@@ -1,17 +1,20 @@
 import "./266.css";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { createContext, forwardRef, useContext } from "react";
 import { resolveSpacingStyle } from "./474.js";
+import * as __rspack_external__radix_ui_react_progress_84970133 from "@radix-ui/react-progress";
 var fill = '_1af39sp4';
 var indeterminate = '_1af39sp2';
 var svg = '_1af39sp1';
 var track = '_1af39sp3';
-const CircularProgress = /*#__PURE__*/ forwardRef(({ value, max = 100, size = 32, strokeWidth = 4, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, ...rest }, ref)=>{
-    const radius = (size - strokeWidth) / 2;
-    const circumference = 2 * Math.PI * radius;
+const CircularProgressContext = /*#__PURE__*/ createContext({
+    value: null,
+    max: 100,
+    size: 32,
+    strokeWidth: 4
+});
+const CircularProgress = /*#__PURE__*/ forwardRef(({ value, max = 100, size = 32, strokeWidth = 4, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children, ...rest }, ref)=>{
     const isIndeterminate = void 0 === value;
-    const percent = isIndeterminate ? 25 : Math.min(100, Math.max(0, value / max * 100));
-    const dashOffset = circumference - percent / 100 * circumference;
     const computedStyle = {
         ...resolveSpacingStyle({
             m,
@@ -37,39 +40,66 @@ const CircularProgress = /*#__PURE__*/ forwardRef(({ value, max = 100, size = 32
         className
     ].filter(Boolean).join(' ');
     const center = size / 2;
-    return /*#__PURE__*/ jsxs("svg", {
-        ref: ref,
-        role: "progressbar",
-        "aria-valuenow": isIndeterminate ? void 0 : value,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        width: size,
-        height: size,
-        viewBox: `0 0 ${String(size)} ${String(size)}`,
-        className: classes,
-        style: computedStyle,
-        ...rest,
-        children: [
-            /*#__PURE__*/ jsx("circle", {
-                className: track,
-                cx: center,
-                cy: center,
-                r: radius,
-                strokeWidth: strokeWidth
-            }),
-            /*#__PURE__*/ jsx("circle", {
-                className: fill,
-                cx: center,
-                cy: center,
-                r: radius,
-                strokeWidth: strokeWidth,
-                strokeDasharray: circumference,
-                strokeDashoffset: dashOffset,
-                transform: `rotate(-90 ${String(center)} ${String(center)})`
+    const radius = (size - strokeWidth) / 2;
+    return /*#__PURE__*/ jsx(CircularProgressContext.Provider, {
+        value: {
+            value: isIndeterminate ? null : value,
+            max,
+            size,
+            strokeWidth
+        },
+        children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_progress_84970133.Root, {
+            value: isIndeterminate ? null : value,
+            max: max,
+            ...rest,
+            asChild: true,
+            children: /*#__PURE__*/ jsxs("svg", {
+                ref: ref,
+                width: size,
+                height: size,
+                viewBox: `0 0 ${String(size)} ${String(size)}`,
+                className: classes,
+                style: computedStyle,
+                children: [
+                    /*#__PURE__*/ jsx("circle", {
+                        className: track,
+                        cx: center,
+                        cy: center,
+                        r: radius,
+                        strokeWidth: strokeWidth
+                    }),
+                    children
+                ]
             })
-        ]
+        })
     });
 });
 CircularProgress.displayName = 'CircularProgress';
 const circular_progress_CircularProgress = CircularProgress;
-export { circular_progress_CircularProgress as CircularProgress };
+const CircularProgressIndicator = ({ className, style, ...rest })=>{
+    const { value, max, size, strokeWidth } = useContext(CircularProgressContext);
+    const isIndeterminate = null === value;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const percent = isIndeterminate ? 25 : Math.min(100, Math.max(0, value / max * 100));
+    const dashOffset = circumference - percent / 100 * circumference;
+    const center = size / 2;
+    const classes = className ? `${fill} ${className}` : fill;
+    return /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_progress_84970133.Indicator, {
+        asChild: true,
+        children: /*#__PURE__*/ jsx("circle", {
+            className: classes,
+            cx: center,
+            cy: center,
+            r: radius,
+            strokeWidth: strokeWidth,
+            strokeDasharray: circumference,
+            strokeDashoffset: dashOffset,
+            transform: `rotate(-90 ${String(center)} ${String(center)})`,
+            style: style,
+            ...rest
+        })
+    });
+};
+CircularProgressIndicator.displayName = 'CircularProgressIndicator';
+export { CircularProgressIndicator, circular_progress_CircularProgress as CircularProgress };

package/dist/esm/277.js

@@ -1,8 +1,12 @@
 import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XIcon } from "@vinyasa/icons";
+import { createContext, useContext } from "react";
 const statusIcons = {
     info: InfoIcon,
     success: CheckCircleIcon,
     warning: AlertTriangleIcon,
     error: XIcon
 };
-export { statusIcons };
+const StatusContext = createContext('info');
+const StatusProvider = StatusContext.Provider;
+const useStatusContext = ()=>useContext(StatusContext);
+export { StatusProvider, statusIcons, useStatusContext };

package/dist/esm/288.js

@@ -1,38 +1,43 @@
 import "./288.css";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Center, Stack } from "@vinyasa/layout";
 import { Heading, Paragraph } from "@vinyasa/typography";
 import { forwardRef } from "react";
 var iconWrapper = 'dmnndp0';
-const EmptyState = /*#__PURE__*/ forwardRef(({ icon, title, description, action, p = 6, ...rest }, ref)=>/*#__PURE__*/ jsx(Center, {
+const EmptyState = /*#__PURE__*/ forwardRef(({ p = 6, children, ...rest }, ref)=>/*#__PURE__*/ jsx(Center, {
         ref: ref,
         p: p,
         ...rest,
-        children: /*#__PURE__*/ jsxs(Stack, {
+        children: /*#__PURE__*/ jsx(Stack, {
             gap: 2,
             align: "center",
             style: {
                 textAlign: 'center',
                 maxWidth: '24rem'
             },
-            children: [
-                icon ? /*#__PURE__*/ jsx("span", {
-                    className: iconWrapper,
-                    children: icon
-                }) : null,
-                /*#__PURE__*/ jsx(Heading, {
-                    as: "h3",
-                    size: "lg",
-                    children: title
-                }),
-                description ? /*#__PURE__*/ jsx(Paragraph, {
-                    color: "muted",
-                    children: description
-                }) : null,
-                action
-            ]
+            children: children
         })
     }));
 EmptyState.displayName = 'EmptyState';
 const empty_state_EmptyState = EmptyState;
-export { empty_state_EmptyState as EmptyState };
+const EmptyStateIcon = ({ className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${iconWrapper} ${className}` : iconWrapper,
+        ...rest
+    });
+EmptyStateIcon.displayName = 'EmptyStateIcon';
+const EmptyStateTitle = ({ size = 'lg', ...rest })=>/*#__PURE__*/ jsx(Heading, {
+        as: "h3",
+        size: size,
+        ...rest
+    });
+EmptyStateTitle.displayName = 'EmptyStateTitle';
+const EmptyStateDescription = ({ color = 'muted', ...rest })=>/*#__PURE__*/ jsx(Paragraph, {
+        color: color,
+        ...rest
+    });
+EmptyStateDescription.displayName = "EmptyStateDescription";
+const EmptyStateAction = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props
+    });
+EmptyStateAction.displayName = 'EmptyStateAction';
+export { EmptyStateAction, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, empty_state_EmptyState as EmptyState };

package/dist/esm/516.js

@@ -1,9 +1,9 @@
 import "./516.css";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createRuntimeFn } from "./953.js";
-import { statusIcons } from "./277.js";
 import { resolveSpacingStyle } from "./474.js";
+import { StatusProvider, useStatusContext, statusIcons } from "./277.js";
 var icon = '_14g63aj5';
 var inlineMessage = createRuntimeFn({
     defaultClassName: '_14g63aj0',
@@ -21,7 +21,6 @@ var inlineMessage = createRuntimeFn({
     compoundVariants: []
 });
 const InlineMessage = /*#__PURE__*/ forwardRef(({ status = 'info', m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children, ...rest }, ref)=>{
-    const Icon = statusIcons[status];
     const classes = className ? `${inlineMessage({
         status
     })} ${className}` : inlineMessage({
@@ -46,21 +45,29 @@ const InlineMessage = /*#__PURE__*/ forwardRef(({ status = 'info', m, mt, mr, mb
         }),
         ...style
     };
-    return /*#__PURE__*/ jsxs("span", {
-        ref: ref,
-        role: "alert",
-        className: classes,
-        style: computedStyle,
-        ...rest,
-        children: [
-            /*#__PURE__*/ jsx(Icon, {
-                className: icon,
-                "aria-hidden": "true"
-            }),
-            children
-        ]
+    return /*#__PURE__*/ jsx(StatusProvider, {
+        value: status,
+        children: /*#__PURE__*/ jsx("span", {
+            ref: ref,
+            role: "alert",
+            className: classes,
+            style: computedStyle,
+            ...rest,
+            children: children
+        })
     });
 });
 InlineMessage.displayName = 'InlineMessage';
 const inline_message_InlineMessage = InlineMessage;
-export { inline_message_InlineMessage as InlineMessage };
+const InlineMessageIcon = ({ className, children, ...rest })=>{
+    const status = useStatusContext();
+    const StatusIcon = statusIcons[status];
+    return /*#__PURE__*/ jsx("span", {
+        className: className ? `${icon} ${className}` : icon,
+        "aria-hidden": "true",
+        ...rest,
+        children: children ?? /*#__PURE__*/ jsx(StatusIcon, {})
+    });
+};
+InlineMessageIcon.displayName = 'InlineMessageIcon';
+export { InlineMessageIcon, inline_message_InlineMessage as InlineMessage };

package/dist/esm/872.css

@@ -3,13 +3,15 @@
   border-radius: var(--vinyasa-radius-full);
   width: 100%;
   height: .5rem;
+  position: relative;
   overflow: hidden;
 }
 
 ._1ie0lek1 {
   background-color: var(--vinyasa-primary);
   border-radius: var(--vinyasa-radius-full);
-  height: 100%;
-  transition: width var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard);
+  transition: transform var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard);
+  position: absolute;
+  inset: 0;
 }
 

package/dist/esm/872.js

@@ -1,29 +1,64 @@
 import "./872.css";
 import { jsx } from "react/jsx-runtime";
-import box from "@vinyasa/layout/box";
-import { forwardRef } from "react";
+import { createContext, forwardRef, useContext } from "react";
+import { resolveSpacingStyle } from "./474.js";
+import * as __rspack_external__radix_ui_react_progress_84970133 from "@radix-ui/react-progress";
 var fill = '_1ie0lek1';
 var track = '_1ie0lek0';
-const ProgressBar = /*#__PURE__*/ forwardRef(({ value, max = 100, className, style, ...rest }, ref)=>{
+const ProgressBarContext = /*#__PURE__*/ createContext({
+    value: 0,
+    max: 100
+});
+const ProgressBar = /*#__PURE__*/ forwardRef(({ value, max = 100, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, ...rest }, ref)=>{
+    const computedStyle = {
+        ...resolveSpacingStyle({
+            m,
+            mt,
+            mr,
+            mb,
+            ml,
+            mx,
+            my,
+            p,
+            pt,
+            pr,
+            pb,
+            pl,
+            px,
+            py
+        }),
+        ...style
+    };
     const classes = className ? `${track} ${className}` : track;
-    const percent = Math.min(100, Math.max(0, value / max * 100));
-    return /*#__PURE__*/ jsx(box, {
-        ref: ref,
-        role: "progressbar",
-        "aria-valuenow": value,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        className: classes,
-        style: style,
-        ...rest,
-        children: /*#__PURE__*/ jsx("div", {
-            className: fill,
-            style: {
-                width: `${String(percent)}%`
-            }
+    return /*#__PURE__*/ jsx(ProgressBarContext.Provider, {
+        value: {
+            value,
+            max
+        },
+        children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_progress_84970133.Root, {
+            ref: ref,
+            value: value,
+            max: max,
+            className: classes,
+            style: computedStyle,
+            ...rest
         })
     });
 });
 ProgressBar.displayName = 'ProgressBar';
 const progress_bar_ProgressBar = ProgressBar;
-export { progress_bar_ProgressBar as ProgressBar };
+const ProgressBarIndicator = ({ className, style, ...rest })=>{
+    const { value, max } = useContext(ProgressBarContext);
+    const percent = Math.min(100, Math.max(0, value / max * 100));
+    const classes = className ? `${fill} ${className}` : fill;
+    return /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_progress_84970133.Indicator, {
+        className: classes,
+        style: {
+            transform: `translateX(-${String(100 - percent)}%)`,
+            ...style
+        },
+        ...rest
+    });
+};
+ProgressBarIndicator.displayName = 'ProgressBarIndicator';
+export { ProgressBarIndicator, progress_bar_ProgressBar as ProgressBar };