import { createContext, useContext, useState } from "react";
import {
  ThemeableStack,
  View,
  XStack,
  createStyledContext,
  styled,
  withStaticProperties
} from "tamagui";
import { jsx } from "react/jsx-runtime";
const Context = createContext({
  width: 0
}), ProgressContext = createStyledContext({
  variant: "determinate",
  value: 0
}), Frame = styled(XStack, {
  name: "ProgressFrame",
  context: ProgressContext,
  flexDirection: "row",
  alignItems: "center",
  justifyContent: "space-between",
  height: 4,
  maxHeight: 4,
  position: "relative"
}), FrameHOC = Frame.styleable((props, ref) => {
  const [width, setWidth] = useState(0);
  return /* @__PURE__ */ jsx(Context.Provider, { value: { width }, children: /* @__PURE__ */ jsx(
    Frame,
    {
      ...props,
      ref,
      onLayout: (e) => setWidth(e.nativeEvent.layout.width)
    }
  ) });
}), Track = styled(ThemeableStack, {
  name: "ProgressTrack",
  context: ProgressContext,
  backgroundColor: "$primaryContainer",
  height: 4,
  animateOnly: ["width"],
  animation: "slow",
  flexDirection: "row",
  borderRadius: "$shape.corner_full",
  fg: 1
}), Indicator = styled(ThemeableStack, {
  name: "ProgressIndicator",
  context: ProgressContext,
  height: 4,
  backgroundColor: "$primary",
  animateOnly: ["width"],
  animation: "slow",
  borderRadius: "$shape.corner_full",
  mr: 4,
  position: "absolute",
  left: 0,
  bottom: 0,
  zIndex: 10
}), IndicatorHOC = Indicator.styleable((props, ref) => {
  const { value } = useContext(ProgressContext), width = useContext(Context)?.width, displayWidth = Math.min(width * value, width);
  return /* @__PURE__ */ jsx(Indicator, { ...props, ref, width: displayWidth });
}), Target = styled(View, {
  name: "ProgressTarget",
  context: ProgressContext,
  width: 4,
  height: 4,
  borderRadius: 100,
  backgroundColor: "$primary"
}), Progress = withStaticProperties(FrameHOC, {
  Props: ProgressContext.Provider,
  Track,
  Indicator: IndicatorHOC,
  Target
});
export {
  Progress
};
//# sourceMappingURL=Progress.js.map
